diff --git a/.gitignore b/.gitignore
index 1e075e998..0a5b72f52 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,7 @@
 .env.production.local
 .env.production
 .idea
+.vscode
 
 npm-debug.log*
 yarn-debug.log*
@@ -30,4 +31,5 @@ yarn-error.log*
 
 # Temporary env files
 /public/env-config.js
-env-config.js
\ No newline at end of file
+env-config.js
+
diff --git a/package-lock.json b/package-lock.json
index 29ff1aa19..e180fe1a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -519,7 +519,7 @@
         "reselect": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/reselect/-/reselect-3.0.1.tgz",
-          "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc="
+          "integrity": "sha512-b/6tFZCmRhtBMa4xGqiiRp9jh9Aqi2A687Lo265cN0/QohJQEBPiQ52f4QB6i0eF3yp3hmLL21LSGBcML2dlxA=="
         },
         "uuid": {
           "version": "3.4.0",
@@ -1863,8 +1863,7 @@
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
-      "dev": true
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
     "@types/lodash": {
       "version": "4.14.176",
@@ -2193,7 +2192,7 @@
     "acorn-jsx": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
-      "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "integrity": "sha512-AU7pnZkguthwBjKgCg6998ByQNIMjbuDQZ8bb78QAFZwPfmKia8AIzgY/gWgqCjnht8JLdXmB4YxA0KaV60ncQ==",
       "requires": {
         "acorn": "^3.0.4"
       },
@@ -2201,7 +2200,7 @@
         "acorn": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+          "integrity": "sha512-OLUyIIZ7mF5oaAUT1w0TFqQS81q3saT46x8t7ukpPjMNk+nbs4ZHhs7ToV8EWnLYLepjETXd4XaCE4uxkMeqUw=="
         }
       }
     },
@@ -2216,6 +2215,15 @@
       "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
       "integrity": "sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg=="
     },
+    "adler-32": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.1.0.tgz",
+      "integrity": "sha512-lRKKX9RZQBPy6CrdUqiDUsxVcZujjbkkUg++0zLLyi0EwRui+aFyEDJBXRXCqwp+pmmybdZgBNHxOAOQcgdJYg==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -2325,7 +2333,7 @@
     "ansi-align": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
-      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "integrity": "sha512-TdlOggdA/zURfMYa7ABC66j+oqfMew58KpJMbUlH3bcZP1b+cBHIHDDn5uH9INsxrHBPjsqM0tDB4jPTF/vgJA==",
       "requires": {
         "string-width": "^2.0.0"
       },
@@ -2347,7 +2355,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -2368,13 +2376,12 @@
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
-      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=",
-      "dev": true
+      "integrity": "sha512-JoAxEa1DfP9m2xfB/y2r/aKcwXNlltr4+0QSBC4TrLfcxyvepX2Pv0t/xpgGV5bGsDzCYV8SzjWgyCW0T9yYbA=="
     },
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -2397,14 +2404,12 @@
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-          "dev": true
+          "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA=="
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true
+          "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ=="
         },
         "braces": {
           "version": "2.3.2",
@@ -2427,8 +2432,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -2438,8 +2442,7 @@
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-          "dev": true,
+          "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
           "requires": {
             "debug": "^2.3.3",
             "define-property": "^0.2.5",
@@ -2453,8 +2456,7 @@
             "define-property": {
               "version": "0.2.5",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-              "dev": true,
+              "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
               "requires": {
                 "is-descriptor": "^0.1.0"
               }
@@ -2462,8 +2464,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -2471,8 +2472,7 @@
             "is-accessor-descriptor": {
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-              "dev": true,
+              "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -2480,8 +2480,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -2491,8 +2490,7 @@
             "is-data-descriptor": {
               "version": "0.1.4",
               "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-              "dev": true,
+              "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -2500,8 +2498,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -2546,8 +2543,7 @@
             "define-property": {
               "version": "1.0.0",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-              "dev": true,
+              "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
               "requires": {
                 "is-descriptor": "^1.0.0"
               }
@@ -2555,8 +2551,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -2566,8 +2561,7 @@
         "fill-range": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -2578,8 +2572,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -2618,8 +2611,7 @@
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
+          "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -2627,8 +2619,7 @@
             "kind-of": {
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
+              "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -2638,8 +2629,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "kind-of": {
           "version": "6.0.3",
@@ -2673,8 +2663,7 @@
     "append-transform": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-0.4.0.tgz",
-      "integrity": "sha1-126/jKlNJ24keja61EpLdKthGZE=",
-      "dev": true,
+      "integrity": "sha512-Yisb7ew0ZEyDtRYQ+b+26o9KbiYPFxwcsxKzbssigzRRMJ9LpExPVUg6Fos7eP7yP3q7///tzze4nm4lTptPBw==",
       "requires": {
         "default-require-extensions": "^1.0.0"
       }
@@ -2733,8 +2722,7 @@
     "arr-diff": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
-      "dev": true,
+      "integrity": "sha512-dtXTVMkh6VkEEA7OhXnN1Ecb8aAGFdZ1LFxtOCoqj4qkyOJMt7+qs6Ahdy6p/NQCPYsRSXXivhSB/J5E9jmYKA==",
       "requires": {
         "arr-flatten": "^1.0.1"
       }
@@ -2747,7 +2735,7 @@
     "arr-union": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q=="
     },
     "array-back": {
       "version": "2.0.0",
@@ -2761,18 +2749,17 @@
     "array-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
-      "dev": true
+      "integrity": "sha512-H3LU5RLiSsGXPhN+Nipar0iR0IofH+8r89G2y1tBKxQ/agagKyAjhkAFDRBfodP2caPrNKHpAWNIM/c9yeL7uA=="
     },
     "array-filter": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
-      "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw="
+      "integrity": "sha512-VW0FpCIhjZdarWjIz8Vpva7U95fl2Jn+b+mmFFMLn8PIVscOQcAgEznwUzTEuUHuqZqIxwzRlcaN/urTFFQoiw=="
     },
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+      "integrity": "sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw=="
     },
     "array-flatten": {
       "version": "2.1.2",
@@ -2943,12 +2930,12 @@
     "array-reduce": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
-      "integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys="
+      "integrity": "sha512-8jR+StqaC636u7h3ye1co3lQRefgVVUQUhuAmRbDqIMeR2yuXzRvkCNQiQ5J/wbREmoBLNtp13dhaaVpZQDRUw=="
     },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
       "requires": {
         "array-uniq": "^1.0.1"
       }
@@ -2956,13 +2943,12 @@
     "array-uniq": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q=="
     },
     "array-unique": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
-      "dev": true
+      "integrity": "sha512-G2n5bG5fSUCpnsXz4+8FUkYsGPkNfLn9YvS66U5qbTIXI2Ynnlo4Bi42bWv+omKUCqz+ejzfClwne0alJWJPhg=="
     },
     "array.prototype.find": {
       "version": "2.1.1",
@@ -3304,12 +3290,12 @@
     "arrify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA=="
     },
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
     "asn1": {
       "version": "0.2.3",
@@ -3350,19 +3336,17 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
     },
     "assign-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw=="
     },
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
-      "dev": true
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
     },
     "astral-regex": {
       "version": "1.0.0",
@@ -3394,8 +3378,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "atob": {
       "version": "2.1.1",
@@ -3424,8 +3407,7 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
     },
     "aws4": {
       "version": "1.8.0",
@@ -3448,7 +3430,7 @@
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
-      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "integrity": "sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==",
       "requires": {
         "chalk": "^1.1.3",
         "esutils": "^2.0.2",
@@ -3458,12 +3440,12 @@
         "ansi-styles": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="
         },
         "chalk": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -3475,7 +3457,7 @@
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
         }
       }
     },
@@ -3509,8 +3491,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
         }
       }
     },
@@ -3585,16 +3566,14 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
         }
       }
     },
     "babel-helper-builder-binary-assignment-operator-visitor": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz",
-      "integrity": "sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=",
-      "dev": true,
+      "integrity": "sha512-gCtfYORSG1fUMX4kKraymq607FWgMWg+j42IFPc18kFQEsmtaibP4UrqsXt8FlEJle25HUd4tsoDR7H2wDhe9Q==",
       "requires": {
         "babel-helper-explode-assignable-expression": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -3604,8 +3583,7 @@
     "babel-helper-builder-react-jsx": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz",
-      "integrity": "sha1-Of+DE7dci2Xc7/HzHTg+D/KkCKA=",
-      "dev": true,
+      "integrity": "sha512-02I9jDjnVEuGy2BR3LRm9nPRb/+Ja0pvZVLr1eI5TYAA/dB0Xoc+WBo50+aDfhGDLhlBY1+QURjn9uvcFd8gzg==",
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-types": "^6.26.0",
@@ -3615,8 +3593,7 @@
     "babel-helper-call-delegate": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz",
-      "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=",
-      "dev": true,
+      "integrity": "sha512-RL8n2NiEj+kKztlrVJM9JT1cXzzAdvWFh76xh/H1I4nKwunzE4INBXn8ieCZ+wh4zWszZk7NBS1s/8HR5jDkzQ==",
       "requires": {
         "babel-helper-hoist-variables": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -3627,8 +3604,7 @@
     "babel-helper-define-map": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz",
-      "integrity": "sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=",
-      "dev": true,
+      "integrity": "sha512-bHkmjcC9lM1kmZcVpA5t2om2nzT/xiZpo6TJq7UlZ3wqKfzia4veeXbIhKvJXAMzhhEBd3cR1IElL5AenWEUpA==",
       "requires": {
         "babel-helper-function-name": "^6.24.1",
         "babel-runtime": "^6.26.0",
@@ -3639,8 +3615,7 @@
     "babel-helper-explode-assignable-expression": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz",
-      "integrity": "sha1-8luCz33BBDPFX3BZLVdGQArCLKo=",
-      "dev": true,
+      "integrity": "sha512-qe5csbhbvq6ccry9G7tkXbzNtcDiH4r51rrPUbwwoTzZ18AqxWYRZT6AOmxrpxKnQBW0pYlBI/8vh73Z//78nQ==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-traverse": "^6.24.1",
@@ -3650,8 +3625,7 @@
     "babel-helper-function-name": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
-      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
-      "dev": true,
+      "integrity": "sha512-Oo6+e2iX+o9eVvJ9Y5eKL5iryeRdsIkwRYheCuhYdVHsdEQysbc2z2QkqCLIYnNxkT5Ss3ggrHdXiDI7Dhrn4Q==",
       "requires": {
         "babel-helper-get-function-arity": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -3663,8 +3637,7 @@
     "babel-helper-get-function-arity": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
-      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
-      "dev": true,
+      "integrity": "sha512-WfgKFX6swFB1jS2vo+DwivRN4NB8XUdM3ij0Y1gnC21y1tdBoe6xjVnd7NSI6alv+gZXCtJqvrTeMW3fR/c0ng==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-types": "^6.24.1"
@@ -3673,8 +3646,7 @@
     "babel-helper-hoist-variables": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz",
-      "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=",
-      "dev": true,
+      "integrity": "sha512-zAYl3tqerLItvG5cKYw7f1SpvIxS9zi7ohyGHaI9cgDUjAT6YcY9jIEH5CstetP5wHIVSceXwNS7Z5BpJg+rOw==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-types": "^6.24.1"
@@ -3683,8 +3655,7 @@
     "babel-helper-optimise-call-expression": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz",
-      "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=",
-      "dev": true,
+      "integrity": "sha512-Op9IhEaxhbRT8MDXx2iNuMgciu2V8lDvYCNQbDGjdBNCjaMvyLf4wl4A3b8IgndCyQF8TwfgsQ8T3VD8aX1/pA==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-types": "^6.24.1"
@@ -3693,8 +3664,7 @@
     "babel-helper-regex": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz",
-      "integrity": "sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=",
-      "dev": true,
+      "integrity": "sha512-VlPiWmqmGJp0x0oK27Out1D+71nVVCTSdlbhIVoaBAj2lUgrNjBCRR9+llO4lTSb2O4r7PJg+RobRkhBrf6ofg==",
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-types": "^6.26.0",
@@ -3704,8 +3674,7 @@
     "babel-helper-remap-async-to-generator": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz",
-      "integrity": "sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=",
-      "dev": true,
+      "integrity": "sha512-RYqaPD0mQyQIFRu7Ho5wE2yvA/5jxqCIj/Lv4BXNq23mHYu/vxikOy2JueLiBxQknwapwrJeNCesvY0ZcfnlHg==",
       "requires": {
         "babel-helper-function-name": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -3717,8 +3686,7 @@
     "babel-helper-replace-supers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz",
-      "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=",
-      "dev": true,
+      "integrity": "sha512-sLI+u7sXJh6+ToqDr57Bv973kCepItDhMou0xCP2YPVmR1jkHSCY+p1no8xErbV1Siz5QE8qKT1WIwybSWlqjw==",
       "requires": {
         "babel-helper-optimise-call-expression": "^6.24.1",
         "babel-messages": "^6.23.0",
@@ -3731,8 +3699,7 @@
     "babel-helpers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
-      "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=",
-      "dev": true,
+      "integrity": "sha512-n7pFrqQm44TCYvrCDb0MqabAF+JUBq+ijBvNMUxpkLjJaAu32faIexewMumrH5KLLJ1HDyT0PTEqRyAe/GwwuQ==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-template": "^6.24.1"
@@ -3775,8 +3742,7 @@
     "babel-messages": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
-      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
-      "dev": true,
+      "integrity": "sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -3784,8 +3750,7 @@
     "babel-plugin-check-es2015-constants": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",
-      "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=",
-      "dev": true,
+      "integrity": "sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -3816,8 +3781,7 @@
     "babel-plugin-jest-hoist": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz",
-      "integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
-      "dev": true
+      "integrity": "sha512-N0MlMjZtahXK0yb0K3V9hWPrq5e7tThbghvDr0k3X75UuOOqwsWW6mk8XHD2QvEC0Ca9dLIfTgNU36TeJD6Hnw=="
     },
     "babel-plugin-react-generate-property": {
       "version": "1.0.5",
@@ -3845,55 +3809,47 @@
     "babel-plugin-syntax-async-functions": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
-      "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
-      "dev": true
+      "integrity": "sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw=="
     },
     "babel-plugin-syntax-class-properties": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
-      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=",
-      "dev": true
+      "integrity": "sha512-chI3Rt9T1AbrQD1s+vxw3KcwC9yHtF621/MacuItITfZX344uhQoANjpoSJZleAmW2tjlolqB/f+h7jIqXa7pA=="
     },
     "babel-plugin-syntax-dynamic-import": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
-      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
-      "dev": true
+      "integrity": "sha512-MioUE+LfjCEz65Wf7Z/Rm4XCP5k2c+TbMd2Z2JKc7U9uwjBhAfNPE48KC4GTGKhppMeYVepwDBNO/nGY6NYHBA=="
     },
     "babel-plugin-syntax-exponentiation-operator": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
-      "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=",
-      "dev": true
+      "integrity": "sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ=="
     },
     "babel-plugin-syntax-flow": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
-      "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=",
-      "dev": true
+      "integrity": "sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA=="
     },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
-      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
-      "dev": true
+      "integrity": "sha512-C4Aq+GaAj83pRQ0EFgTvw5YO6T3Qz2KGrNRwIj9mSoNHVvdZY4KO2uA6HNtNXCw993iSZnckY1aLW8nOi8i4+w=="
     },
     "babel-plugin-syntax-trailing-function-commas": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
-      "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=",
-      "dev": true
+      "integrity": "sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ=="
     },
     "babel-plugin-transform-async-to-generator": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz",
-      "integrity": "sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=",
-      "dev": true,
+      "integrity": "sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==",
       "requires": {
         "babel-helper-remap-async-to-generator": "^6.24.1",
         "babel-plugin-syntax-async-functions": "^6.8.0",
@@ -3903,8 +3859,7 @@
     "babel-plugin-transform-class-properties": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
-      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
-      "dev": true,
+      "integrity": "sha512-n4jtBA3OYBdvG5PRMKsMXJXHfLYw/ZOmtxCLOOwz6Ro5XlrColkStLnz1AS1L2yfPA9BKJ1ZNlmVCLjAL9DSIg==",
       "requires": {
         "babel-helper-function-name": "^6.24.1",
         "babel-plugin-syntax-class-properties": "^6.8.0",
@@ -3915,8 +3870,7 @@
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
-      "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=",
-      "dev": true,
+      "integrity": "sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -3924,8 +3878,7 @@
     "babel-plugin-transform-es2015-block-scoped-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz",
-      "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=",
-      "dev": true,
+      "integrity": "sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -3933,8 +3886,7 @@
     "babel-plugin-transform-es2015-block-scoping": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz",
-      "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=",
-      "dev": true,
+      "integrity": "sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==",
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-template": "^6.26.0",
@@ -3946,8 +3898,7 @@
     "babel-plugin-transform-es2015-classes": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz",
-      "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=",
-      "dev": true,
+      "integrity": "sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==",
       "requires": {
         "babel-helper-define-map": "^6.24.1",
         "babel-helper-function-name": "^6.24.1",
@@ -3963,8 +3914,7 @@
     "babel-plugin-transform-es2015-computed-properties": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz",
-      "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=",
-      "dev": true,
+      "integrity": "sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-template": "^6.24.1"
@@ -3973,8 +3923,7 @@
     "babel-plugin-transform-es2015-destructuring": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz",
-      "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=",
-      "dev": true,
+      "integrity": "sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -3982,8 +3931,7 @@
     "babel-plugin-transform-es2015-duplicate-keys": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz",
-      "integrity": "sha1-c+s9MQypaePvnskcU3QabxV2Qj4=",
-      "dev": true,
+      "integrity": "sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-types": "^6.24.1"
@@ -3992,8 +3940,7 @@
     "babel-plugin-transform-es2015-for-of": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz",
-      "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=",
-      "dev": true,
+      "integrity": "sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4001,8 +3948,7 @@
     "babel-plugin-transform-es2015-function-name": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz",
-      "integrity": "sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=",
-      "dev": true,
+      "integrity": "sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==",
       "requires": {
         "babel-helper-function-name": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -4012,8 +3958,7 @@
     "babel-plugin-transform-es2015-literals": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz",
-      "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=",
-      "dev": true,
+      "integrity": "sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4021,8 +3966,7 @@
     "babel-plugin-transform-es2015-modules-amd": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz",
-      "integrity": "sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=",
-      "dev": true,
+      "integrity": "sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==",
       "requires": {
         "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -4044,8 +3988,7 @@
     "babel-plugin-transform-es2015-modules-systemjs": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz",
-      "integrity": "sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=",
-      "dev": true,
+      "integrity": "sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==",
       "requires": {
         "babel-helper-hoist-variables": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -4055,8 +3998,7 @@
     "babel-plugin-transform-es2015-modules-umd": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz",
-      "integrity": "sha1-rJl+YoXNGO1hdq22B9YCNErThGg=",
-      "dev": true,
+      "integrity": "sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==",
       "requires": {
         "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -4066,8 +4008,7 @@
     "babel-plugin-transform-es2015-object-super": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz",
-      "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=",
-      "dev": true,
+      "integrity": "sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==",
       "requires": {
         "babel-helper-replace-supers": "^6.24.1",
         "babel-runtime": "^6.22.0"
@@ -4076,8 +4017,7 @@
     "babel-plugin-transform-es2015-parameters": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz",
-      "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=",
-      "dev": true,
+      "integrity": "sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==",
       "requires": {
         "babel-helper-call-delegate": "^6.24.1",
         "babel-helper-get-function-arity": "^6.24.1",
@@ -4090,8 +4030,7 @@
     "babel-plugin-transform-es2015-shorthand-properties": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz",
-      "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=",
-      "dev": true,
+      "integrity": "sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-types": "^6.24.1"
@@ -4100,8 +4039,7 @@
     "babel-plugin-transform-es2015-spread": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz",
-      "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=",
-      "dev": true,
+      "integrity": "sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4109,8 +4047,7 @@
     "babel-plugin-transform-es2015-sticky-regex": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz",
-      "integrity": "sha1-AMHNsaynERLN8M9hJsLta0V8zbw=",
-      "dev": true,
+      "integrity": "sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==",
       "requires": {
         "babel-helper-regex": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -4120,8 +4057,7 @@
     "babel-plugin-transform-es2015-template-literals": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz",
-      "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=",
-      "dev": true,
+      "integrity": "sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4129,8 +4065,7 @@
     "babel-plugin-transform-es2015-typeof-symbol": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz",
-      "integrity": "sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=",
-      "dev": true,
+      "integrity": "sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4138,8 +4073,7 @@
     "babel-plugin-transform-es2015-unicode-regex": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz",
-      "integrity": "sha1-04sS9C6nMj9yk4fxinxa4frrNek=",
-      "dev": true,
+      "integrity": "sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==",
       "requires": {
         "babel-helper-regex": "^6.24.1",
         "babel-runtime": "^6.22.0",
@@ -4149,8 +4083,7 @@
     "babel-plugin-transform-exponentiation-operator": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz",
-      "integrity": "sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=",
-      "dev": true,
+      "integrity": "sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==",
       "requires": {
         "babel-helper-builder-binary-assignment-operator-visitor": "^6.24.1",
         "babel-plugin-syntax-exponentiation-operator": "^6.8.0",
@@ -4160,8 +4093,7 @@
     "babel-plugin-transform-flow-strip-types": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz",
-      "integrity": "sha1-hMtnKTXUNxT9wyvOhFaNh0Qc988=",
-      "dev": true,
+      "integrity": "sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==",
       "requires": {
         "babel-plugin-syntax-flow": "^6.18.0",
         "babel-runtime": "^6.22.0"
@@ -4170,8 +4102,7 @@
     "babel-plugin-transform-object-rest-spread": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
-      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
-      "dev": true,
+      "integrity": "sha512-ocgA9VJvyxwt+qJB0ncxV8kb/CjfTcECUY4tQ5VT7nP6Aohzobm8CDFaQ5FHdvZQzLmf0sgDxB8iRXZXxwZcyA==",
       "requires": {
         "babel-plugin-syntax-object-rest-spread": "^6.8.0",
         "babel-runtime": "^6.26.0"
@@ -4180,8 +4111,7 @@
     "babel-plugin-transform-react-constant-elements": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.23.0.tgz",
-      "integrity": "sha1-LxGb9NLN1F65uqrldAU8YE9hR90=",
-      "dev": true,
+      "integrity": "sha512-22TG15ONh0FWXj98Y5KOpMmEfDIMJa66rg58LzxssT0LUEFN8utkM1NmBEBx1WKkJFa6spK9aR4yLbDQntPxhg==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4189,8 +4119,7 @@
     "babel-plugin-transform-react-display-name": {
       "version": "6.25.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz",
-      "integrity": "sha1-Z+K/Hx6ck6sI25Z5LgU5K/LMKNE=",
-      "dev": true,
+      "integrity": "sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4198,8 +4127,7 @@
     "babel-plugin-transform-react-jsx": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz",
-      "integrity": "sha1-hAoCjn30YN/DotKfDA2R9jduZqM=",
-      "dev": true,
+      "integrity": "sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==",
       "requires": {
         "babel-helper-builder-react-jsx": "^6.24.1",
         "babel-plugin-syntax-jsx": "^6.8.0",
@@ -4209,8 +4137,7 @@
     "babel-plugin-transform-react-jsx-self": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz",
-      "integrity": "sha1-322AqdomEqEh5t3XVYvL7PBuY24=",
-      "dev": true,
+      "integrity": "sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==",
       "requires": {
         "babel-plugin-syntax-jsx": "^6.8.0",
         "babel-runtime": "^6.22.0"
@@ -4219,8 +4146,7 @@
     "babel-plugin-transform-react-jsx-source": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz",
-      "integrity": "sha1-ZqwSFT9c0tF7PBkmj0vwGX9E7NY=",
-      "dev": true,
+      "integrity": "sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==",
       "requires": {
         "babel-plugin-syntax-jsx": "^6.8.0",
         "babel-runtime": "^6.22.0"
@@ -4229,8 +4155,7 @@
     "babel-plugin-transform-regenerator": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",
-      "integrity": "sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=",
-      "dev": true,
+      "integrity": "sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==",
       "requires": {
         "regenerator-transform": "^0.10.0"
       }
@@ -4238,8 +4163,7 @@
     "babel-plugin-transform-runtime": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz",
-      "integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=",
-      "dev": true,
+      "integrity": "sha512-cpGMVC1vt/772y3jx1gwSaTitQVZuFDlllgreMsZ+rTYC6jlYXRyf5FQOgSnckOiA5QmzbXTyBY2A5AmZXF1fA==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4247,8 +4171,7 @@
     "babel-plugin-transform-strict-mode": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",
-      "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=",
-      "dev": true,
+      "integrity": "sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==",
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-types": "^6.24.1"
@@ -4295,8 +4218,7 @@
     "babel-preset-flow": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz",
-      "integrity": "sha1-5xIYiHCFrpoktb5Baa/7WZgWxJ0=",
-      "dev": true,
+      "integrity": "sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==",
       "requires": {
         "babel-plugin-transform-flow-strip-types": "^6.22.0"
       }
@@ -4304,8 +4226,7 @@
     "babel-preset-jest": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz",
-      "integrity": "sha1-jsegOhOPABoaj7HoETZSvxpV2kY=",
-      "dev": true,
+      "integrity": "sha512-AdfWwc0PYvDtwr009yyVNh72Ev68os7SsPmOFVX7zSA+STXuk5CV2iMVazZU01bEoHCSwTkgv4E4HOOcODPkPg==",
       "requires": {
         "babel-plugin-jest-hoist": "^23.2.0",
         "babel-plugin-syntax-object-rest-spread": "^6.13.0"
@@ -4314,8 +4235,7 @@
     "babel-preset-react": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-preset-react/-/babel-preset-react-6.24.1.tgz",
-      "integrity": "sha1-umnfrqRfw+xjm2pOzqbhdwLJE4A=",
-      "dev": true,
+      "integrity": "sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==",
       "requires": {
         "babel-plugin-syntax-jsx": "^6.3.13",
         "babel-plugin-transform-react-display-name": "^6.23.0",
@@ -4349,8 +4269,7 @@
     "babel-register": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
-      "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=",
-      "dev": true,
+      "integrity": "sha512-veliHlHX06wjaeY8xNITbveXSiI+ASFnOqvne/LaIJIqOWi2Ogmj91KOugEz/hoh/fwMhXNBJPCv8Xaz5CyM4A==",
       "requires": {
         "babel-core": "^6.26.0",
         "babel-runtime": "^6.26.0",
@@ -4364,7 +4283,7 @@
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -4373,8 +4292,7 @@
     "babel-template": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
-      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
-      "dev": true,
+      "integrity": "sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==",
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-traverse": "^6.26.0",
@@ -4386,8 +4304,7 @@
     "babel-traverse": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
-      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
-      "dev": true,
+      "integrity": "sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==",
       "requires": {
         "babel-code-frame": "^6.26.0",
         "babel-messages": "^6.23.0",
@@ -4403,8 +4320,7 @@
     "babel-types": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
-      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
-      "dev": true,
+      "integrity": "sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==",
       "requires": {
         "babel-runtime": "^6.26.0",
         "esutils": "^2.0.2",
@@ -4440,7 +4356,7 @@
         "define-property": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
           "requires": {
             "is-descriptor": "^1.0.0"
           }
@@ -4474,7 +4390,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "kind-of": {
           "version": "6.0.2",
@@ -4491,8 +4407,7 @@
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
-      "dev": true
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
     },
     "bcrypt-pbkdf": {
       "version": "1.0.1",
@@ -4634,8 +4549,7 @@
     "bonjour": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
-      "dev": true,
+      "integrity": "sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==",
       "requires": {
         "array-flatten": "^2.1.0",
         "deep-equal": "^1.0.1",
@@ -4648,7 +4562,7 @@
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
     "bootstrap": {
       "version": "3.4.1",
@@ -4673,7 +4587,7 @@
     "bootstrap-select": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/bootstrap-select/-/bootstrap-select-1.12.2.tgz",
-      "integrity": "sha1-WNCVs/1YSzFEOGb745tv3U5OEqQ=",
+      "integrity": "sha512-Fj1VstB55LigEEYQb6ZOi/ok+uaqnslRxS8Qo9Q+F46WWDhhXAeNpjBhjEMlxQjPs9yqYZf2hf/mxVRWab8sow==",
       "optional": true,
       "requires": {
         "jquery": ">=1.8"
@@ -4682,7 +4596,7 @@
     "bootstrap-slider": {
       "version": "9.10.0",
       "resolved": "https://registry.npmjs.org/bootstrap-slider/-/bootstrap-slider-9.10.0.tgz",
-      "integrity": "sha1-EQPWvADPv6jPyaJZmrUYxVZD2j8=",
+      "integrity": "sha512-a9MtENtt4r3ttPW5mpIpOFmCaIsm37EGukOgw5cfHlxKvsUSN8AN9JtwKrKuqgEnxs86kUSsMvMn8kqewMorKw==",
       "optional": true
     },
     "bootstrap-slider-without-jquery": {
@@ -4693,13 +4607,13 @@
     "bootstrap-switch": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz",
-      "integrity": "sha1-cOCusqh3wNx2aZHeEI4hcPwpov8=",
+      "integrity": "sha512-7YQo+Ir6gCUqC36FFp1Zvec5dRF/+obq+1drMtdIMi9Xc84Kx63Evi0kdcp4HfiGsZpiz6IskyYDNlSKcxsL7w==",
       "optional": true
     },
     "bootstrap-touchspin": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/bootstrap-touchspin/-/bootstrap-touchspin-3.1.1.tgz",
-      "integrity": "sha1-l3nerHKq9Xfl52K4USx0fIcdlZc=",
+      "integrity": "sha512-o5pgzdr8Ma5hQKS3JE1uNq/jkx8qCG+KhJXSlvYCmX2wTxva2sS2Kq3idGN+tP5e1bZJQgkbqwP9TdEEx+R+6Q==",
       "optional": true
     },
     "boxen": {
@@ -4733,13 +4647,18 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
         }
       }
     },
+    "brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4752,8 +4671,7 @@
     "braces": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
-      "dev": true,
+      "integrity": "sha512-xU7bpz2ytJl1bH9cgIurjpg/n8Gohy9GTw81heDYLJQ4RU60dlyJsa+atVF2pI0yMMvKxI9HkKwjePCj5XI1hw==",
       "requires": {
         "expand-range": "^1.8.1",
         "preserve": "^0.2.0",
@@ -4763,13 +4681,12 @@
     "breakjs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/breakjs/-/breakjs-1.0.0.tgz",
-      "integrity": "sha1-7INToGhi60OWLergkHLuZqTNhFk="
+      "integrity": "sha512-2MFpsQUJAx8qkBH8zMMLMp7xgLewVZuThAyJ+ccALUw6+7ymAZT57hlEdTqYRrnJ4y+v7ZxGkoSGD/qOMNsP3Q=="
     },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
-      "dev": true
+      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w=="
     },
     "browser-process-hrtime": {
       "version": "0.1.2",
@@ -4789,8 +4706,7 @@
         "resolve": {
           "version": "1.1.7",
           "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
-          "dev": true
+          "integrity": "sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg=="
         }
       }
     },
@@ -4960,8 +4876,7 @@
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
-      "dev": true
+      "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
     },
     "builtin-modules": {
       "version": "1.1.1",
@@ -4971,14 +4886,12 @@
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
-      "dev": true
+      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ=="
     },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-      "dev": true
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
     },
     "c3": {
       "version": "0.4.22",
@@ -5082,7 +4995,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         }
       }
     },
@@ -5105,7 +5018,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
       "integrity": "sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==",
-      "dev": true,
       "requires": {
         "callsites": "^2.0.0"
       },
@@ -5113,15 +5025,14 @@
         "callsites": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==",
-          "dev": true
+          "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ=="
         }
       }
     },
     "caller-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
-      "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
+      "integrity": "sha512-UJiE1otjXPF5/x+T3zTnSFiTOEmJoGTD9HmBoxnCUwho61a2eSNn/VwtwuIBDAo2SEOv1AJ7ARI5gCmohFLu/g==",
       "requires": {
         "callsites": "^0.2.0"
       }
@@ -5129,12 +5040,12 @@
     "callsites": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
-      "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo="
+      "integrity": "sha512-Zv4Dns9IbXXmPkgRRUjAaJQgfN4xX5p6+RQFhWUqscdvvK2xK/ZL8b3IXIJsj+4sD+f24NwnWy2BY8AJ82JB0A=="
     },
     "camel-case": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
-      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+      "integrity": "sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==",
       "requires": {
         "no-case": "^2.2.0",
         "upper-case": "^1.1.1"
@@ -5143,12 +5054,12 @@
     "camelcase": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-      "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+      "integrity": "sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw=="
     },
     "camelcase-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "integrity": "sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==",
       "requires": {
         "camelcase": "^2.0.0",
         "map-obj": "^1.0.0"
@@ -5157,7 +5068,7 @@
         "camelcase": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+          "integrity": "sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw=="
         }
       }
     },
@@ -5175,8 +5086,7 @@
     "capture-exit": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-1.2.0.tgz",
-      "integrity": "sha1-HF/MSJ/QqwDU8ax64QcuMXP7q28=",
-      "dev": true,
+      "integrity": "sha512-IS4lTgp57lUcpXzyCaiUQcRZBxZAkzl+jNXrMUXZjdnr2yujpKUMG9OYeYL29i6fL66ihypvVJ/MeX0B+9pWOg==",
       "requires": {
         "rsvp": "^3.3.3"
       }
@@ -5189,14 +5099,28 @@
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz",
-      "integrity": "sha1-PSnO2MHxJL9vU4Rvs/WJRzH9yQk=",
-      "dev": true
+      "integrity": "sha512-Zg7Z9IuE0T+Ilg+o0IVpZXHAcN6VHO80BVxak3RIB1pmcbiITr06WlZ45Xa/KGQ7fQ/ar6C1KEkeI93tojBJPQ=="
     },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+    },
+    "cfb": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-0.12.1.tgz",
+      "integrity": "sha512-cP+4A0tTqtyza5gJwNwDetZ8FPjl0gPLE7mIxGKyUzOS6HkM23WaAWW/l3t7jIQSMqVXroa09Ey0lo7gV8LNxw==",
+      "requires": {
+        "commander": "~2.11.0",
+        "printj": "~1.1.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+          "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
+        }
+      }
     },
     "chalk": {
       "version": "2.3.2",
@@ -5221,17 +5145,17 @@
     "change-emitter": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
-      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+      "integrity": "sha512-YXzt1cQ4a2jqazhcuSWEOc1K2q8g9H6eWNsyZgi640LDzRWVQ2eDe+Y/kVdftH+vYdPF2rgDb3dLdpxE1jvAxw=="
     },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
-      "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
+      "integrity": "sha512-j/Toj7f1z98Hh2cYo2BVr85EpIRWqUi7rtRSGxh/cqUjqrnJe9l9UE7IUGd2vQ2p+kSHLkSzObQPZPLUC6TQwg=="
     },
     "charenc": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
     },
     "cheerio": {
       "version": "1.0.0-rc.10",
@@ -5573,7 +5497,7 @@
         "define-property": {
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -5581,7 +5505,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         }
       }
     },
@@ -5608,12 +5532,12 @@
     "cli-boxes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
-      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM="
+      "integrity": "sha512-3Fo5wu8Ytle8q9iCzS4D2MWVL2X7JVWRiS1BnXbTFDhS9c/REkM9vd1AmabsoZoY5/dGi5TT9iKL8Kb6DeBRQg=="
     },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-      "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+      "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==",
       "requires": {
         "restore-cursor": "^2.0.0"
       }
@@ -5659,14 +5583,18 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
         }
       }
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+    },
     "clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -5687,22 +5615,39 @@
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ=="
     },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+      "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA=="
     },
     "codemirror": {
       "version": "5.64.0",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.64.0.tgz",
       "integrity": "sha512-fqr6CtDQdJ6iNMbD8NX2gH2G876nNDk+TO1rrYkgWnqQdO3O1Xa9tK6q+psqhJJgE5SpbaDcgdfLmukoUVE8pg=="
     },
+    "codepage": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.10.2.tgz",
+      "integrity": "sha512-JzhJ7nYua7rMcJ6I4Cw4h1w7aN/1f5qAQb//QSAaTjTVjEEZ1mBicBWTPLf6RiaBn4dpbEFwqGBoEekOHx9K2Q==",
+      "requires": {
+        "commander": "~2.11.0",
+        "exit-on-epipe": "~1.0.1",
+        "voc": "~1.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+          "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
+        }
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "integrity": "sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==",
       "requires": {
         "map-visit": "^1.0.0",
         "object-visit": "^1.0.0"
@@ -5717,9 +5662,9 @@
       }
     },
     "color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "combined-stream": {
       "version": "1.0.6",
@@ -5752,8 +5697,7 @@
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
-      "dev": true
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
     },
     "component-emitter": {
       "version": "1.2.1",
@@ -5808,7 +5752,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "concat-stream": {
       "version": "1.6.0",
@@ -5848,8 +5792,7 @@
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
-      "dev": true
+      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ=="
     },
     "content-disposition": {
       "version": "0.5.3",
@@ -5889,8 +5832,7 @@
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-      "dev": true
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
     "copy-concurrently": {
       "version": "1.0.5",
@@ -5909,7 +5851,15 @@
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+      "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw=="
+    },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
     },
     "core-js": {
       "version": "2.6.9",
@@ -5925,7 +5875,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
     },
     "cosmiconfig": {
       "version": "2.2.2",
@@ -5948,6 +5898,15 @@
         }
       }
     },
+    "crc-32": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.1.1.tgz",
+      "integrity": "sha512-DWXuRN3Wtu43YRfYZ9r17720WZqM0caEjIfT6Dk1J/3sAxIyyXbUWqIACbz3cjV8l7guJRW+9pZlYMluKJ69wg==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -5969,7 +5928,7 @@
     "create-error-class": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
-      "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=",
+      "integrity": "sha512-gYTKKexFO3kh200H1Nit76sRwRtOY32vQd3jpAQKpLtZqyNsSQNfI4N7o3eP2wUjV35pTWKRYqFUDBvUha/Pkw==",
       "requires": {
         "capture-stack-trace": "^1.0.0"
       }
@@ -6028,7 +5987,7 @@
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+      "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
       "requires": {
         "lru-cache": "^4.0.1",
         "shebang-command": "^1.2.0",
@@ -6038,7 +5997,7 @@
     "crypt": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="
     },
     "crypto-browserify": {
       "version": "3.12.0",
@@ -6062,7 +6021,7 @@
     "crypto-random-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
-      "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
+      "integrity": "sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg=="
     },
     "css": {
       "version": "3.0.0",
@@ -6102,7 +6061,7 @@
     "css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
     },
     "css-element-queries": {
       "version": "1.0.2",
@@ -6193,7 +6152,7 @@
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
     "cssesc": {
@@ -6201,6 +6160,12 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
       "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
     },
+    "cssfontparser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
+      "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
+      "dev": true
+    },
     "cssom": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz",
@@ -6224,7 +6189,7 @@
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "integrity": "sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==",
       "requires": {
         "array-find-index": "^1.0.1"
       }
@@ -6247,7 +6212,7 @@
     "d3": {
       "version": "3.5.17",
       "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
-      "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
+      "integrity": "sha512-yFk/2idb8OHPKkbAL8QaOaqENNoMhIaSHZerk3oQsECwkObkCpJyjYwCe+OHiq6UEdhe1m8ZGARRRO3ljFjlKg=="
     },
     "damerau-levenshtein": {
       "version": "1.0.7",
@@ -6258,8 +6223,7 @@
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -6307,7 +6271,7 @@
     "datatables.net-colreorder-bs": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/datatables.net-colreorder-bs/-/datatables.net-colreorder-bs-1.3.3.tgz",
-      "integrity": "sha1-Op3LCN7r612FQHlZHgbkk615OlM=",
+      "integrity": "sha512-+DPim/DhbSIqr2rhRvYNrAMFNZgl372PiKEAv5YeyjYMzc8+6kX8Vinpb3Bg0PDgEdPqEWqJ6H18pBCKhXppgg==",
       "optional": true,
       "requires": {
         "datatables.net-bs": ">=1.10.9",
@@ -6336,7 +6300,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
     },
     "decimal.js": {
       "version": "10.3.1",
@@ -6347,7 +6311,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
     },
     "deep-equal": {
       "version": "1.1.0",
@@ -6374,7 +6338,7 @@
     "deep-equal-ident": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal-ident/-/deep-equal-ident-1.1.1.tgz",
-      "integrity": "sha1-BvS4nlNxDNbOpKd4HHqVZkLejck=",
+      "integrity": "sha512-aWv7VhTl/Lju1zenOD3E1w8PpUVrTDbwXCHtbSNr+p/uadr49Y1P1ld0W3Pl6gbvIbiRjoCVsqw70UupCNGh6g==",
       "dev": true,
       "requires": {
         "lodash.isequal": "^3.0"
@@ -6447,8 +6411,7 @@
     "default-require-extensions": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
-      "integrity": "sha1-836hXT4T/9m0N9M+GnW1+5eHTLg=",
-      "dev": true,
+      "integrity": "sha512-Dn2eAftOqXhNXs5f/Xjn7QTZ6kDYkx7u0EXQInN1oyYwsZysu11q7oTtaKcbzLxZRJiDHa8VmwpWmb4lY5FqgA==",
       "requires": {
         "strip-bom": "^2.0.0"
       }
@@ -6517,7 +6480,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "kind-of": {
           "version": "6.0.3",
@@ -6529,7 +6492,7 @@
     "del": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz",
-      "integrity": "sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=",
+      "integrity": "sha512-7yjqSoVSlJzA4t/VUwazuEagGeANEKB3f/aNI//06pfKgwoCb7f6Q1gETN1sZzYaj6chTQ0AhIwDiPdfOjko4A==",
       "requires": {
         "globby": "^6.1.0",
         "is-path-cwd": "^1.0.0",
@@ -6542,7 +6505,7 @@
         "globby": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
           "requires": {
             "array-union": "^1.0.1",
             "glob": "^7.0.3",
@@ -6554,22 +6517,27 @@
             "pify": {
               "version": "2.3.0",
               "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-              "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+              "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
             }
           }
         },
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg=="
         }
       }
     },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -6596,14 +6564,13 @@
     "detect-file": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
-      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
+      "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
       "dev": true
     },
     "detect-indent": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
-      "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
-      "dev": true,
+      "integrity": "sha512-BDKtmHlOzwI7iRuEkhzsnPoi5ypEhWAJB5RvHWe1kMr06js3uK5B3734i3ui5Yd+wOJV1cpE4JnivPD283GU/A==",
       "requires": {
         "repeating": "^2.0.0"
       }
@@ -6611,8 +6578,7 @@
     "detect-newline": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
-      "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=",
-      "dev": true
+      "integrity": "sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg=="
     },
     "detect-node": {
       "version": "2.0.4",
@@ -6692,8 +6658,7 @@
     "discontinuous-range": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
-      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
-      "dev": true
+      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ=="
     },
     "dnd-core": {
       "version": "9.5.1",
@@ -6739,8 +6704,7 @@
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=",
-      "dev": true
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg=="
     },
     "dns-packet": {
       "version": "1.3.4",
@@ -6755,8 +6719,7 @@
     "dns-txt": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
-      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
-      "dev": true,
+      "integrity": "sha512-Ix5PrWjphuSoUXV/Zv5gaFHjnaJtb02F2+Si3Ht9dyJ87+Z/lMmy+dpNHtTGraNK958ndXq2i+GLkWsWHcKaBQ==",
       "requires": {
         "buffer-indexof": "^1.0.0"
       }
@@ -6764,7 +6727,7 @@
     "docopt": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/docopt/-/docopt-0.6.2.tgz",
-      "integrity": "sha1-so6eIiDaXsSffqW7JKR3h0Be6xE=",
+      "integrity": "sha512-NqTbaYeE4gA/wU1hdKFdU+AFahpDOpgGLzHP42k6H6DKExJd0A55KEVWYhL9FEmHmgeLvEU2vuKXDuU+4yToOw==",
       "dev": true
     },
     "doctrine": {
@@ -6793,7 +6756,7 @@
     "dom-urls": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/dom-urls/-/dom-urls-1.1.0.tgz",
-      "integrity": "sha1-AB3fgWKM0ecGElxxdvU8zsVdkY4=",
+      "integrity": "sha512-LNxCeExaNbczqMVfQUyLdd+r+smG7ixIa+doeyiJ7nTmL8aZRrJhHkEYBEYVGvYv7k2DOEBh2eKthoCmWpfICg==",
       "requires": {
         "urijs": "^1.16.1"
       }
@@ -6829,12 +6792,12 @@
     "dotenv-expand": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-4.2.0.tgz",
-      "integrity": "sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU="
+      "integrity": "sha512-pHWVt6L/YkqbBCMb1hG6e7oO0WdMhlapDIibl+BZ9PncVE3i+G77uvNr8GUxW2ItSituOK8QOYC9oOJjwWD94A=="
     },
     "drmonty-datatables-colvis": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/drmonty-datatables-colvis/-/drmonty-datatables-colvis-1.1.2.tgz",
-      "integrity": "sha1-lque37SGQ8wu3aP4e4iTPN7oEnw=",
+      "integrity": "sha512-1kL4fbsBEkQQTl83eQ8G/vRGcCiM6Hn3O8Tp473tG4YSsBDcxETDDSxb8qC+fQjHZ3jUCptWj3lG/L8rI6NBNw==",
       "optional": true,
       "requires": {
         "jquery": ">=1.7.0"
@@ -6886,8 +6849,7 @@
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
-      "dev": true
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "ejs": {
       "version": "2.7.4",
@@ -6939,13 +6901,12 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
+      "integrity": "sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng=="
     },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
-      "dev": true
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
     "encoding": {
       "version": "0.1.12",
@@ -7041,8 +7002,7 @@
         "lodash.isequal": {
           "version": "4.5.0",
           "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-          "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
-          "dev": true
+          "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
         },
         "object-is": {
           "version": "1.1.4",
@@ -7153,6 +7113,11 @@
         "deep-equal-ident": "^1.1.1"
       }
     },
+    "enzyme-redux": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/enzyme-redux/-/enzyme-redux-0.1.7.tgz",
+      "integrity": "sha512-8TNJjmn2/mp3TLoj3eTZN347dedcRgp/ksW1A3xm34wBOsLSdOIQnRPeUjw3zK7gjCob8EyOcjhR6A8mUKihbA=="
+    },
     "enzyme-shallow-equal": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz",
@@ -7287,7 +7252,7 @@
     "es6-iterator": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
       "requires": {
         "d": "1",
         "es5-ext": "^0.10.35",
@@ -7297,7 +7262,7 @@
     "es6-map": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
-      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
+      "integrity": "sha512-mz3UqCh0uPCIqsw1SSAkB/p0rOzF/M0V++vyN7JqlPtSW/VsYgQBvVvqMLmfBuyMzTpLnNqi6JmcSizs4jy19A==",
       "requires": {
         "d": "1",
         "es5-ext": "~0.10.14",
@@ -7364,13 +7329,12 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-      "dev": true
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
     },
     "escodegen": {
       "version": "1.9.1",
@@ -7388,7 +7352,7 @@
     "escope": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/escope/-/escope-3.6.0.tgz",
-      "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=",
+      "integrity": "sha512-75IUQsusDdalQEW/G/2esa87J7raqdJF+Ca0/Xm5C3Q58Nr4yVYjZGp/P1+2xiEVgXRrA39dpRb8LcshajbqDQ==",
       "requires": {
         "es6-map": "^0.1.3",
         "es6-weak-map": "^2.0.1",
@@ -7445,8 +7409,7 @@
         "ajv": {
           "version": "5.5.2",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-          "dev": true,
+          "integrity": "sha512-Ajr4IcMXq/2QmMkEmSvxqfLN5zGmJ92gHXAeOXq1OekoH2rfDNsgdDoL2f7QaRCy7G/E6TpxBVdRuNraMztGHw==",
           "requires": {
             "co": "^4.6.0",
             "fast-deep-equal": "^1.0.0",
@@ -7482,8 +7445,7 @@
         "fast-deep-equal": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
-          "dev": true
+          "integrity": "sha512-fueX787WZKCV0Is4/T2cyAdM4+x1S3MXXOAhavE1ys/W42SHAPacLTQhucja22QBYrfGw50M2sRiXPtTGv9Ymw=="
         },
         "globals": {
           "version": "11.12.0",
@@ -7494,8 +7456,7 @@
         "json-schema-traverse": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
-          "dev": true
+          "integrity": "sha512-4JD/Ivzg7PoW8NzdrBSr3UFwC9mHgvI7Z6z3QGBsSHgKaRTUDmyZAAKJo2UbG1kUVfS9WS8bi36N49U1xw43DA=="
         },
         "ms": {
           "version": "2.1.2",
@@ -7512,8 +7473,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -7736,8 +7696,7 @@
         "is-extglob": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-          "dev": true
+          "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
         },
         "is-glob": {
           "version": "4.0.3",
@@ -8124,8 +8083,7 @@
     "eslint-restricted-globals": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz",
-      "integrity": "sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=",
-      "dev": true
+      "integrity": "sha512-d1cerYC0nOJbObxUe1kR8MZ25RLt7IHzR9d+IOupoMqFU03tYjo7Stjqj04uHx1xx7HKSE9/NjdeBiP4/jUP8Q=="
     },
     "eslint-scope": {
       "version": "4.0.3",
@@ -8178,23 +8136,22 @@
     "estraverse": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
-      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
+      "integrity": "sha512-VHvyaGnJy+FuGfcfaM7W7OZw4mQiKW73jPHwQXx2VnMSUBajYmytOT5sKEfsBvNPtGX6YDwcrGDz2eocoHg0JA=="
     },
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+      "integrity": "sha512-UUPPULqkyAV+M3Shodis7l8D+IyX6V8SbaBnTb449jf3fMTd8+UOZI1Q70NbZVOQkcR91yYgdHsJiMMMVmYshg=="
     },
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
-      "dev": true
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
     "event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
-      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
       "requires": {
         "d": "1",
         "es5-ext": "~0.10.14"
@@ -8215,7 +8172,7 @@
     "eventsource": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
-      "integrity": "sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=",
+      "integrity": "sha512-bbB5tEuvC+SuRUG64X8ghvjgiRniuA4WlehWbFnoN4z6TxDXpyX+BMHF7rMgZAqoe+EbyNRUbHN0uuP9phy5jQ==",
       "requires": {
         "original": ">=0.0.5"
       }
@@ -8256,19 +8213,22 @@
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
-      "dev": true
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ=="
     },
     "exit-hook": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
-      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g="
+      "integrity": "sha512-MsG3prOVw1WtLXAZbM3KiYtooKR1LvxHh3VHsVtIy0uiUu8usxgB/94DP2HxtD/661lLdB6yzQ09lGJSQr6nkg=="
+    },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
     },
     "expand-brackets": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
-      "dev": true,
+      "integrity": "sha512-hxx03P2dJxss6ceIeri9cmYOT4SRs3Zk3afZwWpOsRqLqprhTR8u++SlC+sFGsQr7WGFPdMF7Gjc1njDLDK6UA==",
       "requires": {
         "is-posix-bracket": "^0.1.0"
       }
@@ -8276,8 +8236,7 @@
     "expand-range": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
-      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
-      "dev": true,
+      "integrity": "sha512-AFASGfIlnIbkKPQwX1yHaDjFvh/1gyKJODme52V6IORh69uEYgZp0o9C+qsIGNVEiuuhQU0CSSl++Rlegg1qvA==",
       "requires": {
         "fill-range": "^2.1.0"
       }
@@ -8285,7 +8244,7 @@
     "expand-tilde": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
       "requires": {
         "homedir-polyfill": "^1.0.1"
       }
@@ -8380,7 +8339,7 @@
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
       "requires": {
         "assign-symbols": "^1.0.0",
         "is-extendable": "^1.0.1"
@@ -8409,8 +8368,7 @@
     "extglob": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-      "dev": true,
+      "integrity": "sha512-1FOj1LOwn42TMrruOHGt18HemVnbwAmAak7krWk+wa93KXxGbK+2jpezm+ytJYDaBX0/SPLZFHKM7m+tKobWGg==",
       "requires": {
         "is-extglob": "^1.0.0"
       }
@@ -8418,13 +8376,17 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
     },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+      "integrity": "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w=="
+    },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
     },
     "fast-glob": {
       "version": "2.2.2",
@@ -8724,12 +8686,12 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
+      "integrity": "sha512-eIgZvM9C3P05kg0qxfqaVU6Tma4QedCPIByQOcemV0vju8ot3cS2DpHi4m2G2JvbSMI152rjfLX0p1pkSdyPlQ=="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
     "fastparse": {
       "version": "1.1.2",
@@ -8791,7 +8753,7 @@
     "figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-      "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+      "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
       "requires": {
         "escape-string-regexp": "^1.0.5"
       }
@@ -8799,8 +8761,7 @@
     "file-entry-cache": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz",
-      "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=",
-      "dev": true,
+      "integrity": "sha512-uXP/zGzxxFvFfcZGgBIwotm+Tdc55ddPAzF7iHshP4YGaXMww7rSF9peD9D1sui5ebONg5UobsZv+FfgEpGv/w==",
       "requires": {
         "flat-cache": "^1.2.1",
         "object-assign": "^4.0.1"
@@ -8851,14 +8812,12 @@
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
+      "integrity": "sha512-BTCqyBaWBTsauvnHiE8i562+EdJj+oUpkqWp2R1iCoR8f6oo8STRu3of7WJJ0TqWtxN50a5YFpzYK4Jj9esYfQ=="
     },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
-      "integrity": "sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=",
-      "dev": true,
+      "integrity": "sha512-UxowFKnAFIwtmSxgKjWAVgjE3Fk7MQJT0ZIyl0NwIFZTrx4913rLaonGJ84V+x/2+w/pe4ULHRns+GZPs1TVuw==",
       "requires": {
         "glob": "^7.0.3",
         "minimatch": "^3.0.3"
@@ -8987,7 +8946,7 @@
     "find-file-up": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-1.0.2.tgz",
-      "integrity": "sha1-TVNmS8Eoz3k5AUl/SxNVjZeXVco=",
+      "integrity": "sha512-spzIszRVDalArjm9/ZVRK1q9YW6WdX92RUIni/VqmhUqSvTkq6H+TgCarqvaJHOVt5fLpeIKJgb0L0pbCK2/9g==",
       "requires": {
         "resolve-dir": "^1.0.0"
       }
@@ -8995,7 +8954,7 @@
     "find-pkg": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-1.0.0.tgz",
-      "integrity": "sha1-ltskLgAcfFUCXTIhMwLqOrpncXc=",
+      "integrity": "sha512-mz/zt+x9A/DPzP9zuOQhpe5C9jjH0vpFphUv1itUHmCuiObPF+C8Ngk9j36EhmUB/p8Y9jgjKndA9wy3eE9JkA==",
       "requires": {
         "find-file-up": "^1.0.2"
       }
@@ -9019,7 +8978,7 @@
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==",
       "requires": {
         "locate-path": "^2.0.0"
       }
@@ -9039,13 +8998,13 @@
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+          "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
           "dev": true
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+          "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==",
           "dev": true
         },
         "braces": {
@@ -9069,7 +9028,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
@@ -9080,7 +9039,7 @@
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
           "dev": true,
           "requires": {
             "debug": "^2.3.3",
@@ -9095,7 +9054,7 @@
             "define-property": {
               "version": "0.2.5",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
               "dev": true,
               "requires": {
                 "is-descriptor": "^0.1.0"
@@ -9104,7 +9063,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
@@ -9113,7 +9072,7 @@
             "is-accessor-descriptor": {
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
               "dev": true,
               "requires": {
                 "kind-of": "^3.0.2"
@@ -9122,7 +9081,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "dev": true,
                   "requires": {
                     "is-buffer": "^1.1.5"
@@ -9133,7 +9092,7 @@
             "is-data-descriptor": {
               "version": "0.1.4",
               "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
               "dev": true,
               "requires": {
                 "kind-of": "^3.0.2"
@@ -9142,7 +9101,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "dev": true,
                   "requires": {
                     "is-buffer": "^1.1.5"
@@ -9188,7 +9147,7 @@
             "define-property": {
               "version": "1.0.0",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
               "dev": true,
               "requires": {
                 "is-descriptor": "^1.0.0"
@@ -9197,7 +9156,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
@@ -9208,7 +9167,7 @@
         "fill-range": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
           "dev": true,
           "requires": {
             "extend-shallow": "^2.0.1",
@@ -9220,7 +9179,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
@@ -9260,7 +9219,7 @@
         "is-extglob": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
           "dev": true
         },
         "is-glob": {
@@ -9275,7 +9234,7 @@
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
           "dev": true,
           "requires": {
             "kind-of": "^3.0.2"
@@ -9284,7 +9243,7 @@
             "kind-of": {
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
               "dev": true,
               "requires": {
                 "is-buffer": "^1.1.5"
@@ -9295,7 +9254,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
           "dev": true
         },
         "kind-of": {
@@ -9425,24 +9384,23 @@
     "font-awesome": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg=="
     },
     "font-awesome-sass": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/font-awesome-sass/-/font-awesome-sass-4.7.0.tgz",
-      "integrity": "sha1-TtppPpFQCc4Asijglk3F7Km8NOE=",
+      "integrity": "sha512-apO2Nw3XP/Zv7fLxa+MnPnvJ/GdkH6qWrLrtN5oQrFL7RPprzHKROjN94jgyoxM+T7PQBhY9F/SwOKbBaLyXxg==",
       "optional": true
     },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ=="
     },
     "for-own": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-      "dev": true,
+      "integrity": "sha512-SKmowqGTJoPzLO1T0BBJpkfp3EMacCMOuH40hOUbrbzElVktk4DioXVM99QkLCyKoiuOmyjgcWMpVz2xjE7LZw==",
       "requires": {
         "for-in": "^1.0.1"
       }
@@ -9455,8 +9413,7 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
     },
     "form-data": {
       "version": "2.3.2",
@@ -9517,7 +9474,7 @@
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==",
       "requires": {
         "map-cache": "^0.2.2"
       }
@@ -9525,14 +9482,12 @@
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
-      "dev": true
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
     },
     "from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
+      "integrity": "sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==",
       "requires": {
         "inherits": "^2.0.1",
         "readable-stream": "^2.0.0"
@@ -9541,7 +9496,7 @@
     "front-matter": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.1.2.tgz",
-      "integrity": "sha1-91mDufL0E75ljJPf172M5AePXNs=",
+      "integrity": "sha512-wH9JJVUi/MUfRpSvYWltdC9FGFZdkcc2H7US7Sp3iYihXTpYWWEL7ZUHMBicA9MsFBR/EatSbYN5EtCaytfiNA==",
       "requires": {
         "js-yaml": "^3.4.6"
       }
@@ -9549,7 +9504,7 @@
     "fs-extra": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
-      "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
+      "integrity": "sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^3.0.0",
@@ -9559,8 +9514,7 @@
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
-      "dev": true,
+      "integrity": "sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "iferr": "^0.1.5",
@@ -9571,7 +9525,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "fsevents": {
       "version": "1.2.13",
@@ -9687,8 +9641,7 @@
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
-      "dev": true
+      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g=="
     },
     "functions-have-names": {
       "version": "1.2.2",
@@ -9707,7 +9660,7 @@
     "generate-object-property": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+      "integrity": "sha512-TuOwZWgJ2VAMEGJvAyPWvpqxSANF0LDpmyHauMjFYzaACvn+QTT/AZomvPCzVBV7yDN3OmwHQ5OvHaeLKre3JQ==",
       "requires": {
         "is-property": "^1.0.0"
       }
@@ -9785,13 +9738,12 @@
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
+      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA=="
     },
     "getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -9812,8 +9764,7 @@
     "glob-base": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
+      "integrity": "sha512-ab1S1g1EbO7YzauaJLkgLp7DZVAqj9M/dvKlTt8DkXA2tiOIcSMrlVI2J1RZyB5iJVccEscjGn+kpOG9788MHA==",
       "requires": {
         "glob-parent": "^2.0.0",
         "is-glob": "^2.0.0"
@@ -9822,8 +9773,7 @@
     "glob-parent": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-      "dev": true,
+      "integrity": "sha512-JDYOvfxio/t42HKdxkAYaCiBN7oYiuxykOxKxdaUW5Qn0zaYN3gRQWolrwdnf0shM9/EP0ebuuTmyoXNr1cC5w==",
       "requires": {
         "is-glob": "^2.0.0"
       }
@@ -9831,12 +9781,12 @@
     "glob-to-regexp": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
-      "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs="
+      "integrity": "sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig=="
     },
     "global-dirs": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
-      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
+      "integrity": "sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==",
       "requires": {
         "ini": "^1.3.4"
       }
@@ -9854,7 +9804,7 @@
     "global-prefix": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
-      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+      "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
       "requires": {
         "expand-tilde": "^2.0.2",
         "homedir-polyfill": "^1.0.1",
@@ -9885,7 +9835,7 @@
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg=="
         }
       }
     },
@@ -9902,7 +9852,7 @@
     "gonzales-pe-sl": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/gonzales-pe-sl/-/gonzales-pe-sl-4.2.3.tgz",
-      "integrity": "sha1-aoaLw4BkXxQf7rBCxvl/zHG1n+Y=",
+      "integrity": "sha512-EdOTnR11W0edkA1xisx4UYtobMSTYj+UNyffW3/b9LziI7RpmHiBIqMs+VL43LrCbiPcLQllCxyzqOB+l5RTdQ==",
       "requires": {
         "minimist": "1.1.x"
       },
@@ -9910,20 +9860,20 @@
         "minimist": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
-          "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag="
+          "integrity": "sha512-2RbeLaM/Hbo9vJ1+iRrxzfDnX9108qb2m923U+s+Ot2eMey0IYGdSjzHmvtg2XsxoCuMnzOMw7qc573RvnLgwg=="
         }
       }
     },
     "google-code-prettify": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/google-code-prettify/-/google-code-prettify-1.0.5.tgz",
-      "integrity": "sha1-n0d/Ik2/piNy5e+AOn4VdBBAAIQ=",
+      "integrity": "sha512-Y47Bw63zJKCuqTuhTZC1ct4e/0ADuMssxXhnrP8QHq71tE2aYBKG6wQwXr8zya0zIUd0mKN3XTlI5AME4qm6NQ==",
       "optional": true
     },
     "got": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
-      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
+      "integrity": "sha512-Y/K3EDuiQN9rTZhBvPRWMLXIKdeD1Rj0nzunfoi0Yyn5WBEbzxXKU9Ub2X41oZBagVWOBU3MuDonFMgPWQFnwg==",
       "requires": {
         "create-error-class": "^3.0.0",
         "duplexer3": "^0.1.4",
@@ -9941,7 +9891,7 @@
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
+      "integrity": "sha512-9x6DLUuW+ROFdMTII9ec9t/FK8va6kYcC8/LggumssLM8kNv7IdFl3VrNUqgir2tJuBVxBga1QBoRziZacO5Zg=="
     },
     "graphql": {
       "version": "16.5.0",
@@ -9952,8 +9902,7 @@
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
-      "dev": true
+      "integrity": "sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw=="
     },
     "gud": {
       "version": "1.0.0",
@@ -9963,7 +9912,7 @@
     "gzip-size": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
-      "integrity": "sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=",
+      "integrity": "sha512-1g6EPVvIHuPmpAdBBpsIVYLgjzGV/QqcFRJXpMyrqEWG10JhOaTjQeCcjMDyX0Iqfm/Q5M9twR/mbDk5f5MqkA==",
       "requires": {
         "duplexer": "^0.1.1",
         "pify": "^3.0.0"
@@ -9972,7 +9921,7 @@
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg=="
         }
       }
     },
@@ -10012,8 +9961,7 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
     },
     "har-validator": {
       "version": "5.1.3",
@@ -10036,7 +9984,7 @@
     "has-ansi": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -10050,7 +9998,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -10078,7 +10026,7 @@
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "integrity": "sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==",
       "requires": {
         "get-value": "^2.0.6",
         "has-values": "^1.0.0",
@@ -10088,14 +10036,14 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         }
       }
     },
     "has-values": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "integrity": "sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==",
       "requires": {
         "is-number": "^3.0.0",
         "kind-of": "^4.0.0"
@@ -10104,7 +10052,7 @@
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -10112,7 +10060,7 @@
             "kind-of": {
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -10122,7 +10070,7 @@
         "kind-of": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "integrity": "sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==",
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -10211,8 +10159,7 @@
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
-      "dev": true,
+      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
       "requires": {
         "hash.js": "^1.0.3",
         "minimalistic-assert": "^1.0.0",
@@ -10227,8 +10174,7 @@
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
-      "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
-      "dev": true,
+      "integrity": "sha512-ycURW7oUxE2sNiPVw1HVEFsW+ecOpJ5zaj7eC0RlwhibhRBod20muUN8qu/gzx956YrLolVvs1MTXwKgC2rVEg==",
       "requires": {
         "os-homedir": "^1.0.0",
         "os-tmpdir": "^1.0.1"
@@ -10250,8 +10196,7 @@
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
-      "dev": true,
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
       "requires": {
         "inherits": "^2.0.1",
         "obuf": "^1.0.0",
@@ -10316,7 +10261,7 @@
     "html-webpack-plugin": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
-      "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
+      "integrity": "sha512-Br4ifmjQojUP4EmHnRBoUIYcZ9J7M4bTMcm7u6xoIAIuq2Nte4TzXX0533owvkQKQD1WeMTTTyD4Ni4QKxS0Bg==",
       "requires": {
         "html-minifier": "^3.2.3",
         "loader-utils": "^0.2.16",
@@ -10330,7 +10275,7 @@
         "loader-utils": {
           "version": "0.2.17",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "integrity": "sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==",
           "requires": {
             "big.js": "^3.1.3",
             "emojis-list": "^2.0.0",
@@ -10343,8 +10288,7 @@
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
-      "dev": true
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
     },
     "http-errors": {
       "version": "1.7.2",
@@ -10418,14 +10362,12 @@
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-          "dev": true
+          "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA=="
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true
+          "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ=="
         },
         "braces": {
           "version": "2.3.2",
@@ -10448,8 +10390,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -10459,8 +10400,7 @@
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-          "dev": true,
+          "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
           "requires": {
             "debug": "^2.3.3",
             "define-property": "^0.2.5",
@@ -10474,8 +10414,7 @@
             "define-property": {
               "version": "0.2.5",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-              "dev": true,
+              "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
               "requires": {
                 "is-descriptor": "^0.1.0"
               }
@@ -10483,8 +10422,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -10492,8 +10430,7 @@
             "is-accessor-descriptor": {
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-              "dev": true,
+              "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -10501,8 +10438,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -10512,8 +10448,7 @@
             "is-data-descriptor": {
               "version": "0.1.4",
               "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-              "dev": true,
+              "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -10521,8 +10456,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -10567,8 +10501,7 @@
             "define-property": {
               "version": "1.0.0",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-              "dev": true,
+              "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
               "requires": {
                 "is-descriptor": "^1.0.0"
               }
@@ -10576,8 +10509,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -10587,8 +10519,7 @@
         "fill-range": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -10599,8 +10530,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -10639,8 +10569,7 @@
         "is-extglob": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-          "dev": true
+          "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
         },
         "is-glob": {
           "version": "4.0.1",
@@ -10654,8 +10583,7 @@
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
+          "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -10663,8 +10591,7 @@
             "kind-of": {
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
+              "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -10674,8 +10601,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "kind-of": {
           "version": "6.0.3",
@@ -10709,8 +10635,7 @@
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
+      "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -10720,8 +10645,7 @@
     "https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
-      "dev": true
+      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg=="
     },
     "https-proxy-agent": {
       "version": "5.0.0",
@@ -10885,7 +10809,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
           "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
-          "dev": true,
           "requires": {
             "error-ex": "^1.3.1",
             "json-parse-better-errors": "^1.0.1"
@@ -10894,8 +10817,7 @@
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
-          "dev": true
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg=="
         },
         "pkg-dir": {
           "version": "3.0.0",
@@ -10910,7 +10832,6 @@
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
           "integrity": "sha512-+UBirHHDm5J+3WDmLBZYSklRYg82nMlz+enn+GMZ22nSR2f4bzxmhso6rzQW/3mT2PVzpzDTiYIZahk8UmZ44w==",
-          "dev": true,
           "requires": {
             "normalize-package-data": "^2.3.2",
             "parse-json": "^4.0.0",
@@ -10933,12 +10854,12 @@
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
+      "integrity": "sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg=="
     },
     "icss-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
-      "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
+      "integrity": "sha512-bsVoyn/1V4R1kYYjLcWLedozAM4FClZUdjE9nIr8uWY7xs78y9DATgwz2wGU7M+7z55KenmmTkN2DVJ7bqzjAA==",
       "requires": {
         "postcss": "^6.0.1"
       }
@@ -10952,8 +10873,7 @@
     "iferr": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
-      "dev": true
+      "integrity": "sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA=="
     },
     "ignore": {
       "version": "3.3.7",
@@ -10969,7 +10889,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
       "integrity": "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==",
-      "dev": true,
       "requires": {
         "caller-path": "^2.0.0",
         "resolve-from": "^3.0.0"
@@ -10979,7 +10898,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
           "integrity": "sha512-MCL3sf6nCSXOwCTzvPKhN18TU7AHTvdtam8DAogxcrJ8Rjfbbg7Lgng64H9Iy+vUV6VGFClN/TyxBkAebLRR4A==",
-          "dev": true,
           "requires": {
             "caller-callsite": "^2.0.0"
           }
@@ -10987,15 +10905,14 @@
         "resolve-from": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
-          "dev": true
+          "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw=="
         }
       }
     },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
-      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
+      "integrity": "sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A=="
     },
     "import-local": {
       "version": "1.0.0",
@@ -11010,12 +10927,12 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
     },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "integrity": "sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==",
       "requires": {
         "repeating": "^2.0.0"
       }
@@ -11029,7 +10946,7 @@
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -11038,7 +10955,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
     },
     "ini": {
       "version": "1.3.8",
@@ -11092,8 +11009,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -11146,7 +11062,7 @@
     "intl-messageformat": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
-      "integrity": "sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=",
+      "integrity": "sha512-I+tSvHnXqJYjDfNmY95tpFMj30yoakC6OXAo+wu/wTMy6tA/4Fd4mvV7Uzs4cqK/Ap29sHhwjcY+78a8eifcXw==",
       "requires": {
         "intl-messageformat-parser": "1.4.0"
       }
@@ -11154,7 +11070,7 @@
     "intl-messageformat-parser": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
-      "integrity": "sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU="
+      "integrity": "sha512-/XkqFHKezO6UcF4Av2/Lzfrez18R0jyw7kRFhSeB/YRakdrgSc9QfFZUwNJI9swMwMoNPygK1ArC5wdFSjPw+A=="
     },
     "intl-relativeformat": {
       "version": "2.2.0",
@@ -11181,8 +11097,7 @@
     "ip-regex": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
-      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=",
-      "dev": true
+      "integrity": "sha512-58yWmlHpp7VYfcdTwMTvwMmqx/Elfxjd9RXTDyMsbL7lLWmhMylLEqiYVLKuLzOZqVgiWXD9MfR62Vv89VRxkw=="
     },
     "ipaddr.js": {
       "version": "1.9.0",
@@ -11199,7 +11114,7 @@
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
       "requires": {
         "kind-of": "^3.0.2"
       }
@@ -11212,7 +11127,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "is-bigint": {
       "version": "1.0.4",
@@ -11290,7 +11205,7 @@
     "is-data-descriptor": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
       "requires": {
         "kind-of": "^3.0.2"
       }
@@ -11320,19 +11235,17 @@
     "is-directory": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+      "integrity": "sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw=="
     },
     "is-dotfile": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true
+      "integrity": "sha512-9YclgOGtN/f8zx0Pr4FQYMdibBiTaH3sn52vjYip4ZSf6C4/6RfTEZ+MR4GvKhCxdPh21Bg42/WL55f6KSnKpg=="
     },
     "is-equal-shallow": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
-      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
-      "dev": true,
+      "integrity": "sha512-0EygVC5qPvIyb+gSz7zdD5/AAoS6Qrx1e//6N4yv4oNm30kqvdmG66oZFWVlQHUWe5OjP08FuTw2IdT0EOTcYA==",
       "requires": {
         "is-primitive": "^2.0.0"
       }
@@ -11340,13 +11253,12 @@
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="
     },
     "is-extglob": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true
+      "integrity": "sha512-7Q+VbVafe6x2T+Tu6NcOf6sRklazEPmBoB3IWk3WdGZM2iGUwU/Oe3Wtq5lSEkDTTlpp8yx+5t4pzO/i9Ty1ww=="
     },
     "is-finite": {
       "version": "1.0.2",
@@ -11359,19 +11271,17 @@
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
     },
     "is-generator-fn": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz",
-      "integrity": "sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=",
-      "dev": true
+      "integrity": "sha512-95jJZX6O/gdekidH2usRBr9WdRw4LU56CttPstXFxvG0r3QUE9eaIdz2p2Y7zrm6jxz7SjByAo1AtzwGlRvfOg=="
     },
     "is-glob": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
+      "integrity": "sha512-a1dBeB19NXsf/E0+FHqkagizel/LQw2DjSQpvQrj3zT+jYPpaUCryPnrQajXKFLCMuf4I6FhRpaGtw4lPrG6Eg==",
       "requires": {
         "is-extglob": "^1.0.0"
       }
@@ -11379,7 +11289,7 @@
     "is-installed-globally": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
-      "integrity": "sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=",
+      "integrity": "sha512-ERNhMg+i/XgDwPIPF3u24qpajVreaiSuvpb1Uu0jugw7KKcxGyCX8cgp8P5fwTmAuXku6beDHHECdKArjlg7tw==",
       "requires": {
         "global-dirs": "^0.1.0",
         "is-path-inside": "^1.0.0"
@@ -11423,13 +11333,12 @@
     "is-npm": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
-      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ="
+      "integrity": "sha512-9r39FIr3d+KD9SbX0sfMsHzb5PP3uimOiwr3YupUaUFG4W0l1U57Rx3utpttV7qz5U3jmrO5auUa04LU9pyHsg=="
     },
     "is-number": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
-      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
-      "dev": true,
+      "integrity": "sha512-QUzH43Gfb9+5yckcrSA0VBDwEtDUchrk4F6tfJZQuNzDJbEDB9cZNzSfXGQ1jqmdDY/kl41lUOWM9syA8z8jlg==",
       "requires": {
         "kind-of": "^3.0.2"
       }
@@ -11443,7 +11352,7 @@
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="
     },
     "is-odd": {
       "version": "2.0.0",
@@ -11463,7 +11372,7 @@
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
-      "integrity": "sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0="
+      "integrity": "sha512-cnS56eR9SPAscL77ik76ATVqoPARTqPIVkMDVxRaWH06zT+6+CzIroYRJ0VVvm0Z1zfAvxvz9i/D3Ppjaqt5Nw=="
     },
     "is-path-in-cwd": {
       "version": "1.0.1",
@@ -11476,7 +11385,7 @@
     "is-path-inside": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz",
-      "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=",
+      "integrity": "sha512-qhsCR/Esx4U4hg/9I19OVUAJkGWtjRYHMRgUMZE2TDdj+Ag+kttZanLupfddNyglzz50cUlmWzUaI37GDfNx/g==",
       "requires": {
         "path-is-inside": "^1.0.1"
       }
@@ -11492,15 +11401,14 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         }
       }
     },
     "is-posix-bracket": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
-      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
-      "dev": true
+      "integrity": "sha512-Yu68oeXJ7LeWNmZ3Zov/xg/oDBnBK2RNxwYY1ilNJX+tKKZqgPK+qOn/Gs9jEu66KDY9Netf5XLKNGzas/vPfQ=="
     },
     "is-potential-custom-element-name": {
       "version": "1.0.1",
@@ -11511,8 +11419,7 @@
     "is-primitive": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
-      "dev": true
+      "integrity": "sha512-N3w1tFaRfk3UrPfqeRyD+GYDASU3W5VinKhlORy8EWVf/sIdDL9GAcew85XmktCfH+ngG7SRXEVDoO18WMdB/Q=="
     },
     "is-promise": {
       "version": "2.1.0",
@@ -11522,12 +11429,12 @@
     "is-property": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
+      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g=="
     },
     "is-redirect": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
-      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ="
+      "integrity": "sha512-cr/SlUEe5zOGmzvj9bUyC4LVvkNVAXu4GytXLNMr1pny+a65MpQ9IJzFHD5vi7FyJgb4qt27+eS3TuQnqB+RQw=="
     },
     "is-regex": {
       "version": "1.0.4",
@@ -11550,7 +11457,7 @@
     "is-root": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-root/-/is-root-1.0.0.tgz",
-      "integrity": "sha1-B7bCM7w5TNnQK6FclmvWZg1jQtU="
+      "integrity": "sha512-1d50EJ7ipFxb9bIx213o6KPaJmHN8f+nR48UZWxWVzDx+NA3kpscxi02oQX3rGkEaLBi9m3ZayHngQc3+bBX9w=="
     },
     "is-shared-array-buffer": {
       "version": "1.0.1",
@@ -11561,7 +11468,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ=="
     },
     "is-string": {
       "version": "1.0.5",
@@ -11572,8 +11479,7 @@
     "is-subset": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
-      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=",
-      "dev": true
+      "integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw=="
     },
     "is-symbol": {
       "version": "1.0.1",
@@ -11583,8 +11489,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
     "is-unicode-supported": {
       "version": "0.1.0",
@@ -11595,7 +11500,7 @@
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
+      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q=="
     },
     "is-weakref": {
       "version": "1.0.1",
@@ -11619,23 +11524,22 @@
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+      "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw=="
     },
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "isobject": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-      "dev": true,
+      "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
       "requires": {
         "isarray": "1.0.0"
       }
@@ -11643,7 +11547,7 @@
     "isomorphic-fetch": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
       "requires": {
         "node-fetch": "^1.0.1",
         "whatwg-fetch": ">=0.10.0"
@@ -11652,8 +11556,7 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
     },
     "istanbul-api": {
       "version": "1.3.7",
@@ -11719,14 +11622,12 @@
         "has-flag": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-          "dev": true
+          "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA=="
         },
         "supports-color": {
           "version": "3.2.3",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-          "dev": true,
+          "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
           "requires": {
             "has-flag": "^1.0.0"
           }
@@ -11764,8 +11665,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
         }
       }
     },
@@ -11914,8 +11814,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -12003,8 +11902,7 @@
     "jest-docblock": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-23.2.0.tgz",
-      "integrity": "sha1-8IXh8YVI2Z/dabICB+b9VdkTg6c=",
-      "dev": true,
+      "integrity": "sha512-CB8MdScYLkzQ0Q/I4FYlt2UBkG9tFzi+ngSPVhSBB70nifaC+5iWz6GEfa/lB4T2KCqGy+DLzi1v34r9R1XzuA==",
       "requires": {
         "detect-newline": "^2.1.0"
       }
@@ -12031,7 +11929,7 @@
         "callsites": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+          "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==",
           "dev": true
         },
         "jest-environment-jsdom": {
@@ -12084,8 +11982,7 @@
     "jest-environment-jsdom": {
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
-      "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
-      "dev": true,
+      "integrity": "sha512-UIXe32cMl/+DtyNHC15X+aFZMh04wx7PjWFBfz+nwoLgsIN2loKoNiKGSzUhMW/fVwbHrk8Qopglb7V4XB4EfQ==",
       "requires": {
         "jest-mock": "^23.2.0",
         "jest-util": "^23.4.0",
@@ -12520,8 +12417,7 @@
     "jest-environment-node": {
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
-      "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
-      "dev": true,
+      "integrity": "sha512-bk8qScgIfkb+EdwJ0JZ9xGvN7N3m6Qok73G8hi6tzvNadpe4kOxxuGmK2cJzAM3tPC/HBulzrOeNHEvaThQFrQ==",
       "requires": {
         "jest-mock": "^23.2.0",
         "jest-util": "^23.4.0"
@@ -12620,8 +12516,7 @@
     "jest-message-util": {
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
-      "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
-      "dev": true,
+      "integrity": "sha512-Tjqy7T8jHhPgV4Gsi+pKMMfaz3uP5DPtMGnm8RWNWUHIk2igqxQ3/9rud3JkINCvZDGqlpJVuFGIDXbltG4xLA==",
       "requires": {
         "@babel/code-frame": "^7.0.0-beta.35",
         "chalk": "^2.0.1",
@@ -12633,14 +12528,12 @@
     "jest-mock": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-23.2.0.tgz",
-      "integrity": "sha1-rRxg8p6HGdR8JuETgJi20YsmETQ=",
-      "dev": true
+      "integrity": "sha512-lz+Rf6dwRNDVowuGCXm93ib8hMyPntl1GGVt9PuZfBAmTjP5yKYgK14IASiEjs7XoMo4i/R7+dkrJY3eESwTJg=="
     },
     "jest-regex-util": {
       "version": "23.3.0",
       "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.3.0.tgz",
-      "integrity": "sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U=",
-      "dev": true
+      "integrity": "sha512-pNilf1tXhv5z0qjJy2Hl6Ar6dsi+XX2zpCAuzxRs4qoputI0Bm9rU7pa2ErrFTfiHYe8VboTR7WATPZXqzpQ/g=="
     },
     "jest-resolve": {
       "version": "23.6.0",
@@ -12816,8 +12709,7 @@
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-          "dev": true
+          "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
         },
         "which-module": {
           "version": "2.0.0",
@@ -12859,8 +12751,7 @@
     "jest-serializer": {
       "version": "23.0.1",
       "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-23.0.1.tgz",
-      "integrity": "sha1-o3dq6zEekP6D+rnlM+hRAr0WQWU=",
-      "dev": true
+      "integrity": "sha512-l6cPuiGEQI72H4+qMePF62E+URkZscnAqdHBYHkMrhKJOwU08AHvGmftXdosUzfCGhh/Ih4Xk1VgxnJSwrvQvQ=="
     },
     "jest-snapshot": {
       "version": "23.6.0",
@@ -12883,8 +12774,7 @@
     "jest-util": {
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
-      "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
-      "dev": true,
+      "integrity": "sha512-OS1/0QSbbMF9N93MxF1hUmK93EF3NGQGbbaTBZZk95aytWtWmzxsFWwt/UXIIkfHbPCK1fXTrPklbL+ohuFFOA==",
       "requires": {
         "callsites": "^2.0.0",
         "chalk": "^2.0.1",
@@ -12899,8 +12789,7 @@
         "callsites": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
-          "dev": true
+          "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ=="
         }
       }
     },
@@ -12919,8 +12808,7 @@
     "jest-watcher": {
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-23.4.0.tgz",
-      "integrity": "sha1-0uKM50+NrWxq/JIrksq+9u0FyRw=",
-      "dev": true,
+      "integrity": "sha512-BZGZYXnte/vazfnmkD4ERByi2O2mW+C++W8Sb7dvOnwcSccvCKNQgmcz1L+9hxVD7HWtqymPctIY7v5ZbQGNyg==",
       "requires": {
         "ansi-escapes": "^3.0.0",
         "chalk": "^2.0.1",
@@ -12942,8 +12830,7 @@
     "jest-worker": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-23.2.0.tgz",
-      "integrity": "sha1-+vcGqNo2+uYOsmlXJX+ntdjqArk=",
-      "dev": true,
+      "integrity": "sha512-zx0uwPCDxToGfYyQiSHh7T/sKIxQFnQqT6Uug7Y/L7PzEkFITPaufjQe6yaf1OXSnGvKC5Fwol1hIym0zDzyvw==",
       "requires": {
         "merge-stream": "^1.0.1"
       }
@@ -12957,7 +12844,7 @@
     "jquery-match-height": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/jquery-match-height/-/jquery-match-height-0.7.2.tgz",
-      "integrity": "sha1-+NnzulMU2qsQnPB0CGdL4gS+Xw4=",
+      "integrity": "sha512-qSyC0GBc4zUlgBcxfyyumJSVUm50T6XuJEIz59cKaI28VXMUT95mZ6KiIjhMIMbG8IiJhh65FtQO1XD42TAcwg==",
       "optional": true
     },
     "js-levenshtein": {
@@ -12974,7 +12861,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+      "integrity": "sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg=="
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -12995,8 +12882,7 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
     },
     "jsdom": {
       "version": "11.12.0",
@@ -13086,14 +12972,12 @@
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
-      "dev": true
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
     "json3": {
       "version": "3.3.2",
@@ -13103,12 +12987,12 @@
     "json5": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+      "integrity": "sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw=="
     },
     "jsonfile": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
-      "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
+      "integrity": "sha512-oBko6ZHlubVB5mRFkur5vgYR1UyqX+S6Y/oCfLhqNdcc2fYFlDpIoNc7AfKS1KOGcnNAkvsr0grLck9ANM815w==",
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -13176,7 +13060,7 @@
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
       "requires": {
         "is-buffer": "^1.1.5"
       }
@@ -13184,7 +13068,7 @@
     "klaw": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
-      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+      "integrity": "sha512-TED5xi9gGQjGpNnvRWknrwAB1eL5GciPfVFOt3Vk1OJCVDQbzuSfrF3hkUQKlsgKrG1F+0t5W0m+Fje1jIt8rw==",
       "requires": {
         "graceful-fs": "^4.1.9"
       }
@@ -13218,7 +13102,7 @@
     "latest-version": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
-      "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=",
+      "integrity": "sha512-Be1YRHWWlZaSsrz2U+VInk+tO0EwLIyV+23RhWLINJYwg/UIikxjlj3MhH37/6/EDCAusjajvMkMMUXRaMWl/w==",
       "requires": {
         "package-json": "^4.0.0"
       }
@@ -13232,13 +13116,12 @@
     "leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
-      "integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA=",
-      "dev": true
+      "integrity": "sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA=="
     },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
       "requires": {
         "prelude-ls": "~1.1.2",
         "type-check": "~0.3.2"
@@ -13247,7 +13130,7 @@
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -13325,7 +13208,7 @@
     "loader-utils": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
-      "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
+      "integrity": "sha512-gkD9aSEG9UGglyPcDJqY9YBTUtCLKaBK6ihD2VP1d1X60lTfFspNZNulGBBbUZLkPygy4LySYHyxBpq+VhjObQ==",
       "requires": {
         "big.js": "^3.1.3",
         "emojis-list": "^2.0.0",
@@ -13335,7 +13218,7 @@
     "locate-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
       "requires": {
         "p-locate": "^2.0.0",
         "path-exists": "^3.0.0"
@@ -13354,7 +13237,7 @@
     "lodash._baseisequal": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/lodash._baseisequal/-/lodash._baseisequal-3.0.7.tgz",
-      "integrity": "sha1-2AJfdjOdKTQnZ9zIh85cuVpbUfE=",
+      "integrity": "sha512-U+3GsNEZj9ebI03ncLC2pLmYVjgtYZEwdkAPO7UGgtGvAz36JVFPAQUufpSaVL93Cz5arc6JGRKZRhaOhyVJYA==",
       "dev": true,
       "requires": {
         "lodash.isarray": "^3.0.0",
@@ -13365,74 +13248,71 @@
     "lodash._bindcallback": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
-      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=",
+      "integrity": "sha512-2wlI0JRAGX8WEf4Gm1p/mv/SZ+jLijpj0jyaE/AXeuQphzCgD8ZQW4oSpoN8JAopujOFGU3KMuq7qfHBWlGpjQ==",
       "dev": true
     },
     "lodash._getnative": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
+      "integrity": "sha512-RrL9VxMEPyDMHOd9uFbvMe8X55X16/cGM5IgOKgRElQZutpX89iS6vwl64duTV1/16w5JY7tuFNXqoekmh1EmA==",
       "dev": true
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
+      "integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
-      "dev": true
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
     },
     "lodash.capitalize": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz",
-      "integrity": "sha1-+CbJtOKoUR2E46yinbBeGk87cqk="
+      "integrity": "sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-      "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="
     },
     "lodash.escape": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
-      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
-      "dev": true
+      "integrity": "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw=="
     },
     "lodash.flattendeep": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
-      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
-      "dev": true
+      "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ=="
     },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
     },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
-      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
+      "integrity": "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==",
       "dev": true
     },
     "lodash.isarray": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
-      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+      "integrity": "sha512-JwObCrNJuT0Nnbuecmqr5DgtuBppuCvGD9lxjFpAzwnVtdGoDQ1zig+5W8k5/6Gcn0gZ3936HDAlGd28i7sOGQ==",
       "dev": true
     },
     "lodash.isequal": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-3.0.4.tgz",
-      "integrity": "sha1-HDXrO27wzR/1F0Pj6jz3/f/ay2Q=",
+      "integrity": "sha512-Bsu5fP9Omd+HBk2Dz8qp4BHbC+83DBykZ87Lz1JmPKTVNy4Q0XQVtUrbfXVAK/udQrWNcGStcKSA9yj/Zkm3TQ==",
       "dev": true,
       "requires": {
         "lodash._baseisequal": "^3.0.0",
@@ -13442,24 +13322,23 @@
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
-      "dev": true
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
     },
     "lodash.istypedarray": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz",
-      "integrity": "sha1-yaR3SYYHUB2OhJTSg7h8OSgc72I=",
+      "integrity": "sha512-lGWJ6N8AA3KSv+ZZxlTdn4f6A7kMfpJboeyvbFdE7IU9YAgweODqmOgdUHOA+c6lVWeVLysdaxciFXi+foVsWw==",
       "dev": true
     },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
-      "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g=="
     },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
-      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "integrity": "sha512-CuBsapFjcubOGMn3VD+24HOAPxM79tH+V6ivJL3CHYjtrawauDJHUk//Yew9Hvc6e9rbCrURGk8z6PC+8WJBfQ==",
       "dev": true,
       "requires": {
         "lodash._getnative": "^3.0.0",
@@ -13470,19 +13349,18 @@
     "lodash.orderby": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.orderby/-/lodash.orderby-4.6.0.tgz",
-      "integrity": "sha1-5pfwTOXXhSL1TZM4syuBozk+TrM=",
+      "integrity": "sha512-T0rZxKmghOOf5YPnn8EY5iLYeWCpZq8G41FfqoVHH5QDTAFaghJRmAdLiadEDq+ztgM2q5PjA+Z1fOwGrLgmtg==",
       "optional": true
     },
     "lodash.pick": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
-      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM="
+      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q=="
     },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
-      "dev": true
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
     "lodash.template": {
       "version": "4.5.0",
@@ -13504,7 +13382,12 @@
     "lodash.topath": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak="
+      "integrity": "sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg=="
+    },
+    "lodash.uniqueid": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz",
+      "integrity": "sha512-GQQWaIeGlL6DIIr06kj1j6sSmBxyNMwI8kaX9aKpHR/XsMTiaXDVPNPAkiboOTK9OJpTJF/dXT3xYoFQnj386Q=="
     },
     "log-symbols": {
       "version": "4.1.0",
@@ -13587,7 +13470,7 @@
     "loud-rejection": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "integrity": "sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==",
       "requires": {
         "currently-unhandled": "^0.4.1",
         "signal-exit": "^3.0.0"
@@ -13596,7 +13479,7 @@
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
-      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
+      "integrity": "sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA=="
     },
     "lowercase-keys": {
       "version": "1.0.1",
@@ -13654,17 +13537,17 @@
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
+      "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg=="
     },
     "map-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg=="
     },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "integrity": "sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==",
       "requires": {
         "object-visit": "^1.0.0"
       }
@@ -13707,8 +13590,7 @@
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
-      "dev": true
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
     "mem": {
       "version": "4.3.0",
@@ -13737,8 +13619,7 @@
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
-      "dev": true,
+      "integrity": "sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==",
       "requires": {
         "errno": "^0.1.3",
         "readable-stream": "^2.0.1"
@@ -13747,7 +13628,7 @@
     "meow": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "integrity": "sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA==",
       "requires": {
         "camelcase-keys": "^2.0.0",
         "decamelize": "^1.1.2",
@@ -13784,14 +13665,12 @@
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
-      "dev": true
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
     },
     "merge-stream": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
-      "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=",
-      "dev": true,
+      "integrity": "sha512-e6RM36aegd4f+r8BZCcYXlO2P3H6xbUM6ktL2Xmf45GAOit9bI4z6/3VU7JwllVO1L7u0UDSg/EhzQ5lmMLolA==",
       "requires": {
         "readable-stream": "^2.0.1"
       }
@@ -13804,14 +13683,12 @@
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
-      "dev": true
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
     },
     "micromatch": {
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-      "dev": true,
+      "integrity": "sha512-LnU2XFEk9xxSJ6rfgAry/ty5qwUTyHYOBU0g4R6tIw5ljwgGIBmiKhRWLw5NpMOnrgUNcDJ4WMp8rl3sYVHLNA==",
       "requires": {
         "arr-diff": "^2.0.0",
         "array-unique": "^0.2.1",
@@ -13921,8 +13798,7 @@
     "minimalistic-crypto-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=",
-      "dev": true
+      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg=="
     },
     "minimatch": {
       "version": "3.0.4",
@@ -13998,7 +13874,7 @@
     "moment-timezone": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz",
-      "integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=",
+      "integrity": "sha512-5cNPVUwaVJDCe9JM8m/qz17f9SkaI8rpnRUyDJi2K5HAd6EwhuQ3n5nLclZkNC/qJnomKgQH2TIu70Gy2dxFKA==",
       "optional": true,
       "requires": {
         "moment": ">= 2.6.0"
@@ -14013,8 +13889,7 @@
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
-      "dev": true,
+      "integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
       "requires": {
         "aproba": "^1.1.1",
         "copy-concurrently": "^1.0.0",
@@ -14027,7 +13902,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "msw": {
       "version": "0.42.0",
@@ -14434,19 +14309,19 @@
         "tr46": {
           "version": "0.0.3",
           "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
           "dev": true
         },
         "webidl-conversions": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
           "dev": true
         },
         "whatwg-url": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-          "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
           "dev": true,
           "requires": {
             "tr46": "~0.0.3",
@@ -14506,13 +14381,12 @@
     "multicast-dns-service-types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
-      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
-      "dev": true
+      "integrity": "sha512-cnAsSVxIDsYt0v7HmC0hWZFwwXSh+E6PgCrREDuN/EsjgLwA5XRmlMHhSiDPrt6HxY1gTivEa/Zh7GtODoLevQ=="
     },
     "mute-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
+      "integrity": "sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ=="
     },
     "nan": {
       "version": "2.18.0",
@@ -14553,12 +14427,12 @@
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+          "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA=="
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+          "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ=="
         },
         "kind-of": {
           "version": "6.0.3",
@@ -14570,8 +14444,7 @@
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
-      "dev": true
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "nearley": {
       "version": "2.20.1",
@@ -14634,8 +14507,7 @@
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
-      "dev": true
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
     },
     "node-libs-browser": {
       "version": "2.2.1",
@@ -14706,8 +14578,7 @@
     "normalize-path": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "dev": true,
+      "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
       "requires": {
         "remove-trailing-separator": "^1.0.1"
       }
@@ -14715,8 +14586,23 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
+    },
+    "npm-bundled": {
+      "version": "1.0.6",
+      "resolved": false,
+      "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
+      "optional": true
+    },
+    "npm-packlist": {
+      "version": "1.4.1",
+      "resolved": false,
+      "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
+      "optional": true,
+      "requires": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1"
+      }
     },
     "npm-path": {
       "version": "2.0.4",
@@ -14750,7 +14636,7 @@
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
       "requires": {
         "path-key": "^2.0.0"
       }
@@ -14758,7 +14644,7 @@
     "npm-which": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/npm-which/-/npm-which-3.0.1.tgz",
-      "integrity": "sha1-kiXybsOihcIJyuZ8OxGmtKtxQKo=",
+      "integrity": "sha512-CM8vMpeFQ7MAPin0U3wzDhSGV0hMHNwHU0wjo402IVizPDrs45jSfSuoC+wThevY88LQti8VvaAnqYAeVy3I1A==",
       "dev": true,
       "requires": {
         "commander": "^2.9.0",
@@ -14777,13 +14663,12 @@
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
+      "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg=="
     },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+      "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ=="
     },
     "nwsapi": {
       "version": "2.2.0",
@@ -14800,12 +14685,12 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-copy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "integrity": "sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==",
       "requires": {
         "copy-descriptor": "^0.1.0",
         "define-property": "^0.2.5",
@@ -14815,7 +14700,7 @@
         "define-property": {
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -14847,7 +14732,7 @@
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "integrity": "sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==",
       "requires": {
         "isobject": "^3.0.0"
       },
@@ -14855,7 +14740,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         }
       }
     },
@@ -15242,8 +15127,7 @@
     "object.omit": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
-      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
-      "dev": true,
+      "integrity": "sha512-UiAM5mhmIuKLsOvrL+B0U2d1hXHF3bFYWIuH1LMpuV2EJEHG1Ntz06PgLEHjm6VFd87NpH8rastvPoyv6UW2fA==",
       "requires": {
         "for-own": "^0.1.4",
         "is-extendable": "^0.1.1"
@@ -15252,7 +15136,7 @@
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
       "requires": {
         "isobject": "^3.0.1"
       },
@@ -15260,7 +15144,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         }
       }
     },
@@ -15383,7 +15267,7 @@
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "requires": {
         "wrappy": "1"
       }
@@ -15391,7 +15275,7 @@
     "onetime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
-      "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+      "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
       "requires": {
         "mimic-fn": "^1.0.0"
       }
@@ -15408,7 +15292,7 @@
     "optionator": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
-      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "integrity": "sha512-oCOQ8AIC2ciLy/sE2ehafRBleBgDLvzGhBRRev87sP7ovnbvQfqpc3XFI0DhHey2OfVoNV91W+GPC6B3540/5Q==",
       "requires": {
         "deep-is": "~0.1.3",
         "fast-levenshtein": "~2.0.4",
@@ -15540,18 +15424,26 @@
     "os-browserify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
-      "dev": true
+      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A=="
     },
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ=="
     },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g=="
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
     },
     "outvariant": {
       "version": "1.3.0",
@@ -15562,13 +15454,12 @@
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
+      "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw=="
     },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow=="
     },
     "p-is-promise": {
       "version": "2.1.0",
@@ -15587,7 +15478,7 @@
     "p-locate": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
       "requires": {
         "p-limit": "^1.1.0"
       }
@@ -15609,12 +15500,12 @@
     "p-try": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+      "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww=="
     },
     "package-json": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/package-json/-/package-json-4.0.1.tgz",
-      "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=",
+      "integrity": "sha512-q/R5GrMek0vzgoomq6rm9OX+3PQve8sLwTirmK30YB3Cu0Bbt9OX9M/SIUnroN5BGJkzwGsFwDaRGD9EwBOlCA==",
       "requires": {
         "got": "^6.7.1",
         "registry-auth-token": "^3.0.1",
@@ -15642,7 +15533,7 @@
     "param-case": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
-      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "integrity": "sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==",
       "requires": {
         "no-case": "^2.2.0"
       }
@@ -15663,8 +15554,7 @@
     "parse-glob": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
+      "integrity": "sha512-FC5TeK0AwXzq3tUBFtH74naWkPQCEWs4K+xMxWZBlKDWu0bVHXGZa+KKqxKidd7xwhdZ19ZNuF2uO1M/r196HA==",
       "requires": {
         "glob-base": "^0.3.0",
         "is-dotfile": "^1.0.0",
@@ -15675,7 +15565,7 @@
     "parse-json": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
       "requires": {
         "error-ex": "^1.2.0"
       }
@@ -15683,7 +15573,7 @@
     "parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY="
+      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q=="
     },
     "parse5": {
       "version": "4.0.0",
@@ -15717,7 +15607,7 @@
     "pascalcase": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
+      "integrity": "sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw=="
     },
     "path-browserify": {
       "version": "0.0.1",
@@ -15728,27 +15618,27 @@
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
+      "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q=="
     },
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="
     },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
     },
     "path-is-inside": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM="
+      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w=="
     },
     "path-key": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw=="
     },
     "path-parse": {
       "version": "1.0.7",
@@ -15765,7 +15655,7 @@
     "path-type": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+      "integrity": "sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "pify": "^2.0.0",
@@ -15814,7 +15704,7 @@
     "patternfly-bootstrap-combobox": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/patternfly-bootstrap-combobox/-/patternfly-bootstrap-combobox-1.1.7.tgz",
-      "integrity": "sha1-al48zRFwwhs8S0qhaKdBPh3btuE=",
+      "integrity": "sha512-6KptS6UnS8jOwLuqsjokiNUYjOf3G4bSahiSHhkQMdfvG0b4sZkUgOFWdMJ8zBXaZGVe8T324GQoXqiJdJxMuw==",
       "optional": true
     },
     "patternfly-bootstrap-treeview": {
@@ -15864,23 +15754,27 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
+    "picomatch": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
     },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg=="
     },
     "pinkie-promise": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
       "requires": {
         "pinkie": "^2.0.0"
       }
@@ -15888,8 +15782,7 @@
     "pkg-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
-      "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
-      "dev": true,
+      "integrity": "sha512-ojakdnUgL5pzJYWw2AIDEupaQCX5OPbM688ZevubICjdIX01PRSYKqm33fJoCOJBRseYCTUlQRnBNX+Pchaejw==",
       "requires": {
         "find-up": "^2.1.0"
       }
@@ -15897,7 +15790,7 @@
     "pkg-up": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
-      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
+      "integrity": "sha512-fjAPuiws93rm7mPUu21RdBnkeZNrbfCFCwfAhPWY+rR3zG0ubpe5cEReHOw5fIbfmsxEV/g2kSxGTATY3Bpnwg==",
       "requires": {
         "find-up": "^2.1.0"
       }
@@ -15967,7 +15860,7 @@
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
+      "integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg=="
     },
     "postcss": {
       "version": "6.0.19",
@@ -15990,7 +15883,7 @@
     "postcss-load-config": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
-      "integrity": "sha1-U56a/J3chiASHr+djDZz4M5Q0oo=",
+      "integrity": "sha512-3fpCfnXo9Qd/O/q/XL4cJUhRsqjVD2V1Vhy3wOEcLE5kz0TGtdDXJSoiTdH4e847KphbEac4+EZSH4qLRYIgLw==",
       "requires": {
         "cosmiconfig": "^2.1.0",
         "object-assign": "^4.1.0",
@@ -16001,7 +15894,7 @@
     "postcss-load-options": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-load-options/-/postcss-load-options-1.2.0.tgz",
-      "integrity": "sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=",
+      "integrity": "sha512-WKS5LJMZLWGwtfhs5ahb2ycpoYF3m0kK4QEaM+elr5EpiMt0H296P/9ETa13WXzjPwB0DDTBiUBBWSHoApQIJg==",
       "requires": {
         "cosmiconfig": "^2.1.0",
         "object-assign": "^4.1.0"
@@ -16010,7 +15903,7 @@
     "postcss-load-plugins": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz",
-      "integrity": "sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=",
+      "integrity": "sha512-/WGUMYhKiryWjYO6c7kAcqMuD7DVkaQ8HcbQenDme/d3OBOmrYMFObOKgUWyUy1uih5U2Dakq8H6VcJi5C9wHQ==",
       "requires": {
         "cosmiconfig": "^2.1.1",
         "object-assign": "^4.1.0"
@@ -16049,7 +15942,7 @@
     "postcss-modules-local-by-default": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
-      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+      "integrity": "sha512-X4cquUPIaAd86raVrBwO8fwRfkIdbwFu7CTfEOjiZQHVQwlHRSkTgH5NLDmMm5+1hQO8u6dZ+TOOJDbay1hYpA==",
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -16058,7 +15951,7 @@
     "postcss-modules-scope": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
-      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+      "integrity": "sha512-LTYwnA4C1He1BKZXIx1CYiHixdSe9LWYVKadq9lK5aCCMkoOkFyZ7aigt+srfjlRplJY3gIol6KUNefdMQJdlw==",
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -16067,7 +15960,7 @@
     "postcss-modules-values": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
-      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+      "integrity": "sha512-i7IFaR9hlQ6/0UgFuqM6YWaCfA1Ej8WMg8A5DggnH1UGKJvTV/ugqq/KaULixzzOi3T/tF6ClBXcHGCzdd5unA==",
       "requires": {
         "icss-replace-symbols": "^1.1.0",
         "postcss": "^6.0.1"
@@ -16081,23 +15974,22 @@
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
+      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w=="
     },
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
+      "integrity": "sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg=="
     },
     "preserve": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
-      "dev": true
+      "integrity": "sha512-s/46sYeylUfHNjI+sA/78FAHlmIuKqI9wNnzEOGehAlUUYeObv5C2mOinXBjyUyWmJ2SfcS2/ydApH4hTF4WXQ=="
     },
     "pretty-bytes": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
-      "integrity": "sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk="
+      "integrity": "sha512-yJAF+AjbHKlxQ8eezMd/34Mnj/YTQ3i6kLzvVsH4l/BfIFtp444n0wVbnsn66JimZ9uBofv815aRp1zCppxlWw=="
     },
     "pretty-error": {
       "version": "2.1.1",
@@ -16135,8 +16027,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
     },
     "process-nextick-args": {
       "version": "2.0.0",
@@ -16152,7 +16043,7 @@
     "promise": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-8.0.1.tgz",
-      "integrity": "sha1-5F1osAoXZHttpxG/he1u1HII9FA=",
+      "integrity": "sha512-6NO4VAynZF2J958bGr+U5mPDwK5n7Vi/S0mCW7bke3bJmcALGjCywH8sl6a2eN+xIX6Q1exH2lmqyjR9PKTiwg==",
       "requires": {
         "asap": "~2.0.3"
       }
@@ -16160,8 +16051,7 @@
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
-      "dev": true
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g=="
     },
     "prompts": {
       "version": "0.1.14",
@@ -16232,7 +16122,7 @@
     "protochain": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/protochain/-/protochain-1.0.5.tgz",
-      "integrity": "sha1-mRxAfpneJkqt+PgVBLXn+ve/omA=",
+      "integrity": "sha512-4hDwFSX50C4NE6f/6zg8EPr/WLPTkFPUtG0ulWZu6bwzV2hmb50fpdQLr0HiKBAUehapaFpItzWoCLjraLJhUA==",
       "dev": true
     },
     "proxy-addr": {
@@ -16248,13 +16138,12 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
     },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
     },
     "psl": {
       "version": "1.1.31",
@@ -16344,8 +16233,7 @@
     "querystring-es3": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
-      "dev": true
+      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA=="
     },
     "querystringify": {
       "version": "2.1.1",
@@ -16364,8 +16252,7 @@
     "railroad-diagrams": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
-      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=",
-      "dev": true
+      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A=="
     },
     "randexp": {
       "version": "0.4.6",
@@ -16484,6 +16371,25 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-ace": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-7.0.5.tgz",
+      "integrity": "sha512-3iI+Rg2bZXCn9K984ll2OF4u9SGcJH96Q1KsUgs9v4M2WePS4YeEHfW2nrxuqJrAkE5kZbxaCE79k6kqK0YBjg==",
+      "requires": {
+        "brace": "^0.11.1",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "lodash.isequal": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+          "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+        }
+      }
+    },
     "react-bootstrap": {
       "version": "0.32.4",
       "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.32.4.tgz",
@@ -16536,7 +16442,7 @@
     "react-bootstrap-switch": {
       "version": "15.5.3",
       "resolved": "https://registry.npmjs.org/react-bootstrap-switch/-/react-bootstrap-switch-15.5.3.tgz",
-      "integrity": "sha1-lyh3kdTsDRiS0UJULn5SSAArElE="
+      "integrity": "sha512-pzdmofONPjOTCfx/l1CjF3X9JqOGBsG5jYfLr7Ej0J/73foOWvDbk9O2ZyJsRroaPganAU1LPa9ISM8Yy/Q86w=="
     },
     "react-bootstrap-typeahead": {
       "version": "4.2.0",
@@ -16861,7 +16767,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -16928,6 +16834,20 @@
         }
       }
     },
+    "react-dom-factories": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
+      "integrity": "sha512-Bmic2N3oKji7vw9qjDr2dmwHvOATbFSnKy7EH0uT/qjvzIUsiXp6Yquk72LJ3WfMtRnq3ujXMMo7GsJeLPfFWw=="
+    },
+    "react-draggable": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-3.3.2.tgz",
+      "integrity": "sha512-oaz8a6enjbPtx5qb0oDWxtDNuybOylvto1QLydsXgKmwT7e3GXC2eMVDwEMIUYJIFqVG72XpOv673UuuAq6LhA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-dropzone": {
       "version": "11.3.1",
       "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.1.tgz",
@@ -16984,6 +16904,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-excel-workbook": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/react-excel-workbook/-/react-excel-workbook-0.0.4.tgz",
+      "integrity": "sha512-llZKbCGoJ2gauBySZ/IAZdcfR79/nStz6aapaWN85gpfscNH7t6nExCPPPFcXIOSjHICOG0yMns21zsZqFQ5pw==",
+      "requires": {
+        "file-saver": "^1.3.3",
+        "xlsx": "^0.10.3"
+      }
+    },
     "react-fast-compare": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
@@ -17010,6 +16939,14 @@
         "prop-types": "^15.5.6"
       }
     },
+    "react-html-table-to-excel": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-html-table-to-excel/-/react-html-table-to-excel-2.0.0.tgz",
+      "integrity": "sha512-afvcCtQWZPfen3D+UFu9YMHleQqpVm3manmiWaxr0wv76hx+BkQ0/nkOI1UyQs29pzAUWtZDiD9Eu/MqsDOEJw==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-intl": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
@@ -17109,7 +17046,7 @@
     "react-prop-types": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz",
-      "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=",
+      "integrity": "sha512-IyjsJhDX9JkoOV9wlmLaS7z+oxYoIWhfzDcFy7inwoAKTu+VcVNrVpPmLeioJ94y6GeDRsnwarG1py5qofFQMg==",
       "requires": {
         "warning": "^3.0.0"
       }
@@ -17310,7 +17247,7 @@
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+      "integrity": "sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==",
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -17320,7 +17257,7 @@
     "read-pkg-up": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -17329,7 +17266,7 @@
         "find-up": {
           "version": "1.1.2",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -17338,7 +17275,7 @@
         "path-exists": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -17649,7 +17586,7 @@
     "readline2": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/readline2/-/readline2-1.0.1.tgz",
-      "integrity": "sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=",
+      "integrity": "sha512-8/td4MmwUB6PkZUbV25uKz7dfrmjYWxsW8DVfibWdlHRk/l/DfHKn4pU+dfcoGLFgWOdyGCzINRQD7jn+Bv+/g==",
       "requires": {
         "code-point-at": "^1.0.0",
         "is-fullwidth-code-point": "^1.0.0",
@@ -17659,7 +17596,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -17667,7 +17604,7 @@
         "mute-stream": {
           "version": "0.0.5",
           "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
-          "integrity": "sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA="
+          "integrity": "sha512-EbrziT4s8cWPmzr47eYVW3wimS4HsvlnV5ri1xw1aR6JQo/OrJX5rkl32K/QQHdxeabJETtfeaROGhd8W7uBgg=="
         }
       }
     },
@@ -17702,7 +17639,7 @@
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "integrity": "sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==",
       "requires": {
         "indent-string": "^2.1.0",
         "strip-indent": "^1.0.1"
@@ -17776,7 +17713,7 @@
     "redux-localstorage": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/redux-localstorage/-/redux-localstorage-0.4.1.tgz",
-      "integrity": "sha1-+vbXGcWBOXKU2BFHP/zt7gZckzw="
+      "integrity": "sha512-dUha0YoH+BSZ2q15pakB+JWeqiuXUf3Ir4rObOpNrZ96HEdciGAjkL10k3KGdLI7qvQw/c096asw/SQ6TPjU/A=="
     },
     "redux-mock-store": {
       "version": "1.5.1",
@@ -17795,8 +17732,7 @@
     "reflect.ownkeys": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
-      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=",
-      "dev": true
+      "integrity": "sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg=="
     },
     "regenerate": {
       "version": "1.3.3",
@@ -17859,8 +17795,7 @@
     "regexpu-core": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
-      "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
-      "dev": true,
+      "integrity": "sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==",
       "requires": {
         "regenerate": "^1.2.1",
         "regjsgen": "^0.2.0",
@@ -17879,7 +17814,7 @@
     "registry-url": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
       "requires": {
         "rc": "^1.0.1"
       }
@@ -17887,12 +17822,12 @@
     "regjsgen": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
+      "integrity": "sha512-x+Y3yA24uF68m5GA+tBjbGYo64xXVJpbToBaWCoSNSc1hdk6dfctaRWrNFTVJZIIhL5GxW8zwjoixbnifnK59g=="
     },
     "regjsparser": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
-      "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
+      "integrity": "sha512-jlQ9gYLfk2p3V5Ag5fYhA7fv7OHzd1KUH0PRP46xc3TgwjwgROIW572AfYg/X9kaNq/LJnu6oJcFRXlIrGoTRw==",
       "requires": {
         "jsesc": "~0.5.0"
       },
@@ -17900,20 +17835,19 @@
         "jsesc": {
           "version": "0.5.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA=="
         }
       }
     },
     "relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
     },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
-      "dev": true
+      "integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw=="
     },
     "renderkid": {
       "version": "2.0.7",
@@ -18014,17 +17948,17 @@
     "repeat-element": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
-      "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo="
+      "integrity": "sha512-PJn5P/wQgXwp0Bpmzv9JU693QYky9P5bwntpuw8SsMXgUZHlcEyr9Vajgp/zhGSFX56/lv9Bz2k9mKrkpxLI4A=="
     },
     "repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w=="
     },
     "repeating": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "integrity": "sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==",
       "requires": {
         "is-finite": "^1.0.0"
       }
@@ -18125,24 +18059,22 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
     },
     "require-from-string": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz",
-      "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg="
+      "integrity": "sha512-H7AkJWMobeskkttHyhTVtS0fxpFLjxhbfMa6Bk3wimP7sdPRGL3EyCg3sAQenFfAe+xQ+oAc85Nmtvq0ROM83Q=="
     },
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
-      "dev": true
+      "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug=="
     },
     "require-uncached": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
-      "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=",
+      "integrity": "sha512-Xct+41K3twrbBHdxAgMoOS+cNcoqIjfM2/VxBF4LL2hVph7YsF8VSKyQ3BDFZwEVbok9yeDl2le/qo0S77WG2w==",
       "requires": {
         "caller-path": "^0.1.0",
         "resolve-from": "^1.0.0"
@@ -18151,7 +18083,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
     "reselect": {
       "version": "4.0.0",
@@ -18179,8 +18111,7 @@
     "resolve-cwd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
-      "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
-      "dev": true,
+      "integrity": "sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==",
       "requires": {
         "resolve-from": "^3.0.0"
       },
@@ -18188,15 +18119,14 @@
         "resolve-from": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-          "dev": true
+          "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw=="
         }
       }
     },
     "resolve-dir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
-      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+      "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
       "requires": {
         "expand-tilde": "^2.0.0",
         "global-modules": "^1.0.0"
@@ -18205,7 +18135,7 @@
     "resolve-from": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
-      "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
+      "integrity": "sha512-kT10v4dhrlLNcnO084hEjvXCI1wUG9qZLoz2RogxqDQQYy7IxjI/iMUkOtQTNEh6rzHxvdQWHsJyel1pKOVCxg=="
     },
     "resolve-pathname": {
       "version": "2.2.0",
@@ -18215,12 +18145,12 @@
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
+      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg=="
     },
     "restore-cursor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
-      "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+      "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==",
       "requires": {
         "onetime": "^2.0.0",
         "signal-exit": "^3.0.2"
@@ -18234,8 +18164,12 @@
     "retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
-      "dev": true
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow=="
+    },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw=="
     },
     "rimraf": {
       "version": "2.6.2",
@@ -18258,8 +18192,7 @@
     "rst-selector-parser": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
-      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
-      "dev": true,
+      "integrity": "sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==",
       "requires": {
         "lodash.flattendeep": "^4.4.0",
         "nearley": "^2.7.10"
@@ -18288,8 +18221,7 @@
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
-      "dev": true,
+      "integrity": "sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==",
       "requires": {
         "aproba": "^1.1.1"
       }
@@ -18302,8 +18234,7 @@
     "rx-lite-aggregates": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz",
-      "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=",
-      "dev": true,
+      "integrity": "sha512-3xPNZGW93oCjiO7PtKxRK6iOVYBWBvtf9QHDfU23Oc+dLIQmAV//UnyXV/yihv81VS/UqoQPk4NegS8EFi55Hg==",
       "requires": {
         "rx-lite": "*"
       }
@@ -18331,7 +18262,7 @@
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
       "requires": {
         "ret": "~0.1.10"
       }
@@ -18345,8 +18276,7 @@
     "sane": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/sane/-/sane-2.5.2.tgz",
-      "integrity": "sha1-tNwYYcIbQn6SlQej51HiosuKs/o=",
-      "dev": true,
+      "integrity": "sha512-OuZwD1QJ2R9Dbnhd7Ur8zzD8l+oADp9npyxK63Q9nZ4AjhB2QwDQcQlD8iuUsGm5AZZqtEuCaJvK1rxGRxyQ1Q==",
       "requires": {
         "anymatch": "^2.0.0",
         "capture-exit": "^1.2.0",
@@ -18362,14 +18292,12 @@
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-          "dev": true
+          "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA=="
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true
+          "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ=="
         },
         "braces": {
           "version": "2.3.2",
@@ -18392,8 +18320,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -18403,8 +18330,7 @@
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-          "dev": true,
+          "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
           "requires": {
             "debug": "^2.3.3",
             "define-property": "^0.2.5",
@@ -18418,8 +18344,7 @@
             "define-property": {
               "version": "0.2.5",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-              "dev": true,
+              "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
               "requires": {
                 "is-descriptor": "^0.1.0"
               }
@@ -18427,8 +18352,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -18436,8 +18360,7 @@
             "is-accessor-descriptor": {
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-              "dev": true,
+              "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -18445,8 +18368,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -18456,8 +18378,7 @@
             "is-data-descriptor": {
               "version": "0.1.4",
               "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-              "dev": true,
+              "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -18465,8 +18386,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -18511,8 +18431,7 @@
             "define-property": {
               "version": "1.0.0",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-              "dev": true,
+              "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
               "requires": {
                 "is-descriptor": "^1.0.0"
               }
@@ -18520,8 +18439,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -18531,8 +18449,7 @@
         "fill-range": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -18543,8 +18460,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -18583,8 +18499,7 @@
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
+          "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -18592,8 +18507,7 @@
             "kind-of": {
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
+              "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -18603,8 +18517,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "kind-of": {
           "version": "6.0.3",
@@ -18797,7 +18710,7 @@
         "ajv": {
           "version": "4.11.8",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
-          "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
+          "integrity": "sha512-I/bSHSNEcFFqXLf91nchoNB9D1Kie3QKcWdchYUaoIg1+1bdWDkdfdlvdIOJbi9U8xR0y+MWc5D+won9v95WlQ==",
           "requires": {
             "co": "^4.6.0",
             "json-stable-stringify": "^1.0.1"
@@ -18806,22 +18719,22 @@
         "ajv-keywords": {
           "version": "1.5.1",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
-          "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw="
+          "integrity": "sha512-vuBv+fm2s6cqUyey2A7qYcvsik+GMDJsw8BARP2sDE76cqmaZVarsvHf7Vx6VJ0Xk8gLl+u3MoAPf6gKzJefeA=="
         },
         "ansi-escapes": {
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
-          "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
+          "integrity": "sha512-wiXutNjDUlNEDWHcYH3jtZUhd3c4/VojassD8zHdHCY13xbZy2XbW+NKQwA0tWGBVzDA9qEzYwfoSsWmviidhw=="
         },
         "ansi-styles": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="
         },
         "chalk": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -18833,7 +18746,7 @@
         "cli-cursor": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
-          "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
+          "integrity": "sha512-25tABq090YNKkF6JH7lcwO0zFJTRke4Jcq9iX2nr/Sz0Cjjv4gckmwlW6Ty/aoyFd6z3ysR2hMGC2GFugmBo6A==",
           "requires": {
             "restore-cursor": "^1.0.1"
           }
@@ -18846,7 +18759,7 @@
         "doctrine": {
           "version": "1.5.0",
           "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
-          "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
+          "integrity": "sha512-lsGyRuYr4/PIB0txi+Fy2xOMI2dGaTguCaotzFGkVZuKR5usKfcRWIFKNM3QNrU7hh/+w2bwTW+ZeXPK5l8uVg==",
           "requires": {
             "esutils": "^2.0.2",
             "isarray": "^1.0.0"
@@ -18855,7 +18768,7 @@
         "eslint": {
           "version": "2.13.1",
           "resolved": "https://registry.npmjs.org/eslint/-/eslint-2.13.1.tgz",
-          "integrity": "sha1-5MyPoPAJ+4KaquI4VaKTYL4fbBE=",
+          "integrity": "sha512-29PFGeV6lLQrPaPHeCkjfgLRQPFflDiicoNZOw+c/JkaQ0Am55yUICdYZbmCiM+DSef+q7oCercimHvjNI0GAw==",
           "requires": {
             "chalk": "^1.1.3",
             "concat-stream": "^1.4.6",
@@ -18895,7 +18808,7 @@
         "figures": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+          "integrity": "sha512-UxKlfCRuCBxSXU4C6t9scbDyWZ4VlaFFdojKtzJuSkuOBQ5CNFum+zZXFwHjo+CxBC1t6zlYPgHIgFjL8ggoEQ==",
           "requires": {
             "escape-string-regexp": "^1.0.5",
             "object-assign": "^4.1.0"
@@ -18904,7 +18817,7 @@
         "file-entry-cache": {
           "version": "1.3.1",
           "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-1.3.1.tgz",
-          "integrity": "sha1-RMYepgeuS+nBQC9B9EJwy/4zT/g=",
+          "integrity": "sha512-JyVk7P0Hvw6uEAwH4Y0j+rZMvaMWvLBYRmRGAF2S6jKTycf0mMDcC7d21Y2KyrKJk3XI8YghSsk5KmRdbvg0VQ==",
           "requires": {
             "flat-cache": "^1.2.1",
             "object-assign": "^4.0.1"
@@ -18913,7 +18826,7 @@
         "inquirer": {
           "version": "0.12.0",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
-          "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=",
+          "integrity": "sha512-bOetEz5+/WpgaW4D1NYOk1aD+JCqRjqu/FwRFgnIfiP7FC/zinsrfyO1vlS3nyH/R7S0IH3BIHBu4DBIDSqiGQ==",
           "requires": {
             "ansi-escapes": "^1.1.0",
             "ansi-regex": "^2.0.0",
@@ -18933,7 +18846,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -18941,17 +18854,17 @@
         "onetime": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
-          "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k="
+          "integrity": "sha512-GZ+g4jayMqzCRMgB2sol7GiCLjKfS1PINkjmx8spcKce1LiVqcbQreXwqs2YAFXC6R03VIG28ZS31t8M866v6A=="
         },
         "progress": {
           "version": "1.1.8",
           "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
-          "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74="
+          "integrity": "sha512-UdA8mJ4weIkUBO224tIarHzuHs4HuYiJvsuGT7j/SPQiUJVjYvNDBIPa0hAorduOfjGohB/qHWRa/lrrWX/mXw=="
         },
         "restore-cursor": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
-          "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
+          "integrity": "sha512-reSjH4HuiFlxlaBaFCiS6O76ZGG2ygKoSlCsipKdaZuKSPx/+bt9mULkn4l0asVzbEfQQmXRg6Wp6gv6m0wElw==",
           "requires": {
             "exit-hook": "^1.0.0",
             "onetime": "^1.0.0"
@@ -18960,7 +18873,7 @@
         "run-async": {
           "version": "0.1.0",
           "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",
-          "integrity": "sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=",
+          "integrity": "sha512-qOX+w+IxFgpUpJfkv2oGN0+ExPs68F4sZHfaRRx4dDexAQkG83atugKVEylyT5ARees3HBbfmuvnjbrd8j9Wjw==",
           "requires": {
             "once": "^1.3.0"
           }
@@ -18968,12 +18881,12 @@
         "slice-ansi": {
           "version": "0.0.4",
           "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
-          "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU="
+          "integrity": "sha512-up04hB2hR92PgjpyU3y/eg91yIBILyjVY26NvvciY3EVVPjybkMszMpXQ9QAkcS3I5rtJBDLoTxxg+qvW8c7rw=="
         },
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -18983,17 +18896,17 @@
         "strip-json-comments": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-          "integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E="
+          "integrity": "sha512-AOPG8EBc5wAikaG1/7uFCNFJwnKOuQwFTpYBdTW6OvWHeZBQBrAA/amefHGrEiOnCPcLFZK6FUPtWVKpQVIRgg=="
         },
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
         },
         "table": {
           "version": "3.8.3",
           "resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz",
-          "integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=",
+          "integrity": "sha512-RZuzIOtzFbprLCE0AXhkI0Xi42ZJLZhCC+qkwuMLf/Vjz3maWpA8gz1qMdbmNoI9cOROT2Am/DxeRyXenrL11g==",
           "requires": {
             "ajv": "^4.7.0",
             "ajv-keywords": "^1.0.0",
@@ -19011,7 +18924,7 @@
             "is-fullwidth-code-point": {
               "version": "2.0.0",
               "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-              "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+              "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
             },
             "string-width": {
               "version": "2.1.1",
@@ -19025,7 +18938,7 @@
             "strip-ansi": {
               "version": "4.0.0",
               "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
               "requires": {
                 "ansi-regex": "^3.0.0"
               }
@@ -19104,8 +19017,7 @@
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
-      "dev": true
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
     },
     "selfsigned": {
       "version": "1.10.11",
@@ -19132,13 +19044,12 @@
     "semver-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
-      "dev": true
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
     },
     "semver-diff": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
-      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
+      "integrity": "sha512-gL8F8L4ORwsS0+iQ34yCYv///jsOq0ZL7WP55d1HnJ32o7tyFYEFQZQA22mrLIacZdU6xecaBBZ+uEiffGNyXw==",
       "requires": {
         "semver": "^5.0.3"
       }
@@ -19184,7 +19095,7 @@
     "serializerr": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/serializerr/-/serializerr-1.0.3.tgz",
-      "integrity": "sha1-EtTFqhw/+49tHcXzlaqUVVacP5E=",
+      "integrity": "sha512-yXUlHj0fjbndhACj2XWtIH5eJv7b/uadyl7CJA8b9wL5mIKm+g0/sL7rDzEmjC+k5y8ggcaP8i049F4FxA0U9Q==",
       "dev": true,
       "requires": {
         "protochain": "^1.0.5"
@@ -19193,8 +19104,7 @@
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
-      "dev": true,
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
       "requires": {
         "accepts": "~1.3.4",
         "batch": "0.6.1",
@@ -19208,8 +19118,7 @@
         "http-errors": {
           "version": "1.6.3",
           "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-          "dev": true,
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
           "requires": {
             "depd": "~1.1.2",
             "inherits": "2.0.3",
@@ -19240,13 +19149,12 @@
     "serviceworker-cache-polyfill": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz",
-      "integrity": "sha1-3hnuc77yGrPAdAo3sz22JGS6ves="
+      "integrity": "sha512-VMl1n99TbtKdO7DYNX0J9FQt1doo69V6fBniKC7o+CoJerbmFlQbsoxDa7P+b4b0tmpsdRIuzzS9sSJI7vFY2g=="
     },
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
     "set-cookie-parser": {
       "version": "2.5.0",
@@ -19268,7 +19176,7 @@
         "extend-shallow": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -19278,7 +19186,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
     },
     "setprototypeof": {
       "version": "1.1.1",
@@ -19319,7 +19227,7 @@
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
       "requires": {
         "shebang-regex": "^1.0.0"
       }
@@ -19327,12 +19235,12 @@
     "shebang-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ=="
     },
     "shell-quote": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.6.1.tgz",
-      "integrity": "sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=",
+      "integrity": "sha512-V0iQEZ/uoem3NmD91rD8XiuozJnq9/ZJnbHVXHnWqP1ucAhS3yJ7sLIIzEi57wFFcK3oi3kFUC46uSyWr35mxg==",
       "requires": {
         "array-filter": "~0.0.0",
         "array-map": "~0.0.0",
@@ -19343,7 +19251,7 @@
     "shelljs": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.6.1.tgz",
-      "integrity": "sha1-7GIRvtGSBEIIj+D3Cyg3Iy7SyKg="
+      "integrity": "sha512-B1vvzXQlJ77SURr3SIUQ/afh+LwecDKAVKE1wqkBlr2PCHoZDaF6MFD+YX1u9ddQjR4z2CKx1tdqvS2Xfs5h1A=="
     },
     "shellwords": {
       "version": "0.1.1",
@@ -19373,7 +19281,7 @@
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
+      "integrity": "sha512-meQNNykwecVxdu1RlYMKpQx4+wefIYpmxi6gexo/KAbwquJrBUrBmKYJrE8KFkVQAAVWEnwNdu21PgrD77J3xA=="
     },
     "sisteransi": {
       "version": "0.1.1",
@@ -19384,7 +19292,7 @@
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg=="
     },
     "slice-ansi": {
       "version": "1.0.0",
@@ -19413,7 +19321,7 @@
         "define-property": {
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -19421,7 +19329,7 @@
         "extend-shallow": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -19429,7 +19337,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
         }
       }
     },
@@ -19446,7 +19354,7 @@
         "define-property": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
           "requires": {
             "is-descriptor": "^1.0.0"
           }
@@ -19480,7 +19388,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "kind-of": {
           "version": "6.0.2",
@@ -19510,8 +19418,7 @@
         "faye-websocket": {
           "version": "0.10.0",
           "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
-          "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
-          "dev": true,
+          "integrity": "sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==",
           "requires": {
             "websocket-driver": ">=0.5.1"
           }
@@ -19527,7 +19434,7 @@
     "sockjs-client": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.4.tgz",
-      "integrity": "sha1-W6vjhrd15M8U51IJEUUmVAFsixI=",
+      "integrity": "sha512-hkDiI0wOmGmoUG3TSIrbDt8AhyzhePuNT3nogc5+c0amyUHu091y+jRK2h/e36olKRG+tSbhlQYHWqdsuW0CtQ==",
       "requires": {
         "debug": "^2.6.6",
         "eventsource": "0.1.6",
@@ -19607,7 +19514,7 @@
         "jsonfile": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.6"
@@ -19616,7 +19523,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
           "dev": true
         }
       }
@@ -19650,8 +19557,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
         }
       }
     },
@@ -19776,7 +19682,15 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "ssf": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.3.tgz",
+      "integrity": "sha512-pRuUdW0WwyB2doSqqjWyzwCD6PkfxpHAHdZp39K3dp/Hq7f+xfMwNAWIi16DyrRg4gg9c/RvLYkJTSawTPTm1w==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
     },
     "sshpk": {
       "version": "1.16.1",
@@ -19807,13 +19721,17 @@
     "stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.1.tgz",
-      "integrity": "sha1-1PM6tU6OOHeLDKXP07OvsS22hiA=",
-      "dev": true
+      "integrity": "sha512-KeADm3hVFxp5R3yDROVatAG51zBtWTIZ8moWjz0xJrHGWzVYZjxNoJUbYJF2gyvUqQSTGsib+CgbRb+gvemV8Q=="
+    },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ=="
     },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "integrity": "sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==",
       "requires": {
         "define-property": "^0.2.5",
         "object-copy": "^0.1.0"
@@ -19822,7 +19740,7 @@
         "define-property": {
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -19838,8 +19756,7 @@
     "stealthy-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
-      "dev": true
+      "integrity": "sha512-ZnWpYnYugiOVEY5GkcuJK1io5V8QmNYChG62gSit9pQVGErXtrKuPC55ITaVSukmMta5qpMU7vqLt2Lnni4f/g=="
     },
     "stream-browserify": {
       "version": "2.0.2",
@@ -19918,8 +19835,7 @@
     "string-length": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-      "integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
-      "dev": true,
+      "integrity": "sha512-Qka42GGrS8Mm3SZ+7cH8UXiIWI867/b/Z/feQSpQx/rbfB8UGknGEZVaUQMOUVj+soY6NpWAxily63HI1OckVQ==",
       "requires": {
         "astral-regex": "^1.0.0",
         "strip-ansi": "^4.0.0"
@@ -19934,8 +19850,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -20309,7 +20224,7 @@
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -20317,7 +20232,7 @@
     "strip-bom": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-      "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+      "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -20325,12 +20240,12 @@
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
+      "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q=="
     },
     "strip-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "integrity": "sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==",
       "requires": {
         "get-stdin": "^4.0.1"
       }
@@ -20338,7 +20253,7 @@
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="
     },
     "style-loader": {
       "version": "0.23.1",
@@ -20428,7 +20343,7 @@
     "sw-toolbox": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/sw-toolbox/-/sw-toolbox-3.6.0.tgz",
-      "integrity": "sha1-Jt8dHHA0hljk3qKIQxkUm3sxg7U=",
+      "integrity": "sha512-v/hu7KQQtospyDLpZxz7m5c7s90aj53YEkJ/A8x3mLPlSgIkZ6RKJkTjBG75P1p/fo5IeSA4TycyJg3VSu/aPw==",
       "requires": {
         "path-to-regexp": "^1.0.1",
         "serviceworker-cache-polyfill": "^4.0.0"
@@ -20477,8 +20392,7 @@
         "ajv": {
           "version": "5.5.2",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-          "dev": true,
+          "integrity": "sha512-Ajr4IcMXq/2QmMkEmSvxqfLN5zGmJ92gHXAeOXq1OekoH2rfDNsgdDoL2f7QaRCy7G/E6TpxBVdRuNraMztGHw==",
           "requires": {
             "co": "^4.6.0",
             "fast-deep-equal": "^1.0.0",
@@ -20501,14 +20415,12 @@
         "fast-deep-equal": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
-          "dev": true
+          "integrity": "sha512-fueX787WZKCV0Is4/T2cyAdM4+x1S3MXXOAhavE1ys/W42SHAPacLTQhucja22QBYrfGw50M2sRiXPtTGv9Ymw=="
         },
         "json-schema-traverse": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
-          "dev": true
+          "integrity": "sha512-4JD/Ivzg7PoW8NzdrBSr3UFwC9mHgvI7Z6z3QGBsSHgKaRTUDmyZAAKJo2UbG1kUVfS9WS8bi36N49U1xw43DA=="
         },
         "string-width": {
           "version": "2.1.1",
@@ -20523,8 +20435,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -20554,7 +20465,7 @@
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
-      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
+      "integrity": "sha512-7dPUZQGy/+m3/wjVz3ZW5dobSoD/02NxJpoXUX0WIyjfVS3l0c+b/+9phIDFA7FHzkYtwtMFgeGZ/Y8jVTeqQQ==",
       "requires": {
         "execa": "^0.7.0"
       }
@@ -20643,18 +20554,17 @@
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
     "throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
-      "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
-      "dev": true
+      "integrity": "sha512-wCVxLDcFxw7ujDxaeJC6nfl2XfHJNYs8yUYJnvMgtPEFlttP9tHSfRUv2vBe6C4hkVFPWoP1P6ZccbYjmSEkKA=="
     },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "through2": {
       "version": "2.0.5",
@@ -20701,7 +20611,7 @@
     "timed-out": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
+      "integrity": "sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA=="
     },
     "timers-browserify": {
       "version": "2.0.12",
@@ -20739,8 +20649,7 @@
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
-      "dev": true
+      "integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA=="
     },
     "to-fast-properties": {
       "version": "1.0.3",
@@ -20751,7 +20660,7 @@
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
       "requires": {
         "kind-of": "^3.0.2"
       }
@@ -20770,7 +20679,7 @@
     "to-regex-range": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
       "requires": {
         "is-number": "^3.0.0",
         "repeat-string": "^1.6.1"
@@ -20779,13 +20688,18 @@
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
           "requires": {
             "kind-of": "^3.0.2"
           }
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -20795,7 +20709,7 @@
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
-      "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk="
+      "integrity": "sha512-FclLrw8b9bMWf4QlCJuHBEVhSRsqDj6u3nIjAzPeJvgl//1hBlffdlk0MALceL14+koWEdU4ofRAXofbODxQzg=="
     },
     "tough-cookie": {
       "version": "2.3.3",
@@ -20809,8 +20723,7 @@
     "tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
-      "dev": true,
+      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
       "requires": {
         "punycode": "^2.1.0"
       },
@@ -20826,13 +20739,12 @@
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+      "integrity": "sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw=="
     },
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
-      "dev": true
+      "integrity": "sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw=="
     },
     "tsconfig-paths": {
       "version": "3.12.0",
@@ -20877,14 +20789,12 @@
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
-      "dev": true
+      "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw=="
     },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -20892,8 +20802,7 @@
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
     },
     "type": {
       "version": "1.2.0",
@@ -20903,7 +20812,7 @@
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
       "requires": {
         "prelude-ls": "~1.1.2"
       }
@@ -20955,7 +20864,7 @@
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
     },
     "typical": {
       "version": "2.6.1",
@@ -21070,7 +20979,7 @@
     "unique-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
-      "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=",
+      "integrity": "sha512-ODgiYu03y5g76A1I9Gt0/chLCzQjvzDy7DsZGsLOE/1MrF6wriEskSncj1+/C58Xk/kPZDppSctDybCwOSaGAg==",
       "requires": {
         "crypto-random-string": "^1.0.0"
       }
@@ -21078,18 +20987,17 @@
     "universalify": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
-      "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc="
+      "integrity": "sha512-MVi79HEPwGk0grI7/Kl6H51fX7wcDTe6gGoCdK22pkRG6IPsi9L6NltClWJfBLUoIE5y3pKy3SplFAs/b0G+QQ=="
     },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
-      "dev": true
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
     },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "integrity": "sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==",
       "requires": {
         "has-value": "^0.3.1",
         "isobject": "^3.0.0"
@@ -21098,7 +21006,7 @@
         "has-value": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+          "integrity": "sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==",
           "requires": {
             "get-value": "^2.0.3",
             "has-values": "^0.1.4",
@@ -21108,7 +21016,7 @@
             "isobject": {
               "version": "2.1.0",
               "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+              "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
               "requires": {
                 "isarray": "1.0.0"
               }
@@ -21118,19 +21026,19 @@
         "has-values": {
           "version": "0.1.4",
           "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+          "integrity": "sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ=="
         },
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         }
       }
     },
     "unzip-response": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
-      "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
+      "integrity": "sha512-N0XH6lqDtFH84JxptQoZYmloF4nzrQqqrAymNj+/gW60AO2AZgOcf4O/nUXJcYfyQkqvMo9lSupBZmmgvuVXlw=="
     },
     "upath": {
       "version": "1.2.0",
@@ -21158,7 +21066,7 @@
     "upper-case": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
-      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
+      "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA=="
     },
     "uri-js": {
       "version": "4.2.2",
@@ -21183,7 +21091,7 @@
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg=="
     },
     "url": {
       "version": "0.11.0",
@@ -21241,7 +21149,7 @@
     "url-parse-lax": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "integrity": "sha512-BVA4lR5PIviy2PMseNd2jbFQ+jwSwQGdJejf5ctd1rEXt0Ypd7yanUK9+lYechVlN5VaTJGsu2U/3MDDu6KgBA==",
       "requires": {
         "prepend-http": "^1.0.1"
       }
@@ -21281,7 +21189,7 @@
     "user-home": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz",
-      "integrity": "sha1-nHC/2Babwdy/SGBODwS4tJzenp8=",
+      "integrity": "sha512-KMWqdlOcjCYdtIJpicDSFBQ8nFwS2i9sslAd6f4+CBGcU4gist2REnr2fxj2YocvJFxSF3ZOHLYLVZnUxv4BZQ==",
       "requires": {
         "os-homedir": "^1.0.0"
       }
@@ -21304,7 +21212,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "util.promisify": {
       "version": "1.0.0",
@@ -21318,13 +21226,12 @@
     "utila": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
     },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
-      "dev": true
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
     "uuid": {
       "version": "8.3.2",
@@ -21359,14 +21266,12 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-      "dev": true
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -21409,7 +21314,7 @@
     "warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -21417,8 +21322,7 @@
     "watch": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",
-      "integrity": "sha1-KAlUdsbffJDJYxOJkMClQj60uYY=",
-      "dev": true,
+      "integrity": "sha512-oUcoHFG3UF2pBlHcMORAojsN09BfqSfWYWlR3eSSjUFR7eBEx53WT2HX/vZeVTTIVCGShcazb+t6IcBRCNXqvA==",
       "requires": {
         "exec-sh": "^0.2.0",
         "minimist": "^1.2.0"
@@ -21619,7 +21523,7 @@
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
       "dev": true,
       "requires": {
         "defaults": "^1.0.3"
@@ -21677,14 +21581,12 @@
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-          "dev": true
+          "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA=="
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true
+          "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ=="
         },
         "big.js": {
           "version": "5.2.2",
@@ -21713,8 +21615,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -21753,8 +21654,7 @@
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-          "dev": true,
+          "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
           "requires": {
             "debug": "^2.3.3",
             "define-property": "^0.2.5",
@@ -21768,8 +21668,7 @@
             "define-property": {
               "version": "0.2.5",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-              "dev": true,
+              "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
               "requires": {
                 "is-descriptor": "^0.1.0"
               }
@@ -21777,8 +21676,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -21786,8 +21684,7 @@
             "is-accessor-descriptor": {
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-              "dev": true,
+              "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -21795,8 +21692,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -21806,8 +21702,7 @@
             "is-data-descriptor": {
               "version": "0.1.4",
               "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-              "dev": true,
+              "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -21815,8 +21710,7 @@
                 "kind-of": {
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
+                  "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -21861,8 +21755,7 @@
             "define-property": {
               "version": "1.0.0",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-              "dev": true,
+              "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
               "requires": {
                 "is-descriptor": "^1.0.0"
               }
@@ -21870,8 +21763,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -21881,8 +21773,7 @@
         "fill-range": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -21893,8 +21784,7 @@
             "extend-shallow": {
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -21933,8 +21823,7 @@
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
+          "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -21942,8 +21831,7 @@
             "kind-of": {
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
+              "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -21953,8 +21841,7 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
+          "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "json5": {
           "version": "1.0.1",
@@ -22576,8 +22463,7 @@
         "globby": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
-          "dev": true,
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
           "requires": {
             "array-union": "^1.0.1",
             "glob": "^7.0.3",
@@ -22589,8 +22475,7 @@
             "pify": {
               "version": "2.3.0",
               "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-              "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-              "dev": true
+              "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
             }
           }
         },
@@ -22784,8 +22669,7 @@
             "strip-ansi": {
               "version": "4.0.0",
               "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-              "dev": true,
+              "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
               "requires": {
                 "ansi-regex": "^3.0.0"
               }
@@ -22887,7 +22771,7 @@
         "fs-extra": {
           "version": "0.30.0",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
-          "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
+          "integrity": "sha512-UvSPKyhMn6LEd/WpUaV9C9t3zATuqoqfWc3QdPhPLb58prN9tqYPlPWi8Krxi44loBoUzlobqZ3+8tGpxxSzwA==",
           "requires": {
             "graceful-fs": "^4.1.2",
             "jsonfile": "^2.1.0",
@@ -22899,7 +22783,7 @@
         "jsonfile": {
           "version": "2.4.0",
           "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
           "requires": {
             "graceful-fs": "^4.1.6"
           }
@@ -23024,7 +22908,7 @@
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -23034,7 +22918,7 @@
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
     },
     "worker-farm": {
       "version": "1.7.0",
@@ -23048,8 +22932,7 @@
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-      "dev": true,
+      "integrity": "sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==",
       "requires": {
         "string-width": "^1.0.1",
         "strip-ansi": "^3.0.1"
@@ -23058,8 +22941,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
+          "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -23067,8 +22949,7 @@
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
+          "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -23080,12 +22961,12 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "write": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
-      "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
+      "integrity": "sha512-CJ17OoULEKXpA5pef3qLj5AxTJ6mSt7g84he2WIskKwqFO4T97d5V7Tadl0DYDk7qyUOQD5WlUlOMChaYrhxeA==",
       "requires": {
         "mkdirp": "^0.5.1"
       }
@@ -23112,7 +22993,28 @@
     "xdg-basedir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
-      "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
+      "integrity": "sha512-1Dly4xqlulvPD3fZUQJLY+FUIeqN3N2MM3uqe4rCJftAvOjFa3jFGfctOgluGx4ahPbUCsZkmJILiP0Vi4T6lQ=="
+    },
+    "xlsx": {
+      "version": "0.10.9",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.10.9.tgz",
+      "integrity": "sha512-XZrdkPmoZt8qPpVmuKNe7EYXyckvBArwFI7SMKiqdXz9ZAXRWx6EFMKpGTyiKklPzRsm2n4cmzADinPIlPi1Jg==",
+      "requires": {
+        "adler-32": "~1.1.0",
+        "cfb": "~0.12.0",
+        "codepage": "~1.10.1",
+        "commander": "~2.11.0",
+        "crc-32": "~1.1.0",
+        "exit-on-epipe": "~1.0.1",
+        "ssf": "~0.10.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+          "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
+        }
+      }
     },
     "xml-name-validator": {
       "version": "3.0.0",
@@ -23140,7 +23042,7 @@
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
     },
     "yup": {
       "version": "0.32.11",
@@ -23182,7 +23084,7 @@
         "toposort": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
-          "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+          "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
         }
       }
     }
diff --git a/sass/common/StickySave.scss b/sass/common/StickySave.scss
deleted file mode 100644
index 87762d7a1..000000000
--- a/sass/common/StickySave.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.StickySave {
-  &__sidetop {
-    position: absolute;
-    top: -100px;
-    right: 0;
-    left: calc(100vw - 650px);
-    z-index: 1029;
-  }
-
-  .btn-toolbar { //sass-lint:disable-line class-name-format
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  &__row {
-    padding: 18px 0;
-  }
-
-  .StickySave__saveDropdown { //sass-lint:disable-line class-name-format
-    width: 102px;
-    text-align: left;
-
-    & > span { //sass-lint:disable-line class-name-format
-      margin-top: 6px;
-      margin-right: -3px;
-      float: right;
-    }
-  }
-
-  .StickySave__row--top {
-    padding: 8px 0;
-
-    // sass-lint:disable class-name-format force-element-nesting
-    .btn {
-      margin-right: 10px;
-
-      &.StickySave__actionButton { // sass-lint:disable-line nesting-depth
-        margin-right: 0;
-      }
-
-      &.StickySave__btnwide { // sass-lint:disable-line nesting-depth
-        padding: 2px 30px;
-      }
-    }
-    // sass-lint:enable class-name-format force-element-nesting
-  }
-
-  .StickySave__btnlabel {
-    display: inline-block;
-    margin-right: 10px;
-    line-height: 2em;
-    vertical-align: middle;
-
-    // sass-lint:disable class-name-format force-element-nesting
-    &.withSep {
-      padding-right: 10px;
-      border-right: 1px solid $color-ultra-grey-border;
-      color: $color-dim-grey;
-
-      span { // sass-lint:disable-line nesting-depth
-        color: $color-inactive-dark;
-      }
-    }
-    // sass-lint:enable class-name-format force-element-nesting
-  }
-
-  &__select {
-    display: inline;
-    width: auto; //sass-lint:disable-line propertyIgnoredDueToDisplay
-  }
-
-  &__actionButton--last { //sass-lint:disable-line class-name-format
-    margin-right: 0;
-    margin-left: 16px;
-  }
-}
-
-.container-pf-nav-pf-vertical { //sass-lint:disable-line class-name-format
-  .StickySave__sidetop {
-    position: fixed;
-    top: 60px;
-  }
-}
diff --git a/sass/content-template/AddContentTemplateForm.scss b/sass/content-template/AddContentTemplateForm.scss
deleted file mode 100644
index f8c3504b2..000000000
--- a/sass/content-template/AddContentTemplateForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.AddContentTemplateForm {
-  &__required-icon {
-    margin-left: 3px;
-    font-size: 8px;
-    vertical-align: super;
-  }
-
-  &__required-fields {
-    color: $color-pf-black-300;
-    font-size: 12px;
-  }
-
-  &__editassistbtn.btn { // sass-lint:disable-line class-name-format force-element-nesting
-    margin-bottom: 8px;
-  }
-}
-
-.modal-open .AddContentTemplateForm { // sass-lint:disable-line force-element-nesting class-name-format
-  &__editassistmodal.modal { // sass-lint:disable-line force-element-nesting class-name-format
-    height: 0;
-    overflow-x: unset;
-    overflow-y: unset;
-  }
-
-  &__editassistmodal .modal-title { // sass-lint:disable-line force-element-nesting class-name-format
-    cursor: move;
-  }
-}
diff --git a/sass/data-types/common/_DataTypeForm.scss b/sass/data-types/common/_DataTypeForm.scss
deleted file mode 100644
index 3ef89aa1e..000000000
--- a/sass/data-types/common/_DataTypeForm.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.DataTypeForm {
-  &__required-fields {
-    color: $color-pf-black-300;
-    font-size: 12px;
-  }
-
-  &__add {
-    margin-top: -15px;
-  }
-}
diff --git a/sass/edit-content/EditContentForm.scss b/sass/edit-content/EditContentForm.scss
deleted file mode 100644
index 52d1279c8..000000000
--- a/sass/edit-content/EditContentForm.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.EditContentForm {
-  &__content {
-    overflow-y: scroll;
-    overflow-x: hidden;
-
-    @media (min-width: 376px) and (max-width: 670px) {
-      height: 50vh;
-      overflow-x: scroll;
-    }
-
-    @media (max-width: 375px) {
-      height: 45vh;
-      overflow-x: scroll;
-    }
-  }
-
-  &__fieldset {
-    padding: 20px 0;
-  }
-
-  &__outer-fieldset {
-    border-bottom: 1px solid $color-mid-grey;
-  }
-
-  &__attributes-area {
-    margin-top: 70px;
-  }
-
-  @media only screen and (max-width: 768px) {
-    padding: 0 20px;
-
-    & {
-      .control-label { //sass-lint:disable-line class-name-format
-        float: left;
-        text-align: left;
-      }
-    }
-  }
-
-  .tab-content { //sass-lint:disable-line class-name-format
-    margin: 20px 0 40px 95px;
-  }
-
-  .ql-editor { //sass-lint:disable-line class-name-format
-    min-height: 250px;
-  }
-
-  .react-datepicker-popper { //sass-lint:disable-line class-name-format
-    z-index: 9999;
-  }
-}
diff --git a/sass/index.scss b/sass/index.scss
index 3719b1941..d304d143a 100644
--- a/sass/index.scss
+++ b/sass/index.scss
@@ -46,7 +46,6 @@
 @import "fragment/PageTemplateReferenceTable";
 @import "fragment/WidgetTypeReferenceTable";
 @import "data-types/common/DataTypeStatusIcon";
-@import "data-types/common/DataTypeForm";
 @import "data-types/list/DataTypeListTable";
 @import "pages/config/PageConfigPage";
 @import "pages/config/PageConfigGrid";
@@ -153,7 +152,6 @@
 @import "common/form/ContentTypeAttributeForm";
 @import "common/form/ToggleButtonGroup";
 @import "content-template/ContentTemplateList";
-@import "content-template/AddContentTemplateForm";
 @import "content-type/ContentTypeList";
 @import "content-type/ContentTypeReferenceStatus";
 @import "content-type/ContentTypeForm";
@@ -162,9 +160,7 @@
 @import "content-settings/ContentSettingsCropRatios";
 @import "content-settings/ContentSettingsCropRatioInput";
 @import "content-settings/ContentSettingsMetadata";
-@import "edit-content/EditContentForm";
 @import "common/RenderVersionText";
-@import "common/StickySave";
 @import "common/cancel-modal/ConfirmCancelModal";
 @import "contents/ContentsFilter";
 @import "contents/Contents";
diff --git a/sass/widgets/common/WidgetForm.scss b/sass/widgets/common/WidgetForm.scss
index f8030481d..60dc88b85 100644
--- a/sass/widgets/common/WidgetForm.scss
+++ b/sass/widgets/common/WidgetForm.scss
@@ -2,7 +2,6 @@
 .WidgetForm {
   &__body {
     display: flex;
-    height: 100%;
   }
 
   &__info {
diff --git a/sass/widgets/common/WidgetPage.scss b/sass/widgets/common/WidgetPage.scss
index e91b4b906..2e8ff1f2a 100644
--- a/sass/widgets/common/WidgetPage.scss
+++ b/sass/widgets/common/WidgetPage.scss
@@ -1,7 +1,6 @@
 // sass-lint:disable class-name-format no-important
 .WidgetPage {
-  height: 100%;
-  min-height: 700px;
+  min-height: 100%;
   margin-bottom: 0;
   background-color: $color-grey-background;
 
diff --git a/src/helpers/formikEntities.js b/src/helpers/formikEntities.js
new file mode 100644
index 000000000..d68831287
--- /dev/null
+++ b/src/helpers/formikEntities.js
@@ -0,0 +1,234 @@
+import moment from 'moment';
+import padStart from 'lodash/padStart';
+import first from 'lodash/first';
+import RenderSwitchInput from 'ui/common/formik-field/RenderSwitchInput';
+import RenderDatePickerInput from 'ui/common/formik-field/RenderDatePickerInput';
+import RenderTextAreaInput from 'ui/common/formik-field/RenderTextAreaInput';
+import RenderDateTimePickerInput from 'ui/common/formik-field/RenderDateTimePickerInput';
+import RenderRadioInput from 'ui/common/formik-field/RenderRadioInput';
+import SelectInput from 'ui/common/formik-field/SelectInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import {
+  TYPE_BOOLEAN, TYPE_THREESTATE, TYPE_CHECKBOX, TYPE_DATE, TYPE_TIMESTAMP, TYPE_LONGTEXT,
+  TYPE_HYPERTEXT, TYPE_ENUMERATOR, TYPE_ENUMERATOR_MAP, TYPE_TEXT, TYPE_MONOLIST, TYPE_LIST,
+  TYPE_COMPOSITE, TYPE_NUMBER,
+} from 'state/data-types/const';
+
+const FORM_DATE_FORMAT = 'DD/MM/YYYY';
+const API_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+const API_TIMESTAMP_FORMAT = 'YYYY-MM-DD';
+
+export const zeroFill = number => padStart(number, 2, '0');
+
+const changeDateFormat = (dateString, sourceFormat, targetFormat) =>
+  moment(dateString, sourceFormat).format(targetFormat);
+
+export const getComponentType = (component) => {
+  switch (component) {
+    case TYPE_BOOLEAN:
+    case TYPE_THREESTATE:
+      return RenderRadioInput;
+    case TYPE_CHECKBOX:
+      return RenderSwitchInput;
+    case TYPE_DATE:
+      return RenderDatePickerInput;
+    case TYPE_TIMESTAMP:
+      return RenderDateTimePickerInput;
+    case TYPE_LONGTEXT:
+    case TYPE_HYPERTEXT:
+      return RenderTextAreaInput;
+    case TYPE_ENUMERATOR:
+    case TYPE_ENUMERATOR_MAP:
+      return SelectInput;
+    default: return RenderTextInput;
+  }
+};
+
+export const getPayloadForForm = (
+  username, userProfile, selectedProfileTypeAttributes,
+  defaultLanguage, activeLanguages, selectedProfileType,
+) => {
+  const formAttr = {
+    id: username,
+    typeCode: (selectedProfileType && selectedProfileType.typeCode != null) ?
+      selectedProfileType.typeCode : userProfile.typeCode,
+    typeDescription: (selectedProfileType && selectedProfileType.typeDescription != null) ?
+      selectedProfileType.typeDescription :
+      userProfile.typeDescription,
+  };
+
+  userProfile.attributes.forEach((attr) => {
+    const {
+      code, value, values, listElements, elements, compositeelements,
+    } = attr;
+
+    const attrType =
+    selectedProfileTypeAttributes ?
+      selectedProfileTypeAttributes.find(type => type.code === code) || {} : {};
+    switch (attrType.type) {
+      case TYPE_BOOLEAN:
+      case TYPE_THREESTATE: {
+        if (value === undefined) {
+          formAttr[code] = null;
+        } else {
+          formAttr[code] = value != null ? value.toString() : value;
+        }
+        break;
+      }
+      case TYPE_DATE: {
+        formAttr[code] = value ? changeDateFormat(value, API_DATE_FORMAT, FORM_DATE_FORMAT) : null;
+        break;
+      }
+      case TYPE_TIMESTAMP: {
+        const momentDate = moment(value);
+        formAttr[`${code}_ts_hours`] = zeroFill(momentDate.hours());
+        formAttr[`${code}_ts_minutes`] = zeroFill(momentDate.minutes());
+        formAttr[`${code}_ts_seconds`] = zeroFill(momentDate.seconds());
+        formAttr[code] = value ? changeDateFormat(value, API_TIMESTAMP_FORMAT, FORM_DATE_FORMAT) :
+          null;
+        break;
+      }
+      case TYPE_HYPERTEXT:
+      case TYPE_LONGTEXT:
+      case TYPE_TEXT: {
+        if (values) {
+          formAttr[code] = values[defaultLanguage];
+        }
+        break;
+      }
+      case TYPE_MONOLIST: {
+        const childProfileType = selectedProfileTypeAttributes.find(item => item.code === code);
+        if (Array.isArray(elements) && childProfileType && childProfileType.nestedAttribute) {
+          formAttr[code] = elements.map(element =>
+            getPayloadForForm(
+              username,
+              { attributes: [element] },
+              [childProfileType.nestedAttribute],
+              defaultLanguage,
+            )[code]);
+        }
+        break;
+      }
+      case TYPE_LIST: {
+        if (listElements) {
+          formAttr[code] = Object.keys(listElements).reduce((acc, langCode) => {
+            acc[langCode] = listElements[langCode].map(item => item.value);
+            return acc;
+          }, {});
+        } else {
+          formAttr[code] = {};
+        }
+        break;
+      }
+      case TYPE_COMPOSITE: {
+        const childProfileType = selectedProfileTypeAttributes.find(item => item.code === code);
+        if (compositeelements && childProfileType) {
+          formAttr[code] = getPayloadForForm(
+            username, { attributes: compositeelements },
+            childProfileType.compositeAttributes,
+            defaultLanguage,
+          );
+        }
+        break;
+      }
+      default:
+        formAttr[code] = value;
+    }
+  });
+  return formAttr;
+};
+
+// TODO RENAME PROFILE TO ENTITY ?
+export const getPayloadForApi = (
+  profile,
+  selectedProfileType,
+  defaultLanguage, /* , languages */
+) => {
+  const attr = [];
+  Object.keys(profile).forEach((key) => {
+    if (!key.match(/^id$|^typeCode$|^typeDescription$|_ts_hours$|_ts_minutes$|_ts_seconds$/)) {
+      const attrType = selectedProfileType.find(type => type.code === key);
+      if (!attrType) return;
+      switch (attrType.type) {
+        case TYPE_BOOLEAN: {
+          const isTrue = (profile[key] === 'true');
+          attr.push({ code: key, value: isTrue });
+          break;
+        }
+        case TYPE_THREESTATE: {
+          const isTrue = (profile[key] === 'true');
+          if (profile[key] === '') {
+            attr.push({ code: key, value: null });
+          } else {
+            attr.push({ code: key, value: isTrue });
+          }
+          break;
+        }
+        case TYPE_NUMBER: {
+          attr.push({ code: key, value: Number(profile[key]) });
+          break;
+        }
+        case TYPE_DATE: {
+          const formattedDate = changeDateFormat(profile[key], FORM_DATE_FORMAT, API_DATE_FORMAT);
+          attr.push({ code: key, value: formattedDate });
+          break;
+        }
+        case TYPE_TIMESTAMP: {
+          const dateStr = changeDateFormat(profile[key], FORM_DATE_FORMAT, API_TIMESTAMP_FORMAT);
+          const hours = profile[`${key}_ts_hours`];
+          const minutes = profile[`${key}_ts_minutes`];
+          const seconds = profile[`${key}_ts_seconds`];
+          const newTimestamp = `${dateStr} ${hours}:${minutes}:${seconds}`;
+          attr.push({ code: key, value: newTimestamp });
+          break;
+        }
+        case TYPE_TEXT:
+        case TYPE_LONGTEXT:
+        case TYPE_HYPERTEXT: {
+          attr.push({ code: key, values: { [defaultLanguage]: profile[key] } });
+          break;
+        }
+        case TYPE_MONOLIST: {
+          const childProfileType = selectedProfileType.find(item => item.code === key);
+          const elements = profile[key].map(value =>
+            first(getPayloadForApi(
+              { [key]: value },
+              [childProfileType.nestedAttribute],
+              defaultLanguage,
+            ).attributes));
+
+          attr.push({ code: key, elements });
+          break;
+        }
+        case TYPE_LIST: {
+          const listElements = Object.keys(profile[key]).reduce((acc, langCode) => {
+            acc[langCode] = profile[key][langCode].map(value => ({ code: key, value }));
+            return acc;
+          }, {});
+          attr.push({ code: key, listElements });
+          break;
+        }
+        case TYPE_COMPOSITE: {
+          const childProfileType = selectedProfileType.find(item => item.code === key);
+          const compositeelements = getPayloadForApi(
+            profile[key],
+            childProfileType.compositeAttributes,
+            defaultLanguage,
+          ).attributes;
+          attr.push({ code: key, compositeelements });
+          break;
+        }
+        default:
+          attr.push({ code: key, value: profile[key] });
+      }
+    }
+  });
+
+  const newUserProfile = {
+    id: profile.id,
+    typeCode: profile.typeCode,
+    typeDescription: profile.typeDescription,
+    attributes: attr,
+  };
+  return newUserProfile;
+};
diff --git a/src/helpers/formikUtils.js b/src/helpers/formikUtils.js
index b0ab59301..6163aa3fc 100644
--- a/src/helpers/formikUtils.js
+++ b/src/helpers/formikUtils.js
@@ -1,5 +1,46 @@
-// eslint-disable-next-line import/prefer-default-export
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FieldArray, getIn } from 'formik';
+
 export const getTouchErrorByField = (fieldName, { touched, errors }) => ({
-  touched: touched[fieldName],
-  error: errors[fieldName],
+  touched: touched ? getIn(touched, fieldName) : '',
+  error: errors ? getIn(errors, fieldName) : '',
 });
+
+export const MultiField = ({
+  name,
+  component: Component,
+  validateOnChange,
+  ...otherProps
+}) => (
+  <FieldArray
+    name={name}
+    validateOnChange={validateOnChange}
+    render={arrayHelpers => (
+      <Component
+        {...arrayHelpers}
+        {...otherProps}
+      />
+    )}
+  />
+);
+
+export const convertReduxValidationsToFormikValidations = (value, validators) => {
+  let errors = null;
+  validators.forEach((validator) => {
+    const validate = validator(value);
+    if (validate) errors = validate;
+  });
+
+  return errors;
+};
+
+MultiField.propTypes = {
+  name: PropTypes.string.isRequired,
+  component: PropTypes.elementType.isRequired,
+  validateOnChange: PropTypes.bool,
+};
+
+MultiField.defaultProps = {
+  validateOnChange: true,
+};
diff --git a/src/helpers/formikValidations.js b/src/helpers/formikValidations.js
index 3bca903b6..040a82459 100644
--- a/src/helpers/formikValidations.js
+++ b/src/helpers/formikValidations.js
@@ -1,3 +1,6 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
 export const formatMessageRequired = {
   id: 'validateForm.required',
   defaultMessage: 'Required',
@@ -38,3 +41,27 @@ export const validateFragmentCodeField = intl => (value, { createError, path })
       path,
     })
 );
+export const userPassCharsValid = (value, { createError, path }) => {
+  if (!/^[0-9a-zA-Z_.]+$/i.test(value)) {
+    return createError({
+      message: <FormattedMessage id="user.validate.text" />,
+      path,
+    });
+  }
+
+  return true;
+};
+
+// eslint-disable-next-line no-control-regex
+const emailRegex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
+
+export const emailValid = (value, { createError, path }) => {
+  if (!emailRegex.test(value)) {
+    return createError({
+      message: <FormattedMessage id="validateForm.email" />,
+      path,
+    });
+  }
+
+  return true;
+};
diff --git a/src/locales/en.js b/src/locales/en.js
index 1b28feb5a..eb61184bf 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -601,7 +601,10 @@ export default {
     'user.authority.groups': 'User Group',
     'user.authority.roles': 'User Role',
     'user.authority.new': 'New authorizations',
+    'user.authority.addNew': 'Add new Authorization',
     'user.authority.noAuthYet': 'No authorizations yet',
+    'user.authority.added': 'New authorization ({groupname}, {rolename}) has been added',
+    'user.authority.success': 'Authorization has been updated',
     'user.username': 'Username',
     'user.password': 'Password',
     'user.passwordConfirm': 'Confirm password',
@@ -1576,6 +1579,7 @@ export default {
     'hub.newRegistry.apiKey': 'API Key',
     'hub.newRegistry.name.error': 'Registry name must be unique',
     'hub.newRegistry.url.error': 'Registry URL must be unique',
+    'hub.newRegistry.protocol.error': 'AppBuilder is currently running on a certified domain, hence it is only possible to add registries with an HTTPS url',
     'hub.editRegistry.alert': 'Submitting this form will replace the existing API Key. If none will be submitted, the old one will be deleted.',
     'app.filterTypesSelect.organizationName': 'Organization Name',
     'app.filterTypesSelect.bundleGroup': 'Bundle Group',
@@ -1608,7 +1612,6 @@ export default {
     'app.installFailed': 'An Error occurred and the Bundle could not be installed',
     'app.uninstallFailed': 'An Error occurred and the Bundle could not be uninstalled',
     'app.fetchBundlesFailed': 'Failed to fetch bundles from Registry',
-    'user.authority.addNew': 'Add new Authorization',
     'componentRepository.refreshBundleVersions': 'Refresh bundle available versions',
     'componentRepository.bundle.installVersionsRefreshed': 'Refreshed',
     'componentRepository.hub.epcInstalledTip': 'To correctly update the EPC menu, please refresh the AppBuilder page on your browser',
diff --git a/src/locales/it.js b/src/locales/it.js
index 3e0ddd6b6..dcb607391 100644
--- a/src/locales/it.js
+++ b/src/locales/it.js
@@ -601,7 +601,10 @@ export default {
     'user.authority.groups': 'Gruppo utenti',
     'user.authority.roles': 'Ruolo utenti',
     'user.authority.new': 'Nuove autorizzazioni',
+    'user.authority.addNew': 'Aggiungi nuova autorizzazione',
     'user.authority.noAuthYet': 'Non ci sono autorizzazione presenti',
+    'user.authority.added': 'È stata aggiunta una nuova autorizzazione ({groupname}, {rolename})',
+    'user.authority.success': 'L\'autorizzazione è stata aggiornata',
     'user.username': 'Username',
     'user.password': 'Password',
     'user.passwordConfirm': 'Conferma password',
@@ -1576,6 +1579,7 @@ export default {
     'hub.newRegistry.apiKey': 'API Key',
     'hub.newRegistry.name.error': 'Il nome del registro deve essere univoco',
     'hub.newRegistry.url.error': 'L\'URL del registro deve essere univoco',
+    'hub.newRegistry.protocol.error': 'AppBuilder si trova in un dominio certificato ed è pertanto possibile aggiungere solo registry con un url di tipo HTTPS',
     'hub.editRegistry.alert': 'Sottomettere questo modulo sostituirà l\'esistente API Key. Se non ne verrà inviata alcuna, quella precedente verrà eliminata.',
     'app.filterTypesSelect.organizationName': 'Nome dell\'organizzazione',
     'app.filterTypesSelect.bundleGroup': 'Gruppo pacchetto',
@@ -1608,7 +1612,6 @@ export default {
     'app.installFailed': 'Si è verificato un errore e non è stato possibile installare il Bundle',
     'app.uninstallFailed': 'Si è verificato un errore e non è stato possibile disinstallare il Bundle',
     'app.fetchBundlesFailed': 'Non è stato possibile recuperare la lista di Bundle dal Registry',
-    'user.authority.addNew': 'Aggiungi nuova Autorizzazione',
     'componentRepository.refreshBundleVersions': 'Aggiorna le versioni disponibili del bundle',
     'componentRepository.bundle.installVersionsRefreshed': 'Aggiornato',
     'componentRepository.hub.epcInstalledTip': 'Per aggiornare il menu EPC, aggiorna la pagina di AppBuilder nel tuo browser',
diff --git a/src/locales/pt.js b/src/locales/pt.js
index 5c9fd69bb..3484a0635 100644
--- a/src/locales/pt.js
+++ b/src/locales/pt.js
@@ -572,7 +572,10 @@ export default {
     'user.authority.groups': 'Grupo de Usuários',
     'user.authority.roles': 'Papéis de Usuários',
     'user.authority.new': 'Novas autorizações',
+    'user.authority.addNew': 'Adicionar nova autorização',
     'user.authority.noAuthYet': 'Nenhuma autorização ainda',
+    'user.authority.added': 'Nova autorização ({groupname}, {rolename}) foi adicionada',
+    'user.authority.success': 'A autorização foi atualizada',
     'user.username': 'Username',
     'user.password': 'Senha',
     'user.passwordConfirm': 'Confirme a senha',
@@ -996,6 +999,7 @@ export default {
     'hub.newRegistry.apiKey': 'API Key',
     'hub.newRegistry.name.error': 'O nome do registro deve ser único',
     'hub.newRegistry.url.error': 'O URL do registro deve ser exclusivo',
+    'hub.newRegistry.protocol.error': 'O AppBuilder está localizado em um domínio certificado e portanto é possível adicionar apenas registros com URL HTTPS',
     'hub.editRegistry.alert': 'Ao enviar este formulário, a API Key existente será substituída. Se nenhuma for enviada, a antiga será excluída.',
     'app.filterTypesSelect.organizationName': 'Nome da organização',
     'app.filterTypesSelect.bundleGroup': 'Grupo de Pacotes',
@@ -1027,7 +1031,6 @@ export default {
     'app.installFailed': 'Ocorreu um erro e o pacote não pôde ser instalado',
     'app.uninstallFailed': 'Ocorreu um erro e o pacote não pôde ser desinstalado',
     'app.fetchBundlesFailed': 'Falha ao buscar pacotes do Registro',
-    'user.authority.addNew': 'Adicionar nova Autorização',
     'componentRepository.refreshBundleVersions': 'Atualizar as versões disponíveis do pacote',
     'componentRepository.bundle.installVersionsRefreshed': 'Atualizado',
     'componentRepository.hub.epcInstalledTip': 'Para atualizar corretamente o menu EPC, atualize a página do AppBuilder em seu navegador',
diff --git a/src/state/component-repository/component-repositories/actions.js b/src/state/component-repository/component-repositories/actions.js
index 72be06d0a..871c69ebd 100644
--- a/src/state/component-repository/component-repositories/actions.js
+++ b/src/state/component-repository/component-repositories/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { addToast, addErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages';
 import { toggleLoading } from 'state/loading/actions';
 
@@ -59,15 +58,12 @@ export const fetchComponentRepositories = (page = { page: 1, pageSize: 10 }, par
   })
 );
 
-export const fetchComponentRepository = (id, initForm = false) => dispatch => (
+export const fetchComponentRepository = id => dispatch => (
   new Promise((resolve) => {
     getComponentRepository(id).then((response) => {
       response.json().then((data) => {
         if (response.ok) {
           dispatch(setSelectedComponentRepository(data.payload));
-          if (initForm) {
-            dispatch(initialize('ecrSettings', data.payload));
-          }
         } else {
           dispatch(addErrors(data.errors.map(err => err.message)));
           data.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
diff --git a/src/state/component-repository/hub/actions.js b/src/state/component-repository/hub/actions.js
index 4bf21b6a6..c47c257c9 100644
--- a/src/state/component-repository/hub/actions.js
+++ b/src/state/component-repository/hub/actions.js
@@ -223,7 +223,7 @@ export const sendDeleteRegistry = registryId => dispatch => (
 );
 
 export const sendPostRegistry = registryObject => dispatch => (
-  new Promise((resolve) => {
+  new Promise((resolve, reject) => {
     addRegistry(registryObject).then((response) => {
       response.json().then((data) => {
         if (response.ok) {
@@ -243,13 +243,13 @@ export const sendPostRegistry = registryObject => dispatch => (
       });
     }).catch((err) => {
       dispatch(addToast(err.message || DEFAULT_BE_ERROR_MESSAGE, TOAST_ERROR));
-    }).finally(() => {
+      reject();
     });
   })
 );
 
 export const sendPutRegistry = registryObject => dispatch => (
-  new Promise((resolve) => {
+  new Promise((resolve, reject) => {
     updateRegistry(registryObject).then((response) => {
       response.json().then((data) => {
         if (response.ok) {
@@ -269,6 +269,7 @@ export const sendPutRegistry = registryObject => dispatch => (
       });
     }).catch((err) => {
       dispatch(addToast(err.message || DEFAULT_BE_ERROR_MESSAGE, TOAST_ERROR));
+      reject();
     });
   })
 );
diff --git a/src/state/content-template/actions.js b/src/state/content-template/actions.js
index 5dc83d668..2a50a4452 100644
--- a/src/state/content-template/actions.js
+++ b/src/state/content-template/actions.js
@@ -1,6 +1,5 @@
 import { convertToQueryString, FILTER_OPERATORS } from '@entando/utils';
 import { addErrors, addToast, clearErrors, TOAST_ERROR } from '@entando/messages';
-import { initialize } from 'redux-form';
 import { setPage } from 'state/pagination/actions';
 import { NAMESPACE_CONTENT_TEMPLATES } from 'state/pagination/const';
 import {
@@ -144,7 +143,6 @@ export const fetchContentTemplate = id => dispatch => new Promise(resolve => (
     response.json().then((json) => {
       if (response.ok) {
         dispatch(setContentTemplate(json.payload));
-        dispatch(initialize('contenttemplateform', json.payload));
         resolve(json.payload);
       } else {
         dispatch(addErrors(json.errors.map(err => err.message)));
diff --git a/src/state/content-type/actions.js b/src/state/content-type/actions.js
index d3fac913e..b1b000d18 100644
--- a/src/state/content-type/actions.js
+++ b/src/state/content-type/actions.js
@@ -35,7 +35,6 @@ import {
   getActionModeContentTypeSelectedAttribute,
   getContentTypeAttributesIdList,
   getMonolistAttributeType,
-  getFormTypeValue,
   getSelectedAttributeType,
   getContentTypeSelectedAttributeType,
   getContentTypeSelectedAttribute,
@@ -46,7 +45,6 @@ import {
   getNewAttributeComposite,
   getSelectedContentType,
 } from 'state/content-type/selectors';
-import { initialize } from 'redux-form';
 
 import {
   TYPE_MONOLIST,
@@ -231,18 +229,12 @@ export const fetchContentTypeListPaged = (
     .catch(() => {});
 });
 
-export const fetchContentType = (
-  contentTypeCode,
-  initForm = true,
-) => dispatch => new Promise((resolve, reject) => {
+export const fetchContentType = contentTypeCode => dispatch => new Promise((resolve, reject) => {
   getContentType(contentTypeCode)
     .then((response) => {
       response.json().then((json) => {
         if (response.ok) {
           dispatch(setSelectedContentType(json.payload));
-          if (initForm) {
-            dispatch(initialize('ContentType', json.payload));
-          }
           resolve(json.payload);
         } else {
           dispatch(addErrors(json.errors.map(err => err.message)));
@@ -380,16 +372,14 @@ export const fetchContentTypeAttributeRef = (
   contentTypeAttributeCode,
   routeFunc,
   selectedAttributeType = '',
-  formName,
 ) => (dispatch, getState) => new Promise((resolve) => {
-  let typeAttribute = contentTypeAttributeCode;
+  const typeAttribute = contentTypeAttributeCode;
 
   const checkCompositeSubAttribute = selectedAttributeType === TYPE_COMPOSITE
       || (selectedAttributeType === TYPE_MONOLIST
         && getMonolistAttributeType(getState()) === TYPE_COMPOSITE);
 
   if (checkCompositeSubAttribute) {
-    typeAttribute = getFormTypeValue(getState(), formName);
     dispatch(setActionMode(MODE_ADD_ATTRIBUTE_COMPOSITE));
     const selectedAttr = getContentTypeSelectedAttribute(getState());
     dispatch(pushParentSelectedAttribute(selectedAttr));
@@ -403,32 +393,6 @@ export const fetchContentTypeAttributeRef = (
         response.json().then((json) => {
           if (response.ok) {
             dispatch(setSelectedAttributeRef(json.payload));
-            switch (actionMode) {
-              case MODE_ADD_ATTRIBUTE_COMPOSITE: {
-                dispatch(initialize(formName, {
-                  type: json.payload.code,
-                  compositeAttributeType: TYPE_COMPOSITE,
-                  code: '',
-                  name: '',
-                }));
-                break;
-              }
-              case MODE_ADD_SUB_ATTRIBUTE_MONOLIST_COMPOSITE: {
-                dispatch(initialize(formName, { type: json.payload.code }));
-                break;
-              }
-              case MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE: {
-                const nestedAttribute = {
-                  ...json.payload,
-                  type: json.payload.code,
-                  compositeAttributeType: TYPE_COMPOSITE,
-                };
-                dispatch(initialize(formName, { nestedAttribute }));
-                break;
-              }
-              default:
-                break;
-            }
             if (routeFunc && actionMode !== MODE_ADD_ATTRIBUTE_COMPOSITE) {
               routeFunc();
             }
@@ -517,7 +481,6 @@ export const fetchAttributeFromContentType = (formName, contentTypeCode, attribu
           }
           const actionMode = getActionModeContentTypeSelectedAttribute(getState());
           if (actionMode !== MODE_ADD_ATTRIBUTE_COMPOSITE) {
-            dispatch(initialize(formName, payload));
             dispatch(setSelectedContentTypeAttribute(json.payload));
             dispatch(fetchContentTypeAttributeRef(
               contentTypeCode,
@@ -585,10 +548,6 @@ export const sendPutAttributeFromContentType = (
             type === TYPE_MONOLIST
             && getIsMonolistCompositeAttributeType(getState())
           )) {
-            dispatch(initialize('attribute', {
-              ...json.payload,
-              compositeAttributeType: TYPE_COMPOSITE,
-            }));
             if (mode === MODE_ADD_ATTRIBUTE_COMPOSITE
               || mode === MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE) {
               history.push(routeConverter(ROUTE_CMS_CONTENT_TYPE_ATTRIBUTE_EDIT, {
diff --git a/src/state/content-type/selectors.js b/src/state/content-type/selectors.js
index ee1a671e0..941cfb2e5 100644
--- a/src/state/content-type/selectors.js
+++ b/src/state/content-type/selectors.js
@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect';
-import { formValueSelector } from 'redux-form';
 import {
   get,
   isEmpty,
@@ -252,7 +251,6 @@ export const getNewAttributeComposite = createSelector(
   sel => sel.newAttributeComposite,
 );
 
-export const getFormTypeValue = (state, formName) => formValueSelector(formName)(state, 'type');
 
 export const getShapeMethodsByAttributeType = (type) => {
   switch (type) {
diff --git a/src/state/data-models/actions.js b/src/state/data-models/actions.js
index cd0b65c71..b29d55f18 100644
--- a/src/state/data-models/actions.js
+++ b/src/state/data-models/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { addToast, addErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages';
 
 import { getDataModels, getDataModel, postDataModel, putDataModel, deleteDataModel } from 'api/dataModels';
@@ -38,9 +37,7 @@ export const fetchDataModelListPaged = (page = { page: 1, pageSize: 10 }, params
 export const fetchDataModel = dataModelId => dispatch => new Promise((resolve) => {
   getDataModel(dataModelId).then((response) => {
     response.json().then((json) => {
-      if (response.ok) {
-        dispatch(initialize('dataModel', json.payload));
-      } else {
+      if (!response.ok) {
         dispatch(addErrors(json.errors.map(err => err.message)));
         json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
       }
diff --git a/src/state/data-types/actions.js b/src/state/data-types/actions.js
index 4ef4f9347..f8192e30c 100644
--- a/src/state/data-types/actions.js
+++ b/src/state/data-types/actions.js
@@ -3,9 +3,8 @@ import { addToast, addErrors, clearErrors, TOAST_SUCCESS, TOAST_ERROR } from '@e
 import { routeConverter } from '@entando/utils';
 import { setPage } from 'state/pagination/actions';
 import { toggleLoading } from 'state/loading/actions';
-import { initialize } from 'redux-form';
+
 import { isUndefined } from 'lodash';
-import moment from 'moment';
 
 import {
   history,
@@ -54,7 +53,6 @@ import {
   getDataTypeSelectedAttributeType,
   getSelectedDataType,
   getSelectedAttributeType,
-  getFormTypeValue,
   getAttributeSelectFromDataType,
   getActionModeDataTypeSelectedAttribute,
   getNewAttributeComposite,
@@ -288,7 +286,6 @@ export const fetchDataType = dataTypeCode => dispatch => (
       response.json().then((json) => {
         if (response.ok) {
           dispatch(setSelectedDataType(json.payload));
-          dispatch(initialize('DataType', json.payload));
         } else {
           dispatch(addErrors(json.errors.map(err => err.message)));
           json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
@@ -319,10 +316,10 @@ export const fetchDataTypes = (page = { page: 1, pageSize: 10 }, params = '') =>
 );
 
 export const fetchDataTypeAttribute =
- (dataTypeAttributeCode, route, selectedAttributeType = '', formName) =>
+ (dataTypeAttributeCode, route, selectedAttributeType = '') =>
    (dispatch, getState) => (
      new Promise((resolve) => {
-       let typeAttribute = dataTypeAttributeCode;
+       const typeAttribute = dataTypeAttributeCode;
 
        const checkCompositeSubAttribute =
         selectedAttributeType === TYPE_COMPOSITE ||
@@ -330,7 +327,6 @@ export const fetchDataTypeAttribute =
           getMonolistAttributeType(getState()) === TYPE_COMPOSITE);
 
        if (checkCompositeSubAttribute) {
-         typeAttribute = getFormTypeValue(getState(), formName);
          dispatch(setActionMode(MODE_ADD_ATTRIBUTE_COMPOSITE));
        }
        const actionMode = getActionModeDataTypeSelectedAttribute(getState());
@@ -341,26 +337,6 @@ export const fetchDataTypeAttribute =
            response.json().then((json) => {
              if (response.ok) {
                dispatch(setSelectedAttribute(json.payload));
-               switch (actionMode) {
-                 case MODE_ADD_ATTRIBUTE_COMPOSITE: {
-                   dispatch(initialize(formName, { type: json.payload.code, code: '', name: '' }));
-                   break;
-                 }
-                 case MODE_ADD_SUB_ATTRIBUTE_MONOLIST_COMPOSITE: {
-                   dispatch(initialize(formName, { type: json.payload.code }));
-                   break;
-                 }
-                 case MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE: {
-                   const nestedAttribute = {
-                     ...json.payload,
-                     type: json.payload.code,
-                     compositeAttributeType: TYPE_COMPOSITE,
-                   };
-                   dispatch(initialize(formName, { nestedAttribute }));
-                   break;
-                 }
-                 default: break;
-               }
                if (route && actionMode !== MODE_ADD_ATTRIBUTE_COMPOSITE) {
                  history.push(routeConverter(route.route, route.params));
                }
@@ -374,53 +350,14 @@ export const fetchDataTypeAttribute =
      })
    );
 
-const fmtDateDDMMYYY = (date) => {
-  let d = new Date(date);
-  d = `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()}`;
-  return moment(d, 'DD/MM/YYYY').format('DD/MM/YYYY');
-};
-
 export const fetchAttributeFromDataType = (formName, dataTypeCode, attributeCode) =>
   (dispatch, getState) => (
     new Promise((resolve) => {
       getAttributeFromDataType(dataTypeCode, attributeCode).then((response) => {
         response.json().then((json) => {
           if (response.ok) {
-            const joinRoles = json.payload.roles ? json.payload.roles.map(role => (role.code)) : [];
-            let payload = {
-              ...json.payload,
-              joinRoles,
-              joinAllowedOptions: joinRoles,
-              compositeAttributeType: TYPE_COMPOSITE,
-            };
-            if (json.payload.type === TYPE_DATE) {
-              let {
-                rangeStartDate, rangeEndDate, equalDate,
-                rangeStartDateAttribute, rangeEndDateAttribute, equalDateAttribute,
-              } = json.payload.validationRules;
-              rangeStartDate = rangeStartDate && fmtDateDDMMYYY(rangeStartDate);
-              rangeEndDate = rangeEndDate && fmtDateDDMMYYY(rangeEndDate);
-              equalDate = equalDate && fmtDateDDMMYYY(equalDate);
-              rangeStartDateAttribute =
-              rangeStartDateAttribute && fmtDateDDMMYYY(rangeStartDateAttribute);
-              rangeEndDateAttribute =
-              rangeEndDateAttribute && fmtDateDDMMYYY(rangeEndDateAttribute);
-              equalDateAttribute = equalDateAttribute && fmtDateDDMMYYY(equalDateAttribute);
-              payload = {
-                ...payload,
-                validationRules: {
-                  rangeStartDate,
-                  rangeEndDate,
-                  equalDate,
-                  rangeStartDateAttribute,
-                  rangeEndDateAttribute,
-                  equalDateAttribute,
-                },
-              };
-            }
             const actionMode = getActionModeDataTypeSelectedAttribute(getState());
             if (actionMode !== MODE_ADD_ATTRIBUTE_COMPOSITE) {
-              dispatch(initialize(formName, payload));
               dispatch(setSelectedAttributeDataType(json.payload));
               dispatch(fetchDataTypeAttribute(getSelectedAttributeType(getState())));
             }
@@ -484,7 +421,6 @@ export const sendPutAttributeFromDataType = (
           dispatch(setSelectedAttributeDataType(json.payload));
           const { type, code } = attributeObject;
           if (type === TYPE_COMPOSITE) {
-            dispatch(initialize('attribute', { ...json.payload, compositeAttributeType: TYPE_COMPOSITE }));
             history.push(routeConverter(
               ROUTE_DATA_TYPE_ATTRIBUTE_EDIT,
               { entityCode, attributeCode: code },
diff --git a/src/state/data-types/selectors.js b/src/state/data-types/selectors.js
index 9d2da034e..855c289a0 100644
--- a/src/state/data-types/selectors.js
+++ b/src/state/data-types/selectors.js
@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect';
-import { formValueSelector } from 'redux-form';
 import { get, isEmpty, isUndefined } from 'lodash';
 import {
   TYPE_MONOLIST,
@@ -115,4 +114,3 @@ export const getIsMonolistComposteAttributeType =
 export const getNewAttributeComposite =
     createSelector([getSelectedDataType], sel => sel.newAttributeComposite);
 
-export const getFormTypeValue = (state, formName) => formValueSelector(formName)(state, 'type');
diff --git a/src/state/edit-content/actions.js b/src/state/edit-content/actions.js
index 8adef75ec..657f9e570 100644
--- a/src/state/edit-content/actions.js
+++ b/src/state/edit-content/actions.js
@@ -1,5 +1,4 @@
 import { addErrors, addToast, clearErrors, TOAST_ERROR } from '@entando/messages';
-import { initialize, formValueSelector, change } from 'redux-form';
 import moment from 'moment';
 import { isEmpty, pickBy, isObject, cloneDeep } from 'lodash';
 
@@ -60,15 +59,6 @@ export const fetchContent = params => dispatch => new Promise((resolve, reject)
           const content = json.payload;
           dispatch(setContentEntry(content));
           dispatch(setJoinedCategories(content.categories));
-          const {
-            mainGroup, groups, description, status,
-          } = content;
-          dispatch(initialize('editcontentform', {
-            mainGroup,
-            groups,
-            description,
-            ...(status !== 'PUBLIC' && { status }),
-          }));
         } else {
           dispatch(addErrors(json.errors.map(err => err.message)));
           reject();
@@ -105,9 +95,7 @@ export const copyAttributeEngValue = (attribute, attributeType) => (dispatch, ge
   }
 };
 
-export const duplicateEngFieldValues = () => (dispatch, getState) => {
-  const state = getState();
-
+export const duplicateEngFieldValues = () => (dispatch) => {
   const traverseAttributes = (attributeValues, attributeList) => {
     const mappedAttributes = attributeList.reduce(
       (curr, attribute) => ({ ...curr, [attribute.code]: attribute }),
@@ -143,17 +131,6 @@ export const duplicateEngFieldValues = () => (dispatch, getState) => {
       }
     });
   };
-
-  const mainAttributeValues = formValueSelector('editcontentform')(state, 'attributes');
-
-  dispatch(change(
-    'editcontentform',
-    'attributes',
-    traverseAttributes(
-      mainAttributeValues,
-      getSelectedContentTypeAttributes(state),
-    ),
-  ));
 };
 
 export const setOwnerGroupDisable = disabled => ({
diff --git a/src/state/email-config/actions.js b/src/state/email-config/actions.js
index 22c9dbd72..e885e2b42 100644
--- a/src/state/email-config/actions.js
+++ b/src/state/email-config/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { addToast, addErrors, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
 
 import {
@@ -12,7 +11,7 @@ import {
   getEmailSender,
   putEmailSender,
 } from 'api/emailConfig';
-import { SET_EMAIL_SENDERS, REMOVE_EMAIL_SENDER } from 'state/email-config/types';
+import { SET_EMAIL_SENDERS, REMOVE_EMAIL_SENDER, SET_SMTP_SERVER, SET_SELECTED_SENDER } from 'state/email-config/types';
 import { history, ROUTE_EMAIL_CONFIG_SENDERS } from 'app-init/router';
 
 export const setEmailSenders = emailSenders => ({
@@ -20,18 +19,27 @@ export const setEmailSenders = emailSenders => ({
   payload: emailSenders,
 });
 
+export const setSmtpServer = data => ({
+  type: SET_SMTP_SERVER,
+  payload: data,
+});
+
 export const removeEmailSender = code => ({
   type: REMOVE_EMAIL_SENDER,
   payload: code,
 });
 
+export const setSelectedSender = emailSender => ({
+  type: SET_SELECTED_SENDER,
+  payload: emailSender,
+});
+
 export const fetchSMTPServerSettings = () => async (dispatch) => {
   try {
     const response = await getSMTPServerSettings();
     const json = await response.json();
     if (response.ok) {
-      const smtpServerSettings = json.payload;
-      dispatch(initialize('emailConfig', smtpServerSettings));
+      dispatch(setSmtpServer(json.payload));
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
       json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
@@ -46,7 +54,6 @@ export const saveEmailConfig = emailConfig => async (dispatch) => {
     const response = await putSMTPServerSettings(emailConfig);
     const json = await response.json();
     if (response.ok) {
-      dispatch(initialize('emailConfig', emailConfig));
       dispatch(addToast({ id: 'emailConfig.saveSuccessful' }, TOAST_SUCCESS));
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
@@ -141,7 +148,7 @@ export const fetchEmailSender = code => async (dispatch) => {
     const response = await getEmailSender(code);
     const json = await response.json();
     if (response.ok) {
-      dispatch(initialize('emailSender', json.payload));
+      dispatch(setSelectedSender(json.payload));
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
       json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
diff --git a/src/state/email-config/reducer.js b/src/state/email-config/reducer.js
index efd8debd0..e5f4e5382 100644
--- a/src/state/email-config/reducer.js
+++ b/src/state/email-config/reducer.js
@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 
-import { REMOVE_EMAIL_SENDER, SET_EMAIL_SENDERS } from 'state/email-config/types';
+import { REMOVE_EMAIL_SENDER, SET_EMAIL_SENDERS, SET_SMTP_SERVER, SET_SELECTED_SENDER } from 'state/email-config/types';
 
 const senders = (state = [], action = {}) => {
   switch (action.type) {
@@ -13,6 +13,37 @@ const senders = (state = [], action = {}) => {
   }
 };
 
+export const initialState = {
+  active: false,
+  debugMode: false,
+  host: '',
+  port: '',
+  protocol: '',
+  checkServerIdentity: false,
+  timeout: '',
+  username: '',
+  password: '',
+};
+
+const smtpServer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    case SET_SMTP_SERVER:
+      return action.payload;
+    default:
+      return state;
+  }
+};
+const selectedSender = (state = {}, action = {}) => {
+  switch (action.type) {
+    case SET_SELECTED_SENDER:
+      return action.payload;
+    default:
+      return state;
+  }
+};
+
 export default combineReducers({
   senders,
+  smtpServer,
+  selectedSender,
 });
diff --git a/src/state/email-config/selectors.js b/src/state/email-config/selectors.js
new file mode 100644
index 000000000..ce10986c1
--- /dev/null
+++ b/src/state/email-config/selectors.js
@@ -0,0 +1,2 @@
+export const getSmtpServer = state => state.emailConfig.smtpServer;
+export const getSelectedSender = state => state.emailConfig.selectedSender;
diff --git a/src/state/email-config/types.js b/src/state/email-config/types.js
index d1ea4eae9..438d94e43 100644
--- a/src/state/email-config/types.js
+++ b/src/state/email-config/types.js
@@ -1,2 +1,4 @@
 export const SET_EMAIL_SENDERS = 'emailConfig/set-email-sender-list';
 export const REMOVE_EMAIL_SENDER = 'emailConfig/remove-email-sender';
+export const SET_SMTP_SERVER = 'emailConfig/set-smtp-server';
+export const SET_SELECTED_SENDER = 'emailConfig/set-selected-sender';
diff --git a/src/state/file-browser/actions.js b/src/state/file-browser/actions.js
index fbd8b8c73..9c5a87332 100644
--- a/src/state/file-browser/actions.js
+++ b/src/state/file-browser/actions.js
@@ -1,5 +1,4 @@
 import { addToast, addErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages';
-import { initialize } from 'redux-form';
 
 import { getFileBrowser, getFile, postFile, putFile, postCreateFolder, deleteFolder, deleteFile } from 'api/fileBrowser';
 import { toggleLoading } from 'state/loading/actions';
@@ -54,9 +53,7 @@ export const fetchFile = (filename, extensions = ['.txt']) => (dispatch, getStat
       const queryString = `?protectedFolder=${protectedFolder === null ? false : protectedFolder}&currentPath=${currentPath}/${filename}`;
       getFile(queryString).then((response) => {
         response.json().then((json) => {
-          if (response.ok) {
-            dispatch(initialize('CreateTextFileForm', { content: window.atob(json.payload.base64) }));
-          } else {
+          if (!response.ok) {
             dispatch(addErrors(json.errors.map(e => e.message)));
             json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
             history.push(ROUTE_FILE_BROWSER);
diff --git a/src/state/forms/selectors.js b/src/state/forms/selectors.js
deleted file mode 100644
index 76db7fbb9..000000000
--- a/src/state/forms/selectors.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { getFormValues } from 'redux-form';
-
-export const getPageForm = getFormValues('page');
-export const getPageTemplateForm = getFormValues('pageTemplate');
-export const getUserProfileForm = getFormValues('UserProfile');
diff --git a/src/state/fragments/actions.js b/src/state/fragments/actions.js
index e6dcfa3d4..8e66c6514 100644
--- a/src/state/fragments/actions.js
+++ b/src/state/fragments/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { addToast, addErrors, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
 import { routeConverter } from '@entando/utils';
 
@@ -14,7 +13,10 @@ import {
 import { setPage } from 'state/pagination/actions';
 import { toggleLoading } from 'state/loading/actions';
 import { history, ROUTE_FRAGMENT_EDIT, ROUTE_FRAGMENT_LIST } from 'app-init/router';
-import { SET_SELECTED, SET_PLUGINS, SET_FRAGMENTS, REMOVE_FRAGMENT, SET_FILTERS } from 'state/fragments/types';
+import {
+  SET_SELECTED, SET_PLUGINS, SET_FRAGMENTS,
+  REMOVE_FRAGMENT, SET_FILTERS, SET_FRAGMENT_SETTINGS,
+} from 'state/fragments/types';
 import { CONTINUE_SAVE_TYPE, FORM_MODE_CLONE, FORM_MODE_EDIT } from 'state/fragments/const';
 
 export const setSelectedFragment = fragment => ({
@@ -59,6 +61,11 @@ export const removeFragment = fragmentCode => ({
   },
 });
 
+export const setFragmentSettings = settings => ({
+  type: SET_FRAGMENT_SETTINGS,
+  payload: settings,
+});
+
 // thunks
 export const fetchFragment = (fragmentCode, mode = FORM_MODE_EDIT) => dispatch =>
   new Promise((resolve) => {
@@ -147,7 +154,7 @@ export const fetchFragmentSettings = () => dispatch =>
     getFragmentSettings().then((response) => {
       response.json().then((json) => {
         if (response.ok) {
-          dispatch(initialize('fragmentSettings', json.payload));
+          dispatch(setFragmentSettings(json.payload));
         } else {
           dispatch(addErrors(json.errors.map(err => err.message)));
           json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
@@ -162,7 +169,7 @@ export const updateFragmentSettings = settings => dispatch =>
     putFragmentSettings(settings).then((response) => {
       response.json().then((json) => {
         if (response.ok) {
-          dispatch(initialize('fragmentSettings', json.payload));
+          dispatch(setFragmentSettings(json.payload));
           dispatch(addToast(
             { id: 'fragment.settings.alert.success' },
             TOAST_SUCCESS,
diff --git a/src/state/fragments/reducer.js b/src/state/fragments/reducer.js
index 1eb1bc7af..9eee695bb 100644
--- a/src/state/fragments/reducer.js
+++ b/src/state/fragments/reducer.js
@@ -1,6 +1,9 @@
 
 import { combineReducers } from 'redux';
-import { SET_SELECTED, SET_FRAGMENTS, SET_PLUGINS, REMOVE_FRAGMENT, SET_FILTERS } from 'state/fragments/types';
+import {
+  SET_SELECTED, SET_FRAGMENTS, SET_PLUGINS,
+  REMOVE_FRAGMENT, SET_FILTERS, SET_FRAGMENT_SETTINGS,
+} from 'state/fragments/types';
 
 const selected = (state = {}, action = {}) => {
   switch (action.type) {
@@ -42,9 +45,19 @@ const filters = (state = '', action = {}) => {
   }
 };
 
+const settings = (state = {}, action = {}) => {
+  switch (action.type) {
+    case SET_FRAGMENT_SETTINGS: {
+      return action.payload;
+    }
+    default: return state;
+  }
+};
+
 export default combineReducers({
   selected,
   list,
   plugins,
   filters,
+  settings,
 });
diff --git a/src/state/fragments/selectors.js b/src/state/fragments/selectors.js
index 31096abd9..d3531741a 100644
--- a/src/state/fragments/selectors.js
+++ b/src/state/fragments/selectors.js
@@ -6,6 +6,7 @@ import { getListWidget } from 'state/widgets/selectors';
 export const getFragments = state => state.fragments;
 export const getWidgetTypes = state => state.fragments.widgetTypes;
 export const getPlugins = state => state.fragments.plugins;
+export const getFragmentSettings = state => state.fragments.settings;
 
 export const getFragmentList = createSelector(
   getFragments,
diff --git a/src/state/fragments/types.js b/src/state/fragments/types.js
index e620a7ca7..887ded669 100644
--- a/src/state/fragments/types.js
+++ b/src/state/fragments/types.js
@@ -3,3 +3,4 @@ export const SET_SELECTED = 'fragment/set-selected-fragment';
 export const SET_PLUGINS = 'fragment/set-plugins';
 export const SET_FILTERS = 'fragment/set-filters';
 export const REMOVE_FRAGMENT = 'fragment/remove-fragment';
+export const SET_FRAGMENT_SETTINGS = 'fragment/set-fragment-settings';
diff --git a/src/state/labels/actions.js b/src/state/labels/actions.js
index be8349d53..cd42d9b35 100644
--- a/src/state/labels/actions.js
+++ b/src/state/labels/actions.js
@@ -1,11 +1,10 @@
-import { initialize } from 'redux-form';
 import { addToast, addErrors, TOAST_ERROR } from '@entando/messages';
 import { convertToQueryString, FILTER_OPERATORS } from '@entando/utils';
 
 import { getLabels, getLabel, putLabel, postLabel, deleteLabel } from 'api/labels';
 import { setPage } from 'state/pagination/actions';
 import { toggleLoading } from 'state/loading/actions';
-import { SET_LABELS, UPDATE_LABEL, REMOVE_LABEL, SET_ACTIVE_TAB, SET_LABEL_FILTERS } from 'state/labels/types';
+import { SET_LABELS, UPDATE_LABEL, REMOVE_LABEL, SET_ACTIVE_TAB, SET_LABEL_FILTERS, SET_SELECTED_LABEL, SET_SEARCH_TERM } from 'state/labels/types';
 import { history, ROUTE_LABELS_AND_LANGUAGES } from 'app-init/router';
 import { getLabelFilters } from 'state/labels/selectors';
 
@@ -42,6 +41,17 @@ export const setLabelFilters = filters => ({
   type: SET_LABEL_FILTERS,
   payload: filters,
 });
+export const setSelectedLabel = label => ({
+  type: SET_SELECTED_LABEL,
+  payload: label,
+});
+
+export const setSearchTerm = searchTerm => ({
+  type: SET_SEARCH_TERM,
+  payload: {
+    searchTerm,
+  },
+});
 
 // thunks
 
@@ -77,7 +87,7 @@ export const fetchLabel = labelkey => dispatch => (
     getLabel(labelkey).then((response) => {
       response.json().then((json) => {
         if (response.ok) {
-          dispatch(initialize('label', json.payload));
+          dispatch(setSelectedLabel(json.payload));
         } else if (json && json.errors) {
           dispatch(addErrors(json.errors.map(err => err.message)));
           json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
diff --git a/src/state/labels/reducer.js b/src/state/labels/reducer.js
index 57977d936..8d1f65fa1 100644
--- a/src/state/labels/reducer.js
+++ b/src/state/labels/reducer.js
@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 
-import { SET_LABELS, UPDATE_LABEL, REMOVE_LABEL, SET_ACTIVE_TAB, SET_LABEL_FILTERS } from 'state/labels/types';
+import { SET_LABELS, UPDATE_LABEL, REMOVE_LABEL, SET_ACTIVE_TAB, SET_LABEL_FILTERS, SET_SELECTED_LABEL, SET_SEARCH_TERM } from 'state/labels/types';
 
 const map = (state = {}, action = {}) => {
   switch (action.type) {
@@ -54,10 +54,29 @@ const filters = (state = null, action = {}) => {
       return state;
   }
 };
+const selected = (state = null, action = {}) => {
+  switch (action.type) {
+    case SET_SELECTED_LABEL: {
+      return action.payload;
+    }
+    default: return state;
+  }
+};
+
+const searchTerm = (state = null, action = {}) => {
+  switch (action.type) {
+    case SET_SEARCH_TERM: {
+      return action.payload.searchTerm;
+    }
+    default: return state;
+  }
+};
 
 export default combineReducers({
   map,
   list,
   activeTab,
   filters,
+  selected,
+  searchTerm,
 });
diff --git a/src/state/labels/selectors.js b/src/state/labels/selectors.js
index 6fa138ada..818afe2d6 100644
--- a/src/state/labels/selectors.js
+++ b/src/state/labels/selectors.js
@@ -5,12 +5,18 @@ export const getLabels = state => state.labels;
 export const getLabelsMap = state => state.labels.map;
 export const getLabelsIdList = state => state.labels.list;
 export const getLabelFilters = state => state.labels.filters;
+export const getSelectedLabel = state => state.labels.selected;
 
 export const getActiveTab = createSelector(
   getLabels,
   labels => (labels.activeTab),
 );
 
+export const getSearchTerm = createSelector(
+  getLabels,
+  labels => (labels.searchTerm),
+);
+
 export const getLabelsList = createSelector(
   [getLabelsMap, getLabelsIdList],
   (map, idList) => idList.map(id => (map[id])),
diff --git a/src/state/labels/types.js b/src/state/labels/types.js
index c50dbf518..c71454e9b 100644
--- a/src/state/labels/types.js
+++ b/src/state/labels/types.js
@@ -1,6 +1,8 @@
 
 export const SET_LABELS = 'labels/set-labels';
+export const SET_SELECTED_LABEL = 'labels/set-selected-label';
 export const UPDATE_LABEL = 'labels/update-label';
 export const REMOVE_LABEL = 'labels/remove-label';
 export const SET_ACTIVE_TAB = 'labels/active-tab';
 export const SET_LABEL_FILTERS = 'labels/set-filters';
+export const SET_SEARCH_TERM = 'labels/set-search-term';
diff --git a/src/state/page-config/actions.js b/src/state/page-config/actions.js
index a32781303..6cd72466c 100644
--- a/src/state/page-config/actions.js
+++ b/src/state/page-config/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { routeConverter } from '@entando/utils';
 import { addToast, addErrors, clearErrors, TOAST_ERROR } from '@entando/messages';
 
@@ -278,7 +277,6 @@ export const editWidgetConfig = (frameId, pageCode) =>
       const isConfigurableWidget = widget && widget.hasConfig;
 
       if (isConfigurableWidget || pageConfigItem.config) {
-        dispatch(initialize('widgetConfigForm', pageConfigItem.config));
         history.push(routeConverter(
           ROUTE_WIDGET_CONFIG,
           { pageCode, widgetCode: pageConfigItem.code, framePos: frameId },
diff --git a/src/state/page-templates/selectors.js b/src/state/page-templates/selectors.js
index a95766c34..26852958d 100644
--- a/src/state/page-templates/selectors.js
+++ b/src/state/page-templates/selectors.js
@@ -1,8 +1,12 @@
 import { createSelector } from 'reselect';
 import { get } from 'lodash';
 
-import { validatePageTemplate, getCellMap, convertPageTemplateForm } from 'state/page-templates/helpers';
-import { getPageTemplateForm } from 'state/forms/selectors';
+import {
+  // validatePageTemplate,
+  getCellMap,
+  // convertPageTemplateForm
+} from 'state/page-templates/helpers';
+// import { getPageTemplateForm } from 'state/forms/selectors';
 import { getLocale } from 'state/locale/selectors';
 
 export const getPageTemplates = state => state.pageTemplates;
@@ -45,27 +49,6 @@ export const getSelectedPageTemplateDefaultConfig = createSelector(
   },
 );
 
-export const getFormPageTemplate = createSelector(
-  [getPageTemplateForm],
-  pageTemplateForm => convertPageTemplateForm(pageTemplateForm),
-);
-
-export const getPageTemplateFormCellMap = createSelector(
-  [getFormPageTemplate],
-  getCellMap,
-);
-
-export const getPageTemplateFormErrors = createSelector(
-  [getFormPageTemplate],
-  (formPageTemplate) => {
-    const errors = validatePageTemplate(formPageTemplate);
-    if (errors && errors.length) {
-      return errors;
-    }
-    return [];
-  },
-);
-
 export const getSelectedPageTemplatePageRefs = createSelector(
   [getSelectedPageTemplate],
   pageTemplate => pageTemplate && pageTemplate.pageReferences,
diff --git a/src/state/pages/actions.js b/src/state/pages/actions.js
index bd0cd9523..c5811f69e 100644
--- a/src/state/pages/actions.js
+++ b/src/state/pages/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { addToast, addErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages';
 
 import { setPage } from 'state/pagination/actions';
@@ -20,8 +19,7 @@ import {
   ADD_PAGES, SET_PAGE_LOADING, SET_PAGE_LOADED, SET_PAGE_EXPANDED, SET_PAGE_PARENT, SET_VIEWPAGES,
   MOVE_PAGE, SET_FREE_PAGES, SET_SELECTED_PAGE, REMOVE_PAGE, UPDATE_PAGE, SEARCH_PAGES,
   CLEAR_SEARCH, SET_REFERENCES_SELECTED_PAGE, CLEAR_TREE, BATCH_TOGGLE_EXPANDED, COLLAPSE_ALL,
-  SET_DASHBOARD_PAGES,
-  SET_VIRTUAL_ROOT,
+  SET_DASHBOARD_PAGES, SET_VIRTUAL_ROOT, SET_EDIT_PAGE,
 } from 'state/pages/types';
 import { HOMEPAGE_CODE, PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED, SEO_ENABLED } from 'state/pages/const';
 import { history, ROUTE_PAGE_TREE, ROUTE_PAGE_CLONE, ROUTE_PAGE_ADD } from 'app-init/router';
@@ -40,15 +38,6 @@ const INVALID_PAGE_POSITION_STATUS_CODE = 422;
 const INVALID_PAGE_CHILD_POSITION_ERROR = { id: 'page.invalidChildPositionError' };
 const INVALID_PAGE_CHILD_POSITION_STATUS_CODE = 400;
 
-const RESET_FOR_CLONE = {
-  code: '',
-  titles: '',
-  parentCode: '',
-  fullTitles: '',
-  fullPath: '',
-  status: '',
-  references: {},
-};
 
 const noopPromise = arg => Promise.resolve(arg);
 
@@ -176,6 +165,13 @@ export const setVirtualRoot = virtualRoot => ({
   payload: virtualRoot,
 });
 
+export const setEditPage = page => (
+  {
+    type: SET_EDIT_PAGE,
+    payload: page,
+  }
+);
+
 const wrapApiCall = apiFunc => (...args) => async (dispatch) => {
   const response = await apiFunc(...args);
   const json = await response.json();
@@ -344,7 +340,7 @@ const movePage = (pageCode, siblingCode, moveAbove) => (dispatch, getState) => {
 export const movePageAbove = (pageCode, siblingCode) => movePage(pageCode, siblingCode, true);
 export const movePageBelow = (pageCode, siblingCode) => movePage(pageCode, siblingCode, false);
 
-export const sendPostPage = pageData => dispatch => new Promise(async (resolve) => {
+export const sendPostPage = pageData => dispatch => new Promise(async (resolve, reject) => {
   try {
     const { seoData, seo } = pageData;
     const seoPayload = seoData ? {
@@ -365,11 +361,11 @@ export const sendPostPage = pageData => dispatch => new Promise(async (resolve)
       resolve(response);
     } else if (response && response.status === INVALID_PAGE_POSITION_STATUS_CODE) {
       dispatch(addToast(INVALID_PAGE_POSITION_ERROR, TOAST_ERROR));
-      resolve();
+      reject();
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
       json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
-      resolve();
+      reject();
     }
   } catch (e) {
     const { details, defaultMessage } = e;
@@ -377,46 +373,47 @@ export const sendPostPage = pageData => dispatch => new Promise(async (resolve)
     const combinedErrors = [defaultMessage, detailMessage].join(' - ');
     dispatch(addErrors([combinedErrors]));
     dispatch(addToast(combinedErrors, TOAST_ERROR));
-    resolve();
+    reject();
   }
 });
 
-export const sendClonePage = (pageCode, pageData) => dispatch => new Promise(async (resolve) => {
-  try {
-    const { titles, parentCode, code } = pageData;
+export const sendClonePage = (pageCode, pageData) => dispatch =>
+  new Promise(async (resolve, reject) => {
+    try {
+      const { titles, parentCode, code } = pageData;
 
-    const requestBody = {
-      newPageCode: code,
-      parentCode,
-      titles,
-    };
+      const requestBody = {
+        newPageCode: code,
+        parentCode,
+        titles,
+      };
 
-    const response = await postClonePage(pageCode, requestBody);
+      const response = await postClonePage(pageCode, requestBody);
 
-    const json = await response.json();
-    if (response.ok) {
-      dispatch(addToast({ id: 'pages.created' }, TOAST_SUCCESS));
-      dispatch(addPages([json.payload]));
-      resolve(response);
-    } else if (response && response.status === INVALID_PAGE_POSITION_STATUS_CODE) {
-      dispatch(addToast(INVALID_PAGE_POSITION_ERROR, TOAST_ERROR));
-      resolve();
-    } else {
-      dispatch(addErrors(json.errors.map(e => e.message)));
-      json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
-      resolve();
-    }
-  } catch (e) {
-    const { details, defaultMessage } = e;
-    if (details && defaultMessage) {
-      const detailMessage = details.map(er => er.message).join('; ');
-      const combinedErrors = [defaultMessage, detailMessage].join(' - ');
-      dispatch(addErrors([combinedErrors]));
-      dispatch(addToast(combinedErrors, TOAST_ERROR));
+      const json = await response.json();
+      if (response.ok) {
+        dispatch(addToast({ id: 'pages.created' }, TOAST_SUCCESS));
+        dispatch(addPages([json.payload]));
+        resolve(response);
+      } else if (response && response.status === INVALID_PAGE_POSITION_STATUS_CODE) {
+        dispatch(addToast(INVALID_PAGE_POSITION_ERROR, TOAST_ERROR));
+        reject();
+      } else {
+        dispatch(addErrors(json.errors.map(e => e.message)));
+        json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
+        reject();
+      }
+    } catch (e) {
+      const { details, defaultMessage } = e;
+      if (details && defaultMessage) {
+        const detailMessage = details.map(er => er.message).join('; ');
+        const combinedErrors = [defaultMessage, detailMessage].join(' - ');
+        dispatch(addErrors([combinedErrors]));
+        dispatch(addToast(combinedErrors, TOAST_ERROR));
+      }
+      reject();
     }
-    resolve();
-  }
-});
+  });
 
 export const fetchFreePages = () => async (dispatch) => {
   try {
@@ -433,13 +430,8 @@ export const fetchFreePages = () => async (dispatch) => {
   }
 };
 
-export const clonePage = (page, redirectTo = null) => async (dispatch) => {
+export const clonePage = (page, redirectTo = null) => async () => {
   try {
-    const json = await fetchPage(page.code)(dispatch);
-    dispatch(initialize('page', {
-      ...json.payload,
-      ...RESET_FOR_CLONE,
-    }));
     let pageCloneUrl = `${ROUTE_PAGE_CLONE}?pageCode=${page.code}`;
     if (redirectTo) {
       pageCloneUrl += `&redirectTo=${redirectTo}`;
@@ -456,9 +448,7 @@ export const fetchPageSettings = () => async (dispatch) => {
     const response = await getPageSettings();
     const json = await response.json();
     dispatch(toggleLoading('pageSettings'));
-    if (response.ok) {
-      dispatch(initialize('settings', json.payload));
-    } else {
+    if (!response.ok) {
       dispatch(addErrors(json.errors.map(e => e.message)));
       json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
     }
@@ -505,7 +495,6 @@ export const sendPutPage = pageData => dispatch =>
       if (response.ok) {
         dispatch(addToast({ id: 'pages.updated' }, TOAST_SUCCESS));
         dispatch(updatePage(json.payload));
-        dispatch(initialize('pageEdit', json.payload));
         resolve();
       } else {
         dispatch(addErrors(json.errors.map(e => e.message)));
@@ -560,7 +549,7 @@ export const fetchPageForm = pageCode => (dispatch, getState) => fetchPageInfo(p
       ...response.payload,
       titles,
     };
-    dispatch(initialize('pageEdit', formValues));
+    dispatch(setEditPage(formValues));
   })
   .catch(() => {});
 
@@ -629,11 +618,9 @@ export const fetchSearchPages = (page = { page: 1, pageSize: 10 }, params = '')
 
 export const clearSearchPage = () => (dispatch) => {
   dispatch(clearSearch());
-  dispatch(initialize('pageSearch', {}));
 };
 
-export const initPageForm = (pageData, redirectTo = null) => (dispatch) => {
-  dispatch(initialize('page', pageData));
+export const initPageForm = (pageData, redirectTo = null) => () => {
   let pageAddUrl = `${ROUTE_PAGE_ADD}?parentCode=${pageData.parentCode}`;
   if (redirectTo) {
     pageAddUrl += `&redirectTo=${redirectTo}`;
diff --git a/src/state/pages/reducer.js b/src/state/pages/reducer.js
index a6896522c..48fecf8c6 100644
--- a/src/state/pages/reducer.js
+++ b/src/state/pages/reducer.js
@@ -19,6 +19,7 @@ import {
   COLLAPSE_ALL,
   SET_DASHBOARD_PAGES,
   SET_VIRTUAL_ROOT,
+  SET_EDIT_PAGE,
 } from 'state/pages/types';
 
 // creates a map from an array
@@ -294,6 +295,14 @@ export const virtualRoot = (state = false, action = {}) => {
   }
 };
 
+export const editPage = (state = {}, action = {}) => {
+  switch (action.type) {
+    case SET_EDIT_PAGE:
+      return action.payload;
+    default: return state;
+  }
+};
+
 export default combineReducers({
   map: reducer,
   childrenMap,
@@ -305,4 +314,5 @@ export default combineReducers({
   search,
   dashboard,
   virtualRoot,
+  editPage,
 });
diff --git a/src/state/pages/selectors.js b/src/state/pages/selectors.js
index f7022afcf..e502ed8bf 100644
--- a/src/state/pages/selectors.js
+++ b/src/state/pages/selectors.js
@@ -17,6 +17,7 @@ export const getSelectedPage = state => state.pages.selected;
 export const getSearchPagesRaw = state => state.pages.search;
 export const getDashboardPages = state => state.pages.dashboard;
 export const getIsVirtualRootOn = state => state.pages.virtualRoot;
+export const getEditPage = state => state.pages.editPage;
 
 export const getSearchPages = createSelector(
   [getSearchPagesRaw],
diff --git a/src/state/pages/types.js b/src/state/pages/types.js
index ef30e4e09..e110ce76d 100644
--- a/src/state/pages/types.js
+++ b/src/state/pages/types.js
@@ -17,3 +17,4 @@ export const COLLAPSE_ALL = 'pages/collapse-all-pages';
 export const SET_VIEWPAGES = 'pages/set-viewpages';
 export const SET_DASHBOARD_PAGES = 'pages/set-dashboard-pages';
 export const SET_VIRTUAL_ROOT = 'pages/set-virtual-root';
+export const SET_EDIT_PAGE = 'pages/set-edit-pages';
diff --git a/src/state/profile-types/actions.js b/src/state/profile-types/actions.js
index 06bf20685..4903edeb1 100644
--- a/src/state/profile-types/actions.js
+++ b/src/state/profile-types/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { METHODS } from '@entando/apimanager';
 import { routeConverter } from '@entando/utils';
 import moment from 'moment';
@@ -37,7 +36,6 @@ import {
   getParentSelectedAttribute,
   getIsMonolistCompositeAttributeType,
   getMonolistAttributeType,
-  getFormTypeValue,
   getActionModeProfileTypeSelectedAttribute,
 } from 'state/profile-types/selectors';
 import {
@@ -335,7 +333,6 @@ export const fetchProfileType = profileTypeCode => dispatch => (
       response.json().then((json) => {
         if (response.ok) {
           dispatch(setSelectedProfileType(json.payload));
-          dispatch(initialize('ProfileType', json.payload));
         } else {
           dispatch(addErrors(json.errors.map(err => err.message)));
           json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
@@ -353,7 +350,6 @@ export const fetchMyProfileType = () => dispatch => (
       response.json().then((json) => {
         if (response.ok) {
           dispatch(setSelectedProfileType(json.payload));
-          dispatch(initialize('ProfileType', json.payload));
         } else {
           dispatch(addErrors(json.errors.map(err => err.message)));
           json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
@@ -418,10 +414,6 @@ export const sendPutAttributeFromProfileType = (
           [TYPE_MONOLIST, TYPE_LIST].includes(json.payload.type)
           && getIsMonolistCompositeAttributeType(getState())
         )) {
-          dispatch(initialize('attribute', {
-            ...json.payload,
-            compositeAttributeType: TYPE_COMPOSITE,
-          }));
           if (mode === MODE_ADD_ATTRIBUTE_COMPOSITE
             || mode === MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE
           ) {
@@ -513,16 +505,14 @@ export const fetchProfileTypeAttribute = (
   profileTypeAttributeCode,
   routeFunc,
   selectedAttributeType = '',
-  formName,
 ) => (dispatch, getState) => new Promise((resolve) => {
-  let typeAttribute = profileTypeAttributeCode;
+  const typeAttribute = profileTypeAttributeCode;
 
   const checkCompositeSubAttribute = selectedAttributeType === TYPE_COMPOSITE
     || ([TYPE_MONOLIST, TYPE_LIST].includes(selectedAttributeType)
       && getMonolistAttributeType(getState()) === TYPE_COMPOSITE);
 
   if (checkCompositeSubAttribute) {
-    typeAttribute = getFormTypeValue(getState(), formName);
     dispatch(setActionMode(MODE_ADD_ATTRIBUTE_COMPOSITE));
     const selectedAttr = getProfileTypeSelectedAttribute(getState());
     dispatch(pushParentSelectedAttribute(selectedAttr));
@@ -535,32 +525,6 @@ export const fetchProfileTypeAttribute = (
       response.json().then((json) => {
         if (response.ok) {
           dispatch(setSelectedAttribute(json.payload));
-          switch (actionMode) {
-            case MODE_ADD_ATTRIBUTE_COMPOSITE: {
-              dispatch(initialize(formName, {
-                type: json.payload.code,
-                compositeAttributeType: TYPE_COMPOSITE,
-                code: '',
-                name: '',
-              }));
-              break;
-            }
-            case MODE_ADD_SUB_ATTRIBUTE_MONOLIST_COMPOSITE: {
-              dispatch(initialize(formName, { type: json.payload.code }));
-              break;
-            }
-            case MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE: {
-              const nestedAttribute = {
-                ...json.payload,
-                type: json.payload.code,
-                compositeAttributeType: TYPE_COMPOSITE,
-              };
-              dispatch(initialize(formName, { nestedAttribute }));
-              break;
-            }
-            default:
-              break;
-          }
           if (routeFunc && actionMode !== MODE_ADD_ATTRIBUTE_COMPOSITE) {
             routeFunc();
           }
@@ -644,7 +608,6 @@ export const fetchAttributeFromProfileType = (formName, profileTypeCode, attribu
         }
         const actionMode = getActionModeProfileTypeSelectedAttribute(getState());
         if (actionMode !== MODE_ADD_ATTRIBUTE_COMPOSITE) {
-          dispatch(initialize(formName, payload));
           dispatch(setSelectedAttributeProfileType(json.payload));
           dispatch(fetchProfileTypeAttribute(
             profileTypeCode,
diff --git a/src/state/profile-types/selectors.js b/src/state/profile-types/selectors.js
index bcee9571a..9ef4516b0 100644
--- a/src/state/profile-types/selectors.js
+++ b/src/state/profile-types/selectors.js
@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect';
-import { formValueSelector } from 'redux-form';
 import { get, isEmpty, difference, xor, union, isUndefined } from 'lodash';
 import {
   TYPE_MONOLIST,
@@ -34,8 +33,10 @@ export const getSelectedProfileTypeAttributes = state => get(state.profileTypes.
 export const getAttributeSelectFromProfileType = state => get(state.profileTypes.selected, 'attributeSelected');
 export const getAttributeTypeSelectFromProfileType = state => get(state.profileTypes.selected, 'attributeSelected.type');
 export const getSelectedAttributeNestedType = state => get(state.profileTypes.selected, 'attributeSelected.nestedAttribute.type');
+export const getSelectedAttributeNestedIndexable = state => get(state.profileTypes.selected, 'attributeSelected.nestedAttribute.indexable');
 export const getSelectedValidationRules = state => get(state.profileTypes.selected, 'attributeSelected.validationRules');
 export const getProfileTypeSelectedAttributeCode = state => get(state.profileTypes.attributes.selected, 'code');
+export const getProfileTypeSelectedAttributeJoinRoles = state => get(state.profileTypes.attributes.selected, 'attributeSelected.roles.code');
 
 export const getProfileTypeSelectedAttributeAllowedRoleCodeList = createSelector(
   getProfileTypeSelectedAttributeAllowedRoles,
@@ -167,7 +168,6 @@ export const getIsMonolistCompositeAttributeType = createSelector(
   ),
 );
 
-export const getFormTypeValue = (state, formName) => formValueSelector(formName)(state, 'type');
 
 const getProfileTypeReferences = state => state.profileTypes.references;
 
diff --git a/src/state/roles/actions.js b/src/state/roles/actions.js
index 370be1677..3926c0e56 100644
--- a/src/state/roles/actions.js
+++ b/src/state/roles/actions.js
@@ -1,5 +1,4 @@
-import { initialize } from 'redux-form';
-import { addToast, addErrors, TOAST_ERROR } from '@entando/messages';
+import { addToast, addErrors, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
 
 import {
   getRoles, getRole, postRole, putRole, deleteRole,
@@ -65,7 +64,7 @@ export const fetchRole = roleCode => dispatch =>
     getRole(roleCode).then((response) => {
       response.json().then((data) => {
         if (response.ok) {
-          dispatch(initialize('role', data.payload));
+          dispatch(setSelected(data.payload));
         } else {
           dispatch(addErrors(data.errors.map(err => err.message)));
           dispatch(addToast(data.errors[0].message, TOAST_ERROR));
@@ -96,6 +95,10 @@ export const sendPostRole = rolesData => dispatch =>
       response.json().then((data) => {
         if (response.ok) {
           history.push(ROUTE_ROLE_LIST);
+          dispatch(addToast(
+            { id: 'app.created', values: { type: 'role', code: data.payload.name } }
+            , TOAST_SUCCESS,
+          ));
         } else {
           dispatch(addErrors(data.errors.map(err => err.message)));
           dispatch(addToast(data.errors[0].message, TOAST_ERROR));
@@ -111,6 +114,10 @@ export const sendPutRole = rolesData => dispatch =>
       response.json().then((data) => {
         if (response.ok) {
           history.push(ROUTE_ROLE_LIST);
+          dispatch(addToast(
+            { id: 'app.updated', values: { type: 'role', code: data.payload.name } }
+            , TOAST_SUCCESS,
+          ));
         } else {
           dispatch(addErrors(data.errors.map(err => err.message)));
           dispatch(addToast(data.errors[0].message, TOAST_ERROR));
diff --git a/src/state/user-preferences/actions.js b/src/state/user-preferences/actions.js
index 19ab09454..447304216 100644
--- a/src/state/user-preferences/actions.js
+++ b/src/state/user-preferences/actions.js
@@ -1,4 +1,9 @@
-import { addToast, addErrors, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
+import {
+  addToast,
+  addErrors,
+  TOAST_ERROR,
+  TOAST_SUCCESS,
+} from '@entando/messages';
 import { getUserPreferences, putUserPreferences } from 'api/userPreferences';
 import { setWizardEnabled } from 'state/app-tour/actions';
 import { SET_USER_PREFERENCES } from 'state/user-preferences/types';
@@ -10,24 +15,25 @@ export const setUserPreferences = preferences => ({
   },
 });
 
-export const fetchUserPreferences = username => dispatch => new Promise((resolve) => {
-  getUserPreferences(username).then((response) => {
-    response.json().then((json) => {
-      if (response.ok) {
-        dispatch(setWizardEnabled((json.payload || {}).wizard));
-        dispatch(setUserPreferences(json.payload));
-        resolve();
-      } else {
-        dispatch(addErrors(json.errors.map(err => err.message)));
-        dispatch(addToast(json.errors[0].message, TOAST_ERROR));
-        resolve();
-      }
+export const fetchUserPreferences = username => dispatch =>
+  new Promise((resolve) => {
+    getUserPreferences(username).then((response) => {
+      response.json().then((json) => {
+        if (response.ok) {
+          dispatch(setWizardEnabled((json.payload || {}).wizard));
+          dispatch(setUserPreferences(json.payload));
+          resolve();
+        } else {
+          dispatch(addErrors(json.errors.map(err => err.message)));
+          dispatch(addToast(json.errors[0].message, TOAST_ERROR));
+          resolve();
+        }
+      });
     });
   });
-});
 
-export const updateUserPreferences = (user, preferences) =>
-  dispatch => new Promise((resolve) => {
+export const updateUserPreferences = (user, preferences) => dispatch =>
+  new Promise((resolve) => {
     putUserPreferences(user, preferences).then((response) => {
       response.json().then((json) => {
         if (response.ok) {
@@ -35,10 +41,7 @@ export const updateUserPreferences = (user, preferences) =>
           // send an event to micro frontends
           window.dispatchEvent(new CustomEvent('user-preferences-updated', { detail: preferences }));
           if (preferences.showToast !== false) {
-            dispatch(addToast(
-              { id: 'userpreferences.edit.success' },
-              TOAST_SUCCESS,
-            ));
+            dispatch(addToast({ id: 'userpreferences.edit.success' }, TOAST_SUCCESS));
           }
         } else {
           dispatch(addErrors(json.errors.map(err => err.message)));
diff --git a/src/state/user-profile/actions.js b/src/state/user-profile/actions.js
index e4f120524..18f05c112 100644
--- a/src/state/user-profile/actions.js
+++ b/src/state/user-profile/actions.js
@@ -1,12 +1,8 @@
 import { addToast, addErrors, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
-import { getUsername } from '@entando/apimanager';
-
-import { initialize } from 'redux-form';
-
 import { getUserProfile, putUserProfile, getMyUserProfile, putMyUserProfile } from 'api/userProfile';
 import { SET_USER_PROFILE } from 'state/user-profile/types';
 import { fetchProfileType, fetchMyProfileType } from 'state/profile-types/actions';
-import { getPayloadForForm, getPayloadForApi } from 'helpers/entities';
+import { getPayloadForApi } from 'helpers/entities';
 import { getSelectedProfileTypeAttributes } from 'state/profile-types/selectors';
 import { getDefaultLanguage, getActiveLanguages } from 'state/languages/selectors';
 
@@ -19,19 +15,12 @@ export const setUserProfile = profile => ({
   },
 });
 
-export const fetchUserProfile = username => (dispatch, getState) => new Promise((resolve) => {
+export const fetchUserProfile = username => dispatch => new Promise((resolve) => {
   getUserProfile(username).then((response) => {
     response.json().then((json) => {
       if (response.ok) {
         dispatch(setUserProfile(json.payload));
         dispatch(fetchProfileType(json.payload.typeCode)).then(() => {
-          const state = getState();
-          dispatch(initialize('UserProfile', getPayloadForForm(
-            username, json.payload,
-            getSelectedProfileTypeAttributes(state),
-            getDefaultLanguage(state),
-            getActiveLanguages(state),
-          )));
           resolve();
         });
       } else {
@@ -72,19 +61,12 @@ export const updateUserProfile = (profile, successRedirect = true) =>
   });
 
 
-export const fetchMyUserProfile = () => (dispatch, getState) => new Promise((resolve) => {
+export const fetchMyUserProfile = () => dispatch => new Promise((resolve) => {
   getMyUserProfile().then((response) => {
     response.json().then((json) => {
       if (response.ok) {
         dispatch(setUserProfile(json.payload));
         dispatch(fetchMyProfileType(json.payload.typeCode)).then(() => {
-          const state = getState();
-          dispatch(initialize('UserProfile', getPayloadForForm(
-            getUsername(state), json.payload,
-            getSelectedProfileTypeAttributes(state),
-            getDefaultLanguage(state),
-            getActiveLanguages(state),
-          )));
           resolve();
         });
       } else {
diff --git a/src/state/user-settings/actions.js b/src/state/user-settings/actions.js
index 4f039566e..7188f2799 100644
--- a/src/state/user-settings/actions.js
+++ b/src/state/user-settings/actions.js
@@ -1,6 +1,4 @@
-import { initialize } from 'redux-form';
 import { addToast, addErrors, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
-
 import { getUserSettings, putUserSettings } from 'api/userSettings';
 import { SET_USER_SETTINGS } from 'state/user-settings/types';
 import { toggleLoading } from 'state/loading/actions';
@@ -18,7 +16,6 @@ export const fetchUserSettings = () => dispatch => new Promise((resolve) => {
     response.json().then((json) => {
       if (response.ok) {
         dispatch(setUserSettings(json.payload));
-        dispatch(initialize('user-restrictions', json.payload));
       } else {
         dispatch(addErrors(json.errors.map(err => err.message)));
         dispatch(addToast(json.errors[0].message, TOAST_ERROR));
diff --git a/src/state/user-settings/selectors.js b/src/state/user-settings/selectors.js
new file mode 100644
index 000000000..8055b7ceb
--- /dev/null
+++ b/src/state/user-settings/selectors.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const getUserSettings = state => state.userSettings;
diff --git a/src/state/users/actions.js b/src/state/users/actions.js
index a9a16d292..1f4f57795 100644
--- a/src/state/users/actions.js
+++ b/src/state/users/actions.js
@@ -1,4 +1,3 @@
-import { initialize, reset } from 'redux-form';
 import { addToast, addErrors, clearErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages';
 import { getUsername } from '@entando/apimanager';
 
@@ -19,7 +18,7 @@ import { setPage } from 'state/pagination/actions';
 import { toggleLoading } from 'state/loading/actions';
 import { history, ROUTE_USER_LIST, ROUTE_USER_PROFILE } from 'app-init/router';
 import { routeConverter } from '@entando/utils';
-import { SET_USERS, SET_SELECTED_USER, SET_SELECTED_USER_AUTHORITIES, SET_USERS_TOTAL } from 'state/users/types';
+import { SET_USERS, SET_SELECTED_USER, SET_SELECTED_USER_AUTHORITIES, SET_USERS_TOTAL, SET_USER_SEARCH_TERM } from 'state/users/types';
 import { setVisibleModal } from 'state/modal/actions';
 
 
@@ -52,6 +51,11 @@ export const setUsersTotal = usersTotal => ({
   },
 });
 
+export const setUserSearchTerm = searchTerm => ({
+  type: SET_USER_SEARCH_TERM,
+  payload: searchTerm,
+});
+
 // thunk
 export const fetchUsers = (page = { page: 1, pageSize: 10 }, params = '') => dispatch => (
   new Promise((resolve) => {
@@ -117,8 +121,7 @@ export const fetchUserForm = username => dispatch => (
     getUser(username).then((response) => {
       dispatch(toggleLoading('form'));
       if (response.ok) {
-        response.json().then((json) => {
-          dispatch(initialize('user', json.payload));
+        response.json().then(() => {
           dispatch(toggleLoading('form'));
           resolve();
         });
@@ -202,7 +205,6 @@ export const fetchUserAuthorities = username => async (dispatch) => {
     const json = await response.json();
     if (response.ok) {
       dispatch(setSelectedUserAuthorities(username, json.payload));
-      dispatch(initialize('autorityForm', { groupRolesCombo: json.payload }));
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
       json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
@@ -243,6 +245,11 @@ export const sendPutUserAuthorities = (authorities, username) => async (dispatch
     const json = await response.json();
     if (response.ok) {
       history.push(ROUTE_USER_LIST);
+      dispatch(addToast(
+        { id: 'user.authority.success' },
+        TOAST_SUCCESS,
+      ));
+      dispatch(clearErrors());
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
       json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
@@ -267,7 +274,7 @@ export const sendDeleteUserAuthorities = username => async (dispatch) => {
   }
 };
 
-export const sendPostMyPassword = data => async (dispatch) => {
+export const sendPostMyPassword = data => dispatch => new Promise(async (resolve) => {
   try {
     const response = await postMyPassword(data);
     const json = await response.json();
@@ -277,16 +284,16 @@ export const sendPostMyPassword = data => async (dispatch) => {
         TOAST_SUCCESS,
       ));
       dispatch(clearErrors());
-      dispatch(reset('myprofile-account'));
       dispatch(setVisibleModal(''));
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
       json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
     }
+    resolve();
   } catch (e) {
     // do nothing
   }
-};
+});
 
 export const sendPostWizardSetting = (username, data) => async (dispatch) => {
   try {
diff --git a/src/state/users/reducer.js b/src/state/users/reducer.js
index 16e09903a..0929cff1c 100644
--- a/src/state/users/reducer.js
+++ b/src/state/users/reducer.js
@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import { SET_USERS, SET_SELECTED_USER, SET_SELECTED_USER_AUTHORITIES, SET_USERS_TOTAL } from 'state/users/types';
+import { SET_USERS, SET_SELECTED_USER, SET_SELECTED_USER_AUTHORITIES, SET_USERS_TOTAL, SET_USER_SEARCH_TERM } from 'state/users/types';
 import { ACTION_SAVE, ACTION_UPDATE } from 'state/users/const';
 
 const toMap = array => array.reduce((acc, user) => {
@@ -39,13 +39,11 @@ export const selected = (state = {}, action = {}) => {
 export const authorities = (state = [], action = {}) => {
   switch (action.type) {
     case SET_SELECTED_USER_AUTHORITIES: {
-      let result = { username: action.payload.username, list: action.payload.authorities };
-      if (action.payload.authorities.length > 0) {
-        result = { ...result, action: ACTION_UPDATE };
-      } else {
-        result = { ...result, action: ACTION_SAVE };
-      }
-      return result;
+      return {
+        username: action.payload.username,
+        list: action.payload.authorities,
+        action: action.payload.authorities.length > 0 ? ACTION_UPDATE : ACTION_SAVE,
+      };
     }
     default: return state;
   }
@@ -60,10 +58,20 @@ export const total = (state = 0, action = {}) => {
   }
 };
 
+export const searchTerm = (state = '', action = {}) => {
+  switch (action.type) {
+    case SET_USER_SEARCH_TERM: {
+      return action.payload;
+    }
+    default: return state;
+  }
+};
+
 export default combineReducers({
   list,
   map: userMap,
   selected,
   authorities,
   total,
+  searchTerm,
 });
diff --git a/src/state/users/selectors.js b/src/state/users/selectors.js
index 45625604e..f16e4576e 100644
--- a/src/state/users/selectors.js
+++ b/src/state/users/selectors.js
@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect';
-import { formValueSelector } from 'redux-form';
 import { getGroupsMap } from 'state/groups/selectors';
 import { getRolesMap } from 'state/roles/selectors';
 import { isEmpty } from 'lodash';
@@ -11,25 +10,24 @@ export const getSelectedUser = state => state.users.selected;
 export const getSelectedUserActionAuthorities = state => state.users.authorities.action;
 export const getSelectedUserAuthoritiesList = state => state.users.authorities.list;
 export const getUsersTotal = state => state.users.total;
+export const getUserSearchTerm = state => state.users.searchTerm;
 
 export const getUserList = createSelector(
   [getUsersMap, getUsersIdList],
   (UsersMap, idList) => idList.map(id => (UsersMap[id])),
 );
 
-const getGroupRolesComboValue = state => formValueSelector('autorityForm')(state, 'groupRolesCombo');
+export const makeGroupRolesCombo = (groupRoleCombo, groups, roles) => {
+  if (!isEmpty(groupRoleCombo) && !isEmpty(groups) && !isEmpty(roles)) {
+    return groupRoleCombo.map(item => ({
+      group: item.group ? { code: item.group, name: groups[item.group].name } : {},
+      role: item.role ? { code: item.role, name: roles[item.role].name } : {},
+    }));
+  }
+  return [];
+};
 
-export const getGroupRolesCombo =
-  createSelector(
-    [getGroupRolesComboValue, getGroupsMap, getRolesMap],
-    (groupRoleCombo, groups, roles) => {
-      if (!isEmpty(groupRoleCombo) && !isEmpty(groups) && !isEmpty(roles)) {
-        return groupRoleCombo.map(item => ({
-          group: item.group ? { code: item.group, name: groups[item.group].name } : {},
-          role: item.role ? { code: item.role, name: roles[item.role].name } : {},
-        }));
-      }
-      return [];
-    },
-
-  );
+export const getGroupRolesCombo = createSelector(
+  [getSelectedUserAuthoritiesList, getGroupsMap, getRolesMap],
+  makeGroupRolesCombo,
+);
diff --git a/src/state/users/types.js b/src/state/users/types.js
index 450a2825c..fc2bc402e 100644
--- a/src/state/users/types.js
+++ b/src/state/users/types.js
@@ -3,3 +3,4 @@ export const SET_SELECTED_USER = 'users/set-selected-user';
 export const SET_SELECTED_USER_AUTHORITIES = 'users/set-selected-user-authorities';
 export const TOGGLE_LOADING = 'users/set-toggle-loading';
 export const SET_USERS_TOTAL = 'users/set-users-total';
+export const SET_USER_SEARCH_TERM = 'users/set-user-search-term';
diff --git a/src/state/widgets/actions.js b/src/state/widgets/actions.js
index 18210673b..981c475f4 100644
--- a/src/state/widgets/actions.js
+++ b/src/state/widgets/actions.js
@@ -1,4 +1,3 @@
-import { initialize } from 'redux-form';
 import { get, pick } from 'lodash';
 import { addToast, addErrors, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
 import { routeConverter } from '@entando/utils';
@@ -102,22 +101,11 @@ export const getSingleWidgetInfo = widgetCode => dispatch => (
   )).catch(() => {})
 );
 
-export const initNewUserWidget = (widgetCode, isCloning = false) => (dispatch) => {
+export const initNewUserWidget = widgetCode => (dispatch) => {
   toggleLoading('fetchWidget');
   dispatch(getSingleWidgetInfo(widgetCode)).then(({ ok, json }) => {
     if (ok) {
-      const config = get(json.payload, 'parameters', [])
-        .reduce((acc, curr) => ({
-          ...acc,
-          [curr.code]: '',
-        }), {});
       dispatch(setSelectedParentWidget(json.payload));
-      if (!isCloning) {
-        dispatch(initialize('widget', {
-          parentType: json.payload.code,
-          config,
-        }));
-      }
     } else {
       dispatch(removeParentWidget());
     }
@@ -132,7 +120,6 @@ export const fetchWidget = widgetCode => dispatch => new Promise((resolve) => {
       newPayload.configUi = !newPayload.configUi ? '' : JSON.stringify(newPayload.configUi, null, 2);
       newPayload.group = newPayload.group || FREE_ACCESS_GROUP_VALUE;
       const userWidgetInitDispatches = () => {
-        dispatch(initialize('widget', newPayload));
         dispatch(setSelectedWidget(json.payload));
         toggleLoading('fetchWidget');
         resolve();
@@ -231,7 +218,9 @@ export const sendPostWidgets = (widgetObject, saveType) => dispatch =>
         }
         resolve();
       });
-    }).catch(() => {});
+    }).catch(() => {
+      resolve();
+    });
   });
 
 export const sendPutWidgets = (widgetObject, saveType) => (dispatch, getState) => {
diff --git a/src/ui/app-tour/AppTour.js b/src/ui/app-tour/AppTour.js
index a493ee624..7cac3884f 100644
--- a/src/ui/app-tour/AppTour.js
+++ b/src/ui/app-tour/AppTour.js
@@ -129,15 +129,25 @@ class AppTour extends React.Component {
 
   generateSteps() {
     const {
-      appTourLastStep, mainTitleValue,
-      codeValue, ownerGroupValue, parentCodeValue, pageModelValue,
+      appTourLastStep, languages,
       onBackToAddPage, tourCreatedPageCode, onBackToPageTree,
       onAddLogo, onAddNavBarWidget, onAddSearchWidget,
       onAddLoginWidget, onAddBannerWidget,
       onAddContentListWidget, onAddSitemapMenu,
-      onAppTourFinish,
+      onAppTourFinish, innerRef,
     } = this.props;
 
+    const addPageformikValues = innerRef ? (innerRef.current || {}).values || {} : {};
+
+    const defaultLang = languages.find(lang => lang.isDefault) || { code: 'en' };
+    const defaultLangCode = defaultLang.code;
+
+    const mainTitleValue = (addPageformikValues.titles || {})[defaultLangCode] || '';
+    const codeValue = addPageformikValues.code || '';
+    const ownerGroupValue = addPageformikValues.ownerGroup || '';
+    const parentCodeValue = addPageformikValues.parentCode || '';
+    const pageModelValue = addPageformikValues.pageModel || '';
+
     const mfeAppBuilderMenu = document.getElementsByTagName('app-builder-menu') ? document.getElementsByTagName('app-builder-menu')[0] : null;
     const getStep3Element = () => (mfeAppBuilderMenu ? mfeAppBuilderMenu.shadowRoot.querySelector('.app-tour-step-3 > a') : document.querySelector('.app-tour-step-3 > a'));
     const getStep4Element = () => (mfeAppBuilderMenu ? mfeAppBuilderMenu.shadowRoot.querySelector('.app-tour-step-4 > a') : document.querySelector('.app-tour-step-4 > a'));
@@ -518,11 +528,6 @@ AppTour.propTypes = {
   appTourProgress: PropTypes.string,
   appTourLastStep: PropTypes.number,
   setNextStep: PropTypes.func.isRequired,
-  mainTitleValue: PropTypes.string,
-  codeValue: PropTypes.string,
-  ownerGroupValue: PropTypes.string,
-  parentCodeValue: PropTypes.string,
-  pageModelValue: PropTypes.string,
   tourCreatedPageCode: PropTypes.string,
   lockBodyScroll: PropTypes.bool,
   customOffset: PropTypes.number,
@@ -538,6 +543,13 @@ AppTour.propTypes = {
   isSuperuser: PropTypes.bool.isRequired,
   wizardCanBeShown: PropTypes.oneOfType([PropTypes.bool, undefined]),
   checkIfWizardCanBeShown: PropTypes.func.isRequired,
+  innerRef: PropTypes.shape({ current: PropTypes.instanceOf(Object) }),
+  languages: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string,
+    name: PropTypes.string,
+    isActive: PropTypes.bool,
+    isDefault: PropTypes.bool,
+  })),
 };
 
 AppTour.defaultProps = {
@@ -545,17 +557,14 @@ AppTour.defaultProps = {
   username: '',
   appTourProgress: '',
   appTourLastStep: 1,
-  mainTitleValue: '',
-  codeValue: '',
-  ownerGroupValue: '',
-  parentCodeValue: '',
-  pageModelValue: '',
   tourCreatedPageCode: '',
   lockBodyScroll: true,
   customOffset: 0,
   publishStatus: false,
   isDismissed: false,
   wizardCanBeShown: undefined,
+  innerRef: null,
+  languages: [],
 };
 
 export default withPermissionValues(AppTour);
diff --git a/src/ui/app-tour/AppTourContainer.js b/src/ui/app-tour/AppTourContainer.js
index 7c45a6a75..4f6ed9182 100644
--- a/src/ui/app-tour/AppTourContainer.js
+++ b/src/ui/app-tour/AppTourContainer.js
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { formValueSelector } from 'redux-form';
 import { withRouter } from 'react-router-dom';
 import { getUsername } from '@entando/apimanager';
 
@@ -24,8 +23,6 @@ export const widgetNextSteps = {
 
 export const mapStateToProps = (state, { lockBodyScroll = true }) => {
   const languages = getActiveLanguages(state);
-  const mainTitleLangCode = (languages[0] || {}).code || 'en';
-  const mainTitleName = `titles.${mainTitleLangCode}`;
   const pageCode = (getTourCreatedPage(state) || {}).code || '';
   const isDismissed = sessionStorage.getItem(dismissedWizardKey);
   return {
@@ -33,16 +30,12 @@ export const mapStateToProps = (state, { lockBodyScroll = true }) => {
     wizardEnabled: getWizardEnabled(state),
     appTourProgress: getAppTourProgress(state),
     appTourLastStep: getAppTourlastStep(state),
-    mainTitleValue: formValueSelector('page')(state, mainTitleName),
-    codeValue: formValueSelector('page')(state, 'code'),
-    ownerGroupValue: formValueSelector('page')(state, 'ownerGroup'),
-    parentCodeValue: formValueSelector('page')(state, 'parentCode'),
-    pageModelValue: formValueSelector('page')(state, 'pageModel'),
     lockBodyScroll,
     tourCreatedPageCode: pageCode,
     publishStatus: getPublishStatus(state),
     isDismissed,
     wizardCanBeShown: getWizardCanBeShown(state),
+    languages,
   };
 };
 export const mapDispatchToProps = (dispatch, { history }) => ({
diff --git a/src/ui/app/App.js b/src/ui/app/App.js
index a6f12c523..ebd309b47 100644
--- a/src/ui/app/App.js
+++ b/src/ui/app/App.js
@@ -58,9 +58,6 @@ import {
   ROUTE_RELOAD_CONFIG,
   ROUTE_RELOAD_CONFIRM,
   ROUTE_DATA_TYPE_LIST,
-  ROUTE_DATA_TYPE_ADD,
-  ROUTE_DATA_TYPE_EDIT,
-  ROUTE_ATTRIBUTE_MONOLIST_ADD,
   ROUTE_PROFILE_TYPE_LIST,
   ROUTE_PROFILE_TYPE_ADD,
   ROUTE_PROFILE_TYPE_EDIT,
@@ -98,8 +95,6 @@ import AddGroupPage from 'ui/groups/add/AddGroupPage';
 import EditGroupPage from 'ui/groups/edit/EditGroupPage';
 import DetailGroupPage from 'ui/groups/detail/DetailGroupPage';
 import ListDataTypePage from 'ui/data-types/list/ListDataTypePage';
-import AddDataTypesPage from 'ui/data-types/add/AddDataTypesPage';
-import EditDataTypesPage from 'ui/data-types/edit/EditDataTypesPage';
 
 import PageLayout from 'ui/app/PageLayout';
 import RowSpinner from 'ui/pages/common/RowSpinner';
@@ -169,7 +164,7 @@ const SettingsAddPage = React.lazy(() => import('ui/component-repository/setting
 const ReloadConfigPage = React.lazy(() => import('ui/reload-configuration/ReloadConfigPage'));
 const ReloadConfirmPage = React.lazy(() => import('ui/reload-configuration/ReloadConfirmPage'));
 const MonolistProfilePageContainer = React.lazy(() => import('ui/profile-types/attributes/monolist/MonolistProfilePageContainer'));
-const MonolistPageContainer = React.lazy(() => import('ui/data-types/attributes/monolist/MonolistPageContainer'));
+
 
 /* Page Section */
 const PageTreePageContainer = React.lazy(() => import('ui/pages/list/PageTreePageContainer'));
@@ -343,8 +338,6 @@ const RouteComponent = () => {
       />
       {/* data type */}
       <Route exact path={ROUTE_DATA_TYPE_LIST} component={ListDataTypePage} />
-      <Route path={ROUTE_DATA_TYPE_ADD} component={AddDataTypesPage} />
-      <Route path={ROUTE_DATA_TYPE_EDIT} component={EditDataTypesPage} />
       {/* user */}
       <Route exact path={ROUTE_USER_LIST} render={() => renderWithSuspense(<UserListPage />)} />
       <Route path={ROUTE_USER_ADD} render={() => renderWithSuspense(<AddUserPage />)} />
@@ -499,10 +492,6 @@ const RouteComponent = () => {
         path={ROUTE_RELOAD_CONFIRM}
         render={() => renderWithSuspense(<ReloadConfirmPage />)}
       />
-      <Route
-        path={ROUTE_ATTRIBUTE_MONOLIST_ADD}
-        render={() => renderWithSuspense(<MonolistPageContainer />)}
-      />
       { /* static routes */}
       <Route path={ROUTE_ABOUT} render={() => renderWithSuspense(<AboutPage />)} />
       <Route path={ROUTE_LICENSE} render={() => renderWithSuspense(<LicensePage />)} />
diff --git a/src/ui/common/attributes/AttributeEnumMapSettings.js b/src/ui/common/attributes/AttributeEnumMapSettings.js
index c3393f71d..ce6e715d0 100644
--- a/src/ui/common/attributes/AttributeEnumMapSettings.js
+++ b/src/ui/common/attributes/AttributeEnumMapSettings.js
@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Row, Col } from 'patternfly-react';
-import { Field } from 'redux-form';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import { Field } from 'formik';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import { required } from '@entando/utils';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 
 export const elements = value =>
   (value && !/^(\w+)=([^\s]+)$/i.test(value)
@@ -19,7 +19,7 @@ const msgs = defineMessages({
   },
 });
 
-const AttributeEnumEnumMapSettings = ({ intl, enumeratorMapExtractorBeans }) => {
+const AttributeEnumEnumMapSettings = ({ intl, enumeratorMapExtractorBeans, prefixName }) => {
   const selectAllowedOptions = enumeratorMapExtractorBeans.map(item => (
     {
       value: item.code,
@@ -35,7 +35,7 @@ const AttributeEnumEnumMapSettings = ({ intl, enumeratorMapExtractorBeans }) =>
           </legend>
           <Field
             component={RenderTextInput}
-            name="enumeratorStaticItems"
+            name={`${prefixName}enumeratorStaticItems`}
             label={
               <FormLabel labelId="app.enumeratorStaticItems" required />
           }
@@ -44,7 +44,7 @@ const AttributeEnumEnumMapSettings = ({ intl, enumeratorMapExtractorBeans }) =>
           />
           <Field
             component={RenderTextInput}
-            name="enumeratorStaticItemsSeparator"
+            name={`${prefixName}enumeratorStaticItemsSeparator`}
             label={
               <FormLabel labelId="app.enumeratorStaticItemsSeparator" />
             }
@@ -58,7 +58,7 @@ const AttributeEnumEnumMapSettings = ({ intl, enumeratorMapExtractorBeans }) =>
                 label={
                   <FormLabel labelId="app.enumeratorExtractorBean" />
               }
-                name="enumeratorMapExtractorBeans"
+                name={`${prefixName}enumeratorMapExtractorBeans`}
               /> : null
           }
 
@@ -73,10 +73,12 @@ AttributeEnumEnumMapSettings.propTypes = {
     code: PropTypes.string,
     descr: PropTypes.string,
   })),
+  prefixName: PropTypes.string,
 };
 
 AttributeEnumEnumMapSettings.defaultProps = {
   enumeratorMapExtractorBeans: [],
+  prefixName: '',
 };
 
 
diff --git a/src/ui/common/attributes/AttributeEnumSettings.js b/src/ui/common/attributes/AttributeEnumSettings.js
index 4ce74896e..c3bd878b7 100644
--- a/src/ui/common/attributes/AttributeEnumSettings.js
+++ b/src/ui/common/attributes/AttributeEnumSettings.js
@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Row, Col } from 'patternfly-react';
-import { Field } from 'redux-form';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import { Field } from 'formik';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import { required } from '@entando/utils';
 import { MODE_EDIT, MODE_ADD } from 'state/data-types/const';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
 export const element = value =>
   (value && !/^[a-zA-Z0-9_]+(,[a-zA-Z0-9_]+)*$/i.test(value)
@@ -20,7 +21,9 @@ const msgs = defineMessages({
   },
 });
 
-const AttributeEnumSettings = ({ intl, enumeratorExtractorBeans, mode }) => {
+const AttributeEnumSettings = ({
+  intl, enumeratorExtractorBeans, mode, prefixName,
+}) => {
   const selectAllowedOptions = enumeratorExtractorBeans.map(item => (
     {
       value: item,
@@ -36,16 +39,17 @@ const AttributeEnumSettings = ({ intl, enumeratorExtractorBeans, mode }) => {
           </legend>
           <Field
             component={RenderTextInput}
-            name="enumeratorStaticItems"
+            name={`${prefixName}enumeratorStaticItems`}
             label={
               <FormLabel labelId="app.enumeratorStaticItems" required />
             }
             placeholder={intl.formatMessage(msgs.help)}
-            validate={[required, element]}
+            validate={value =>
+              convertReduxValidationsToFormikValidations(value, [required, element])}
           />
           <Field
             component={RenderTextInput}
-            name="enumeratorStaticItemsSeparator"
+            name={`${prefixName}enumeratorStaticItemsSeparator`}
             label={
               <FormLabel labelId="app.enumeratorStaticItemsSeparator" />
             }
@@ -59,11 +63,11 @@ const AttributeEnumSettings = ({ intl, enumeratorExtractorBeans, mode }) => {
                 label={
                   <FormLabel labelId="app.enumeratorExtractorBean" />
               }
-                name="enumeratorExtractorBean"
+                name={`${prefixName}enumeratorExtractorBean`}
               /> :
               <Field
                 component={RenderTextInput}
-                name="enumeratorExtractorBean"
+                name={`${prefixName}enumeratorExtractorBean`}
                 label={
                   <FormLabel labelId="app.enumeratorExtractorBean" />
                 }
@@ -81,11 +85,13 @@ AttributeEnumSettings.propTypes = {
   enumeratorExtractorBeans: PropTypes.arrayOf(PropTypes.string),
   mode: PropTypes.oneOf([MODE_ADD, MODE_EDIT]),
   intl: intlShape.isRequired,
+  prefixName: PropTypes.string,
 };
 
 AttributeEnumSettings.defaultProps = {
   enumeratorExtractorBeans: [],
   mode: MODE_ADD,
+  prefixName: '',
 };
 
 export default injectIntl(AttributeEnumSettings);
diff --git a/src/ui/common/attributes/AttributeFormUtils.js b/src/ui/common/attributes/AttributeFormUtils.js
new file mode 100644
index 000000000..c2cc776a1
--- /dev/null
+++ b/src/ui/common/attributes/AttributeFormUtils.js
@@ -0,0 +1,166 @@
+
+import {
+  TYPE_BOOLEAN,
+  TYPE_CHECKBOX,
+  TYPE_DATE,
+  TYPE_ENUMERATOR,
+  TYPE_ENUMERATOR_MAP,
+  TYPE_MONOLIST,
+  TYPE_LIST,
+  TYPE_NUMBER,
+  TYPE_THREESTATE,
+  TYPE_TIMESTAMP,
+} from 'state/profile-types/const';
+
+export const ognlValidation = (initialValues, isComposite) => (!isComposite ? {
+  ognlValidation: ((initialValues
+    && initialValues.validationRules
+    && initialValues.validationRules.ognlValidation) && {
+    ognlExpression: initialValues.validationRules.ognlValidation.ognlExpression || '',
+    applyOnlyToFilledAttr:
+        initialValues.validationRules.ognlValidation.applyOnlyToFilledAttr || false,
+    helpMessage: initialValues.validationRules.ognlValidation.helpMessage || '',
+    keyForHelpMessage: initialValues.validationRules.ognlValidation.keyForHelpMessage || '',
+    errorMessage: initialValues.validationRules.ognlValidation.errorMessage || '',
+    keyForErrorMessage: initialValues.validationRules.ognlValidation.keyForErrorMessage || '',
+  }) || {
+    ognlExpression: '',
+    applyOnlyToFilledAttr: false,
+    helpMessage: '',
+    keyForHelpMessage: '',
+    errorMessage: '',
+    keyForErrorMessage: '',
+  },
+} : {});
+
+const typeListOrMonolist = (initialValues, isComposite) => ({
+  ...(isComposite ? {} :
+    {
+      nestedAttribute: {
+        type: '',
+      },
+    }),
+  ...({ validationRules: ognlValidation(initialValues, isComposite) }),
+});
+
+const typeNumber = (initialValues, isComposite) => ({
+  validationRules: {
+    ...initialValues.validationRules,
+    ...ognlValidation(initialValues, isComposite),
+    rangeStartNumber: initialValues.validationRules ? initialValues.validationRules.rangeStartNumber : '',
+    rangeEndNumber: initialValues.validationRules ? initialValues.validationRules.rangeEndNumber : '',
+    equalNumber: initialValues.validationRules ? initialValues.validationRules.equalNumber : '',
+  },
+});
+
+const typeDate = (initialValues, isComposite) => ({
+  validationRules: {
+    ...initialValues.validationRules,
+    ...ognlValidation(initialValues, isComposite),
+    rangeStartDate: (initialValues.validationRules && initialValues.validationRules.rangeStartDate) || '',
+    rangeEndDate: (initialValues.validationRules && initialValues.validationRules.rangeEndDate) || '',
+    equalDate: (initialValues.validationRules && initialValues.validationRules.equalDate) || '',
+  },
+});
+
+const typeEnumeration = (initialValues, isComposite) => ({
+  ...{
+    enumeratorStaticItems: initialValues.enumeratorStaticItems || '',
+    enumeratorStaticItemsSeparator: initialValues.enumeratorStaticItemsSeparator || '',
+    enumeratorExtractorBean: initialValues.enumeratorExtractorBean || '',
+  },
+  ...{ validationRules: { ...ognlValidation(initialValues, isComposite) } },
+});
+
+const typeEnumerationMap = (initialValues, isComposite, selectedAttributeType) => ({
+  ...{
+    enumeratorStaticItems: initialValues.enumeratorStaticItems || '',
+    enumeratorStaticItemsSeparator: initialValues.enumeratorStaticItemsSeparator || '',
+    ...(selectedAttributeType.enumeratorMapExtractorBeans && selectedAttributeType.enumeratorMapExtractorBeans.length > 0) ? { enumeratorExtractorBean: initialValues.enumeratorExtractorBean || '' } : {},
+  },
+  ...{
+    validationRules: {
+      ...ognlValidation(initialValues, isComposite),
+    },
+  },
+});
+
+export const selectedAttributeSectionFieldsAndOgnlValidation =
+    (selectedAttributeType, initialValues, mode, isComposite) => {
+      if (!selectedAttributeType) return {};
+      switch (selectedAttributeType.code) {
+        case TYPE_BOOLEAN:
+        case TYPE_CHECKBOX:
+        case TYPE_THREESTATE:
+        case TYPE_TIMESTAMP:
+          return {
+            validationRules: {
+              ...ognlValidation(initialValues, isComposite),
+            },
+          };
+        case TYPE_MONOLIST:
+        case TYPE_LIST: {
+          return typeListOrMonolist(initialValues, isComposite);
+        }
+        case TYPE_NUMBER:
+          return typeNumber(initialValues, isComposite);
+        case TYPE_DATE:
+          return typeDate(initialValues, isComposite);
+        case TYPE_ENUMERATOR:
+          return typeEnumeration(initialValues, isComposite);
+        case TYPE_ENUMERATOR_MAP:
+          return typeEnumerationMap(initialValues, isComposite, selectedAttributeType);
+        default:
+          return {
+            validationRules: {
+              ...initialValues.validationRules,
+              ...ognlValidation(initialValues, isComposite),
+              minLength: '',
+              maxLength: '',
+              regexp: '',
+            },
+          };
+      }
+    };
+
+export const selectedMonolistAttributeSectionFieldsAndOgnlValidation =
+    (selectedAttribute) => {
+      if (!selectedAttribute) return {};
+      switch (selectedAttribute.nestedAttribute.type) {
+        case TYPE_BOOLEAN:
+        case TYPE_CHECKBOX:
+        case TYPE_THREESTATE:
+        case TYPE_TIMESTAMP:
+          return {
+            validationRules: {
+              ...ognlValidation(selectedAttribute.nestedAttribute, false),
+            },
+          };
+        case TYPE_MONOLIST:
+        case TYPE_LIST: {
+          return typeListOrMonolist(selectedAttribute.nestedAttribute, false);
+        }
+        case TYPE_NUMBER:
+          return typeNumber(selectedAttribute.nestedAttribute, false);
+        case TYPE_DATE:
+          return typeDate(selectedAttribute.nestedAttribute, false);
+        case TYPE_ENUMERATOR:
+          return typeEnumeration(selectedAttribute.nestedAttribute, false);
+        case TYPE_ENUMERATOR_MAP:
+          return typeEnumerationMap(
+            selectedAttribute.nestedAttribute,
+            false,
+            selectedAttribute.nestedAttribute.type,
+          );
+        default:
+          return {
+            validationRules: {
+              ...selectedAttribute.nestedAttribute.validationRules,
+              ...ognlValidation(selectedAttribute.nestedAttribute, false),
+              minLength: selectedAttribute.nestedAttribute.validationRules.minLength || '',
+              maxLength: selectedAttribute.nestedAttribute.validationRules.maxLength || '',
+              regex: selectedAttribute.nestedAttribute.validationRules.regex || '',
+            },
+          };
+      }
+    };
diff --git a/src/ui/common/attributes/AttributeHypeLongMonoTextSettings.js b/src/ui/common/attributes/AttributeHypeLongMonoTextSettings.js
index c36ef22bb..b57159f56 100644
--- a/src/ui/common/attributes/AttributeHypeLongMonoTextSettings.js
+++ b/src/ui/common/attributes/AttributeHypeLongMonoTextSettings.js
@@ -1,12 +1,14 @@
 import React from 'react';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col } from 'patternfly-react';
 import { isNumber } from '@entando/utils';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
+import PropTypes from 'prop-types';
 
-const AttributeHypeLongMonoTextSettings = () => (
+const AttributeHypeLongMonoTextSettings = ({ prefixName }) => (
   <Row>
 
     <Col xs={12}>
@@ -16,23 +18,23 @@ const AttributeHypeLongMonoTextSettings = () => (
         </legend>
         <Field
           component={RenderTextInput}
-          name="minLength"
+          name={`${prefixName}validationRules.minLength`}
           label={
             <FormLabel labelId="app.minLength" />
           }
-          validate={[isNumber]}
+          validate={value => convertReduxValidationsToFormikValidations(value, [isNumber])}
         />
         <Field
           component={RenderTextInput}
-          name="maxLength"
+          name={`${prefixName}validationRules.maxLength`}
           label={
             <FormLabel labelId="app.maxLength" />
           }
-          validate={[isNumber]}
+          validate={value => convertReduxValidationsToFormikValidations(value, [isNumber])}
         />
         <Field
           component={RenderTextInput}
-          name="regex"
+          name={`${prefixName}validationRules.regex`}
           label={
             <FormLabel labelId="app.regexp" />
           }
@@ -42,4 +44,13 @@ const AttributeHypeLongMonoTextSettings = () => (
   </Row>
 );
 
+
+AttributeHypeLongMonoTextSettings.propTypes = {
+  prefixName: PropTypes.string,
+};
+
+AttributeHypeLongMonoTextSettings.defaultProps = {
+  prefixName: '',
+};
+
 export default AttributeHypeLongMonoTextSettings;
diff --git a/src/ui/common/attributes/AttributeInfo.js b/src/ui/common/attributes/AttributeInfo.js
index 06ef4fcbc..11e51ab1d 100644
--- a/src/ui/common/attributes/AttributeInfo.js
+++ b/src/ui/common/attributes/AttributeInfo.js
@@ -1,44 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col, FormGroup } from 'patternfly-react';
 import { required, maxLength } from '@entando/utils';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import RenderSwitchInput from 'ui/common/formik-field/RenderSwitchInput';
 import { MODE_EDIT, MODE_ADD } from 'state/data-types/const';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
-const maxLength10 = maxLength(10);
+
+const maxLength15 = maxLength(15);
 const maxLength50 = maxLength(50);
 
 const AttributeInfo = ({ isSearchable, isIndexable, mode }) => {
-  const renderSearchable = () => {
+  const renderIndexable = () => {
     const html = (
       <FormGroup>
         <label htmlFor="indexable" className="col-xs-2 control-label">
           <FormLabel labelId="app.indexable" />
         </label>
         <Col xs={4}>
-          <Field component={SwitchRenderer} name="indexable" />
+          <Field component={RenderSwitchInput} name="indexable" />
         </Col>
       </FormGroup>
     );
-    return isSearchable ? html : null;
+    return isIndexable ? html : null;
   };
 
-  const renderIndexable = () => {
+  const renderSearchable = () => {
     const html = (
       <FormGroup>
         <label htmlFor="listFilter" className="col-xs-2 control-label">
           <FormLabel labelId="app.filterList" />
         </label>
         <Col xs={4}>
-          <Field component={SwitchRenderer} name="listFilter" />
+          <Field component={RenderSwitchInput} name="listFilter" />
         </Col>
       </FormGroup>
     );
-    return isIndexable ? html : null;
+    return isSearchable ? html : null;
   };
 
   return (
@@ -65,7 +67,8 @@ const AttributeInfo = ({ isSearchable, isIndexable, mode }) => {
             label={
               <FormLabel labelId="app.code" helpId="app.help.code" required />
           }
-            validate={[required, maxLength10]}
+            validate={value =>
+              convertReduxValidationsToFormikValidations(value, [required, maxLength15])}
             disabled={mode === MODE_EDIT}
           />
           <Field
@@ -74,14 +77,14 @@ const AttributeInfo = ({ isSearchable, isIndexable, mode }) => {
             label={
               <FormLabel labelId="app.name" helpId="app.help.name" />
           }
-            validate={[maxLength50]}
+            validate={value => convertReduxValidationsToFormikValidations(value, [maxLength50])}
           />
           <FormGroup>
             <label htmlFor="mandatory" className="col-xs-2 control-label">
               <FormLabel labelId="app.mandatory" />
             </label>
             <Col xs={4}>
-              <Field component={SwitchRenderer} name="mandatory" />
+              <Field component={RenderSwitchInput} name="mandatory" />
             </Col>
           </FormGroup>
           {renderSearchable()}
diff --git a/src/ui/common/attributes/AttributeInfoComposite.js b/src/ui/common/attributes/AttributeInfoComposite.js
index 80ff948e2..346971c09 100644
--- a/src/ui/common/attributes/AttributeInfoComposite.js
+++ b/src/ui/common/attributes/AttributeInfoComposite.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col } from 'patternfly-react';
-
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import PropTypes from 'prop-types';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
 
-const AttributeInfoComposite = () => (
+const AttributeInfoComposite = ({ prefixName }) => (
   <Row>
     <Col xs={12}>
       <fieldset className="no-padding">
@@ -18,7 +18,7 @@ const AttributeInfoComposite = () => (
         </legend>
         <Field
           component={RenderTextInput}
-          name="compositeAttributeType"
+          name={`${prefixName}compositeAttributeType`}
           label={
             <FormLabel labelId="app.type" />
             }
@@ -29,4 +29,13 @@ const AttributeInfoComposite = () => (
   </Row>
 );
 
+AttributeInfoComposite.propTypes = {
+  prefixName: PropTypes.string,
+};
+
+AttributeInfoComposite.defaultProps = {
+  prefixName: '',
+};
+
+
 export default AttributeInfoComposite;
diff --git a/src/ui/common/attributes/AttributeListTable.js b/src/ui/common/attributes/AttributeListTable.js
index 18e208656..f3bf62319 100644
--- a/src/ui/common/attributes/AttributeListTable.js
+++ b/src/ui/common/attributes/AttributeListTable.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { FieldArray } from 'redux-form';
+import { FieldArray } from 'formik';
 import { Col } from 'patternfly-react';
 import AttributeListTableActions from 'ui/common/attributes/AttributeListTableActions';
 
@@ -35,15 +35,18 @@ const AttributeListTable = ({
         </thead>
         <tbody>
           <FieldArray
-            attributes={attributes}
-            onClickDelete={onClickDelete}
-            onMoveUp={onMoveUp}
-            onMoveDown={onMoveDown}
-            entityCode={entityCode}
-            routeToEdit={routeToEdit}
             name="attributes"
-            component={AttributeListTableActions}
-            rerenderOnEveryChange
+            render={formik => (<AttributeListTableActions
+              {...formik}
+              attributes={attributes}
+              onClickDelete={onClickDelete}
+              onMoveUp={onMoveUp}
+              onMoveDown={onMoveDown}
+              entityCode={entityCode}
+              routeToEdit={routeToEdit}
+              rerenderOnEveryChange
+            />)}
+
           />
         </tbody>
       </table>
diff --git a/src/ui/common/attributes/AttributeListTableActions.js b/src/ui/common/attributes/AttributeListTableActions.js
index b6e6a53d2..fdbb5e25d 100644
--- a/src/ui/common/attributes/AttributeListTableActions.js
+++ b/src/ui/common/attributes/AttributeListTableActions.js
@@ -28,6 +28,7 @@ const AttributeListTableActions = ({
   onMoveDown,
   routeToEdit,
   entityCode,
+  move,
 }) =>
   attributes.map((attribute, index) => {
     const isMovableUp = index > 0;
@@ -66,7 +67,7 @@ const AttributeListTableActions = ({
                   className="AttributeListMenuAction__menu-item-move-up"
                   onClick={() => {
                     onMoveUp(entityCode, attribute.code, index);
-                    fields.move(index, index - 1);
+                    move(index, index - 1);
                   }
                 }
                 >
@@ -80,7 +81,7 @@ const AttributeListTableActions = ({
                 className="AttributeListMenuAction__menu-item-move-down"
                 onClick={() => {
                    onMoveDown(entityCode, attribute.code, index);
-                   fields.move(index, index + 1);
+                   move(index, index + 1);
                 }
               }
               >
diff --git a/src/ui/common/attributes/AttributeListTableComposite.js b/src/ui/common/attributes/AttributeListTableComposite.js
index 557ceb79b..935af6f0e 100644
--- a/src/ui/common/attributes/AttributeListTableComposite.js
+++ b/src/ui/common/attributes/AttributeListTableComposite.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { Field, FieldArray } from 'redux-form';
+import { Field, FieldArray } from 'formik';
 import { InputGroup, Button, Col, DropdownKebab, MenuItem } from 'patternfly-react';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import AttributeCheckIcon from 'ui/common/attributes/AttributeCheckIcon';
 
@@ -19,6 +19,7 @@ const AttributeListTableComposite = (props) => {
     invalid,
     submitting,
     isMonolistCompositeType,
+    prefixName,
   } = props;
   const name = isMonolistCompositeType ? 'nestedAttribute.compositeAttributes' : 'compositeAttributes';
   const selectOptions = attributesList
@@ -41,7 +42,7 @@ const AttributeListTableComposite = (props) => {
           label={
             <FormLabel labelId="DataType.type" required />
               }
-          name="type"
+          name={`${prefixName}type`}
         />
         <span className="input-group-btn">
           <Button
@@ -61,7 +62,7 @@ const AttributeListTableComposite = (props) => {
     </div>
   );
 
-  const renderAttributes = ({ fields }) =>
+  const renderAttributes = fieldArrayProps =>
     compositeAttributes.map((attribute, index) => {
       const isMovableUp = index > 0;
       const isMovableDown = index < compositeAttributes.length - 1;
@@ -80,7 +81,7 @@ const AttributeListTableComposite = (props) => {
                   <MenuItem
                     className="AttributeListMenuAction__menu-item-move-up"
                     onClick={() => {
-                      fields.move(index - 1, index);
+                      fieldArrayProps.move(index - 1, index);
                       onMove(index, index - 1, isMonolistCompositeType);
                     }}
                   >
@@ -93,7 +94,7 @@ const AttributeListTableComposite = (props) => {
                   <MenuItem
                     className="AttributeListMenuAction__menu-item-move-down"
                     onClick={() => {
-                      fields.move(index, index + 1);
+                      fieldArrayProps.move(index, index + 1);
                       onMove(index, index + 1, isMonolistCompositeType);
                     }}
                   >
@@ -104,7 +105,7 @@ const AttributeListTableComposite = (props) => {
               <MenuItem
                 className="AttributeListMenuAction__menu-item-delete"
                 onClick={() => {
-                  fields.remove(index);
+                  fieldArrayProps.remove(index);
                   onClickDelete(attribute.code, isMonolistCompositeType);
                 }}
               >
@@ -138,7 +139,7 @@ const AttributeListTableComposite = (props) => {
         </thead>
         <tbody>
           <FieldArray
-            name={name}
+            name={prefixName + name}
             compositeAttributes={compositeAttributes}
             component={renderAttributes}
           />
@@ -164,12 +165,14 @@ AttributeListTableComposite.propTypes = {
   invalid: PropTypes.bool,
   submitting: PropTypes.bool,
   isMonolistCompositeType: PropTypes.bool,
+  prefixName: PropTypes.string,
 };
 
 AttributeListTableComposite.defaultProps = {
   invalid: false,
   submitting: false,
   isMonolistCompositeType: false,
+  prefixName: '',
 };
 
 export default AttributeListTableComposite;
diff --git a/src/ui/common/attributes/AttributeMonoListMonoSettings.js b/src/ui/common/attributes/AttributeMonoListMonoSettings.js
index 110caf56b..004862147 100644
--- a/src/ui/common/attributes/AttributeMonoListMonoSettings.js
+++ b/src/ui/common/attributes/AttributeMonoListMonoSettings.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col } from 'patternfly-react';
 import { required } from '@entando/utils';
-import { Field, FormSection } from 'redux-form';
-
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import { Field } from 'formik';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 import FormLabel from 'ui/common/form/FormLabel';
 
 const AttributeMonoListMonoSettings = ({ attributesList }) => {
@@ -21,18 +21,16 @@ const AttributeMonoListMonoSettings = ({ attributesList }) => {
           <legend>
             <FormattedMessage id="app.settings" />
           </legend>
-          <FormSection name="nestedAttribute">
-            <Field
-              component={RenderSelectInput}
-              options={selectAttribute}
-              defaultOptionId="app.chooseAnOption"
-              label={
-                <FormLabel labelId="app.list" required />
+          <Field
+            component={RenderSelectInput}
+            options={selectAttribute}
+            defaultOptionId="app.chooseAnOption"
+            label={
+              <FormLabel labelId="app.list" required />
               }
-              name="type"
-              validate={[required]}
-            />
-          </FormSection>
+            name="nestedAttribute.type"
+            validate={value => convertReduxValidationsToFormikValidations(value, [required])}
+          />
         </fieldset>
       </Col>
     </Row>
diff --git a/src/ui/common/attributes/AttributeOgnlValidation.js b/src/ui/common/attributes/AttributeOgnlValidation.js
index 94cb0e559..b3e334b04 100644
--- a/src/ui/common/attributes/AttributeOgnlValidation.js
+++ b/src/ui/common/attributes/AttributeOgnlValidation.js
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col, FormGroup } from 'patternfly-react';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import SwitchRenderer from 'ui/common/formik-field/RenderSwitchInput';
+import PropTypes from 'prop-types';
 
-const AttributeOgnlValidation = () => (
+const AttributeOgnlValidation = ({ prefixName }) => (
   <Row>
     <Col xs={12}>
       <fieldset className="no-padding">
@@ -19,7 +20,7 @@ const AttributeOgnlValidation = () => (
         <p><FormattedMessage id="app.ognl.validation.help4" /></p>
         <Field
           component={RenderTextInput}
-          name="ognlValidation.ognlExpression"
+          name={`${prefixName}validationRules.ognlValidation.ognlExpression`}
           label={
             <FormLabel labelId="app.ognl.expression" />
           }
@@ -29,7 +30,7 @@ const AttributeOgnlValidation = () => (
             <FormLabel labelId="app.apply.expression" />
           </label>
           <Col xs={4}>
-            <Field component={SwitchRenderer} name="ognlValidation.applyOnlyToFilledAttr" />
+            <Field component={SwitchRenderer} name={`${prefixName}validationRules.ognlValidation.applyOnlyToFilledAttr`} />
           </Col>
         </FormGroup>
 
@@ -39,28 +40,28 @@ const AttributeOgnlValidation = () => (
 
         <Field
           component={RenderTextInput}
-          name="ognlValidation.helpMessage"
+          name={`${prefixName}validationRules.ognlValidation.helpMessage`}
           label={
             <FormLabel labelId="app.help.message" />
           }
         />
         <Field
           component={RenderTextInput}
-          name="ognlValidation.keyForHelpMessage"
+          name={`${prefixName}validationRules.ognlValidation.keyForHelpMessage`}
           label={
             <FormLabel labelId="app.help.message.key" />
           }
         />
         <Field
           component={RenderTextInput}
-          name="ognlValidation.errorMessage"
+          name={`${prefixName}validationRules.ognlValidation.errorMessage`}
           label={
             <FormLabel labelId="app.error.message" />
           }
         />
         <Field
           component={RenderTextInput}
-          name="ognlValidation.keyForErrorMessage"
+          name={`${prefixName}validationRules.ognlValidation.keyForErrorMessage`}
           label={
             <FormLabel labelId="app.error.message.key" />
                 }
@@ -70,4 +71,13 @@ const AttributeOgnlValidation = () => (
   </Row>
 );
 
+AttributeOgnlValidation.propTypes = {
+  prefixName: PropTypes.string,
+};
+
+AttributeOgnlValidation.defaultProps = {
+  prefixName: '',
+};
+
+
 export default AttributeOgnlValidation;
diff --git a/src/ui/common/attributes/AttributeRole.js b/src/ui/common/attributes/AttributeRole.js
index 8e4794a60..d67c9e06b 100644
--- a/src/ui/common/attributes/AttributeRole.js
+++ b/src/ui/common/attributes/AttributeRole.js
@@ -3,8 +3,8 @@ import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col, FormGroup } from 'patternfly-react';
-import { FieldArray } from 'redux-form';
-import RoleSelectRenderer from 'ui/common/form/RoleSelectRenderer';
+import { FieldArray } from 'formik';
+import RoleSelectRenderer from 'ui/common/formik-field/RoleSelectRenderer';
 
 class AttributeRole extends Component {
   componentWillMount() {
@@ -12,7 +12,7 @@ class AttributeRole extends Component {
   }
 
   render() {
-    const { joinAllowedOptions, allowedRoles, allRoles } = this.props;
+    const { allowedRoles, allRoles, form } = this.props;
 
     const selectAllowedOptions = allowedRoles.map(item => (
       {
@@ -31,7 +31,7 @@ class AttributeRole extends Component {
     const getAttributeRoleLabel = item => item && `${item.value} - ${item.text}`;
 
     const roleWrapper = () => {
-      if (isEmpty(allowedRoles) && isEmpty(joinAllowedOptions)) {
+      if (isEmpty(allowedRoles) && isEmpty(form.initialValues.joinRoles)) {
         return (
           <FormGroup>
             <Col xs={10}>
@@ -48,14 +48,17 @@ class AttributeRole extends Component {
           </label>
           <Col xs={10}>
             <FieldArray
-              component={RoleSelectRenderer}
               name="joinRoles"
-              options={selectAllowedOptions}
-              allRoles={allOptions}
-              selectedValues={joinAllowedOptions}
-              valueKey="value"
-              labelFn={getAttributeRoleLabel}
-              emptyOptionTextId="app.chooseARole"
+              render={formik => (<RoleSelectRenderer
+                {...formik}
+                options={selectAllowedOptions}
+                allRoles={allOptions}
+                valueKey="value"
+                labelFn={getAttributeRoleLabel}
+                emptyOptionTextId="app.chooseARole"
+
+              />)}
+
             />
           </Col>
         </FormGroup>
@@ -88,6 +91,11 @@ AttributeRole.propTypes = {
     descr: PropTypes.string,
   })),
   joinAllowedOptions: PropTypes.arrayOf(PropTypes.string),
+  form: PropTypes.shape({
+    initialValues: PropTypes.shape({
+      joinRoles: PropTypes.arrayOf(),
+    }),
+  }),
 };
 
 AttributeRole.defaultProps = {
@@ -95,6 +103,9 @@ AttributeRole.defaultProps = {
   allowedRoles: [],
   allRoles: [],
   joinAllowedOptions: [],
+  form: {
+    initialValues: {},
+  },
 };
 
 
diff --git a/src/ui/common/attributes/AttributesDateSettings.js b/src/ui/common/attributes/AttributesDateSettings.js
index d9a9cc997..1fd7747fc 100644
--- a/src/ui/common/attributes/AttributesDateSettings.js
+++ b/src/ui/common/attributes/AttributesDateSettings.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col } from 'patternfly-react';
 import FormLabel from 'ui/common/form/FormLabel';
-import RenderDatePickerInput from 'ui/common/form/RenderDatePickerInput';
+import RenderDatePickerInput from 'ui/common/formik-field/RenderDatePickerInput';
+import PropTypes from 'prop-types';
 
-const AttributesDateSettings = () => (
+const AttributesDateSettings = ({ prefixName }) => (
   <Row>
     <Col xs={12}>
       <fieldset className="no-padding">
@@ -13,39 +14,41 @@ const AttributesDateSettings = () => (
           <FormattedMessage id="app.settings" />
         </legend>
         <Field
-          component={RenderDatePickerInput}
-          name="rangeStartDate"
-          dateFormat="DD/MM/YYYY"
-          label={
-            <FormLabel labelId="app.from" />
-          }
-        />
+          name={`${prefixName}validationRules.rangeStartDate`}
+        >
+          {formik => (<RenderDatePickerInput
+            {...formik}
+            label={<FormLabel labelId="app.from" />}
+          />)}
+        </Field >
         <Col xs={10} xsOffset={2}>
           <div className="AttributesDateSettings__placeholder">
             <FormattedMessage id="app.date.placeholder" />
           </div>
         </Col>
         <Field
-          component={RenderDatePickerInput}
-          name="rangeEndDate"
-          dateFormat="DD/MM/YYYY"
-          label={
-            <FormLabel labelId="app.to" />
-          }
-        />
+          name={`${prefixName}validationRules.rangeEndDate`}
+        >
+          {formik => (<RenderDatePickerInput
+            {...formik}
+            label={<FormLabel labelId="app.to" />}
+          />)}
+        </Field>
         <Col xs={10} xsOffset={2}>
           <div className="AttributesDateSettings__placeholder">
             <FormattedMessage id="app.date.placeholder" />
           </div>
         </Col>
         <Field
-          component={RenderDatePickerInput}
-          name="equalDate"
-          dateFormat="DD/MM/YYYY"
-          label={
-            <FormLabel labelId="app.equal" />
+          name={`${prefixName}validationRules.equalDate`}
+        >
+          {formik => (<RenderDatePickerInput
+            {...formik}
+            label={
+              <FormLabel labelId="app.equal" />
           }
-        />
+          />)}
+        </Field>
         <Col xs={10} xsOffset={2}>
           <div className="AttributesDateSettings__placeholder">
             <FormattedMessage id="app.date.placeholder" />
@@ -56,4 +59,13 @@ const AttributesDateSettings = () => (
   </Row>
 );
 
+
+AttributesDateSettings.propTypes = {
+  prefixName: PropTypes.string,
+};
+
+AttributesDateSettings.defaultProps = {
+  prefixName: '',
+};
+
 export default AttributesDateSettings;
diff --git a/src/ui/common/attributes/AttributesNumber.js b/src/ui/common/attributes/AttributesNumber.js
index 89986b38f..8ac5ec18b 100644
--- a/src/ui/common/attributes/AttributesNumber.js
+++ b/src/ui/common/attributes/AttributesNumber.js
@@ -1,12 +1,14 @@
 import React from 'react';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col } from 'patternfly-react';
 import { isNumber } from '@entando/utils';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
+import PropTypes from 'prop-types';
 
-const AttributesNumber = () => (
+const AttributesNumber = ({ prefixName }) => (
   <Row>
     <Col xs={12}>
       <fieldset className="no-padding">
@@ -15,31 +17,40 @@ const AttributesNumber = () => (
         </legend>
         <Field
           component={RenderTextInput}
-          name="rangeStartNumber"
+          name={`${prefixName}validationRules.rangeStartNumber`}
           label={
             <FormLabel labelId="app.from" />
           }
-          validate={[isNumber]}
+          validate={value => convertReduxValidationsToFormikValidations(value, [isNumber])}
         />
         <Field
           component={RenderTextInput}
-          name="rangeEndNumber"
+          name={`${prefixName}validationRules.rangeEndNumber`}
           label={
             <FormLabel labelId="app.to" />
           }
-          validate={[isNumber]}
+          validate={value => convertReduxValidationsToFormikValidations(value, [isNumber])}
         />
         <Field
           component={RenderTextInput}
-          name="equalNumber"
+          name={`${prefixName}validationRules.equalNumber`}
           label={
             <FormLabel labelId="app.equal" />
           }
-          validate={[isNumber]}
+          validate={value => convertReduxValidationsToFormikValidations(value, [isNumber])}
         />
       </fieldset>
     </Col>
   </Row>
 );
 
+
+AttributesNumber.propTypes = {
+  prefixName: PropTypes.string,
+};
+
+AttributesNumber.defaultProps = {
+  prefixName: '',
+};
+
 export default AttributesNumber;
diff --git a/src/ui/common/form/AttributeForm.js b/src/ui/common/form/AttributeForm.js
index ba843e85b..88908d429 100644
--- a/src/ui/common/form/AttributeForm.js
+++ b/src/ui/common/form/AttributeForm.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, FormSection } from 'redux-form';
+import { withFormik, Form } from 'formik';
 import { FormattedMessage, intlShape } from 'react-intl';
 import { Button, Row, Col, Alert } from 'patternfly-react';
 import AttributeInfo from 'ui/common/attributes/AttributeInfo';
@@ -31,8 +31,9 @@ import {
   TYPE_THREESTATE,
   TYPE_TIMESTAMP,
 } from 'state/profile-types/const';
+import { selectedAttributeSectionFieldsAndOgnlValidation } from 'ui/common/attributes/AttributeFormUtils';
 
-export class AttributeFormBody extends Component {
+class AttributeFormBody extends Component {
   componentDidMount() {
     this.props.onDidMount();
   }
@@ -48,10 +49,8 @@ export class AttributeFormBody extends Component {
       attributesList,
       handleSubmit,
       onCancel,
-      onSubmit,
-      allowedRoles,
-      invalid,
-      submitting,
+      isValid,
+      isSubmitting,
       intl,
       onDiscard,
       onSave,
@@ -85,6 +84,7 @@ export class AttributeFormBody extends Component {
     };
 
     const renderSelectedAttribute = () => {
+      if (!selectedAttributeType) return null;
       switch (selectedAttributeType.code) {
         case TYPE_BOOLEAN: return null;
         case TYPE_CHECKBOX: return null;
@@ -99,16 +99,8 @@ export class AttributeFormBody extends Component {
               attributeType={selectedAttributeType}
               attributesList={attributesList}
             />;
-        case TYPE_NUMBER: return (
-          <FormSection name="validationRules">
-            <AttributesNumber {...this.props} />
-          </FormSection>
-        );
-        case TYPE_DATE: return (
-          <FormSection name="validationRules">
-            <AttributesDateSettings />
-          </FormSection>
-        );
+        case TYPE_NUMBER: return <AttributesNumber {...this.props} />;
+        case TYPE_DATE: return <AttributesDateSettings {...this.props} />;
         case TYPE_ENUMERATOR: return (
           <AttributeEnumSettings
             enumeratorExtractorBeans={selectedAttributeType.enumeratorExtractorBeans}
@@ -126,19 +118,12 @@ export class AttributeFormBody extends Component {
               {...this.props}
             /> : null;
         }
-        default: return (
-          <FormSection name="validationRules">
-            <AttributeHypeLongMonoTextSettings {...this.props} />
-          </FormSection>
-        );
+        default: return <AttributeHypeLongMonoTextSettings {...this.props} />;
       }
     };
 
     const renderOgnlValidation = () => (
-      !isComposite ?
-        <FormSection name="validationRules">
-          <AttributeOgnlValidation />
-        </FormSection> : null
+      !isComposite ? <AttributeOgnlValidation /> : null
     );
 
     const header = () => {
@@ -166,12 +151,7 @@ export class AttributeFormBody extends Component {
     };
 
     return (
-      <form
-        onSubmit={handleSubmit(values => (
-            onSubmit(values, allowedRoles, mode)
-          ))}
-        className="form-horizontal"
-      >
+      <Form onSubmit={handleSubmit} className="form-horizontal">
         <Row>
           <Col xs={12}>
             {header()}
@@ -194,7 +174,7 @@ export class AttributeFormBody extends Component {
               className="pull-right AttributeForm__continue--btn"
               type="submit"
               bsStyle="primary"
-              disabled={invalid || submitting}
+              disabled={!isValid || isSubmitting}
             >
               <FormattedMessage id={labelsubmit} />
             </Button>
@@ -202,20 +182,20 @@ export class AttributeFormBody extends Component {
               onClick={handleCancelClick}
               className="pull-right ContentTypeAttributeForm__cancel-btn"
               type="reset"
-              disabled={submitting}
+              disabled={isSubmitting}
             >
               <FormattedMessage id="cms.label.cancel" />
             </Button>
             <ConfirmCancelModalContainer
               contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
-              invalid={invalid}
-              submitting={submitting}
+              invalid={!isValid}
+              submitting={isSubmitting}
               onSave={onSave}
               onDiscard={() => onDiscard(mode)}
             />
           </Col>
         </Row>
-      </form>
+      </Form>
     );
   }
 }
@@ -228,8 +208,8 @@ AttributeFormBody.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   dataTypeAttributeCode: PropTypes.string,
   profileTypeAttributeCode: PropTypes.string,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   initialValues: PropTypes.shape({
     type: PropTypes.string.isRequired,
   }),
@@ -269,8 +249,8 @@ AttributeFormBody.propTypes = {
 
 AttributeFormBody.defaultProps = {
   onDidMount: () => {},
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isSubmitting: false,
   dataTypeAttributeCode: '',
   profileTypeAttributeCode: '',
   initialValues: {},
@@ -286,8 +266,40 @@ AttributeFormBody.defaultProps = {
   dirty: false,
 };
 
-const AttributeForm = reduxForm({
-  form: 'addAttribute',
+
+const AttributeForm = withFormik({
+  validateOnMount: true,
+  enableReinitialize: true,
+  mapPropsToValues: ({
+    initialValues, isIndexable, isSearchable, selectedAttributeType, mode,
+  }) => {
+    const isComposite = mode === MODE_ADD_COMPOSITE;
+
+    return ({
+      ...initialValues,
+      // AttributeInfo
+      type: (initialValues && initialValues.type) || '',
+      code: initialValues.code || '',
+      name: initialValues.name || '',
+      mandatory: false,
+      ...(isIndexable ? { indexable: false } : {}),
+      ...(isSearchable ? { listFilter: false } : {}),
+      ...(isComposite ? { compositeAttributeType: initialValues.compositeAttributeType || '' } : {}),
+      // Roles
+      joinRoles: initialValues.joinRoles || [],
+      // selectedAttributeType
+      ...(initialValues
+        && selectedAttributeSectionFieldsAndOgnlValidation(
+          selectedAttributeType,
+          initialValues,
+          mode,
+          isComposite,
+        )),
+    });
+  },
+  handleSubmit: (values, { props: { onSubmit, allowedRoles, mode } }) => {
+    onSubmit(values, allowedRoles, mode);
+  },
 })(AttributeFormBody);
 
 export default AttributeForm;
diff --git a/src/ui/common/form/EditAttributeForm.js b/src/ui/common/form/EditAttributeForm.js
index d6d0720fc..a554b2a0e 100644
--- a/src/ui/common/form/EditAttributeForm.js
+++ b/src/ui/common/form/EditAttributeForm.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, FormSection } from 'redux-form';
+import { withFormik, Form } from 'formik';
 import { FormattedMessage, intlShape } from 'react-intl';
 import { Button, Row, Col, Alert } from 'patternfly-react';
 import AttributeInfo from 'ui/common/attributes/AttributeInfo';
@@ -15,6 +15,7 @@ import AttributesNumber from 'ui/common/attributes/AttributesNumber';
 import AttributesDateSettings from 'ui/common/attributes/AttributesDateSettings';
 import AttributeListTableComposite from 'ui/common/attributes/AttributeListTableComposite';
 import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
+import { cloneDeep } from 'lodash';
 
 import {
   MODE_ADD_COMPOSITE,
@@ -33,6 +34,7 @@ import {
   TYPE_THREESTATE,
   TYPE_TIMESTAMP,
 } from 'state/profile-types/const';
+import { selectedAttributeSectionFieldsAndOgnlValidation } from 'ui/common/attributes/AttributeFormUtils';
 
 export class EditAttributeFormBody extends Component {
   componentDidMount() {
@@ -42,7 +44,7 @@ export class EditAttributeFormBody extends Component {
   render() {
     const {
       selectedAttributeType, selectedAttributeTypeForAddComposite, attributeCode, mode,
-      nestedAttributeComposite, isSearchable, isIndexable, onSubmit, onCancel, onDiscard,
+      nestedAttributeComposite, isSearchable, isIndexable, handleSubmit, onCancel, onDiscard,
       onSave, dirty, submitting, intl, invalid, profileTypeAttributeCode,
     } = this.props;
     const isComposite = mode === MODE_EDIT_COMPOSITE || mode === MODE_ADD_COMPOSITE;
@@ -84,14 +86,14 @@ export class EditAttributeFormBody extends Component {
               attributesList={this.props.attributesList}
             />;
         case TYPE_NUMBER: return (
-          <FormSection name="validationRules">
+          <div name="validationRules">
             <AttributesNumber {...this.props} />
-          </FormSection>
+          </div>
         );
         case TYPE_DATE: return (
-          <FormSection name="validationRules">
+          <div name="validationRules">
             <AttributesDateSettings />
-          </FormSection>
+          </div>
         );
         case TYPE_ENUMERATOR: return (
           <AttributeEnumSettings mode={MODE_EDIT} />
@@ -106,11 +108,7 @@ export class EditAttributeFormBody extends Component {
               {...this.props}
             /> : null;
         }
-        default: return (
-          <FormSection name="validationRules">
-            <AttributeHypeLongMonoTextSettings {...this.props} />
-          </FormSection>
-        );
+        default: return <AttributeHypeLongMonoTextSettings {...this.props} />;
       }
     };
 
@@ -119,10 +117,7 @@ export class EditAttributeFormBody extends Component {
     );
 
     const renderOgnlValidation = () => (
-      !isComposite ?
-        <FormSection name="validationRules">
-          <AttributeOgnlValidation />
-        </FormSection> : null
+      !isComposite ? <AttributeOgnlValidation /> : null
     );
 
     const header = () => {
@@ -150,10 +145,8 @@ export class EditAttributeFormBody extends Component {
     };
 
     return (
-      <form
-        onSubmit={this.props.handleSubmit(values => (
-           onSubmit(values, this.props.allowedRoles, mode)
-         ))}
+      <Form
+        onSubmit={handleSubmit}
         className="form-horizontal"
       >
         <Row>
@@ -201,7 +194,7 @@ export class EditAttributeFormBody extends Component {
             />
           </Col>
         </Row>
-      </form>
+      </Form>
     );
   }
 }
@@ -227,7 +220,7 @@ EditAttributeFormBody.propTypes = {
   })),
   mode: PropTypes.string.isRequired,
   attributesList: PropTypes.arrayOf(PropTypes.string).isRequired,
-  nestedAttributeComposite: PropTypes.string.isRequired,
+  nestedAttributeComposite: PropTypes.string,
   isSearchable: PropTypes.bool,
   isIndexable: PropTypes.bool,
   onDiscard: PropTypes.func.isRequired,
@@ -248,10 +241,57 @@ EditAttributeFormBody.defaultProps = {
   isIndexable: false,
   dirty: false,
   fetchAttributeDetails: () => {},
+  nestedAttributeComposite: '',
 };
 
-const EditAttributeForm = reduxForm({
-  form: 'attribute',
+const EditAttributeForm = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({
+    initialValues, isIndexable, isSearchable,
+    selectedAttributeType, mode, selectedAttributeTypeForAddComposite,
+  }) => {
+    const isComposite = mode === MODE_EDIT_COMPOSITE || mode === MODE_ADD_COMPOSITE;
+    const isModeAddAttributeComposite = mode === MODE_ADD_ATTRIBUTE_COMPOSITE;
+
+    return ({
+      ...initialValues,
+      type: isModeAddAttributeComposite ? selectedAttributeTypeForAddComposite.code : (initialValues && initialValues.type) || '',
+      // AttributeInfo
+      code: !isModeAddAttributeComposite ? (initialValues && initialValues.code) || '' : '',
+      name: !isModeAddAttributeComposite ? (initialValues && initialValues.name) || '' : '',
+      mandatory: !isModeAddAttributeComposite
+        ? (initialValues && initialValues.mandatory) || false : false,
+      ...(isIndexable ?
+        {
+          indexable:
+          !isModeAddAttributeComposite ? initialValues && initialValues.indexable : false,
+        } : {}),
+      ...(isSearchable ?
+        {
+          listFilter:
+          !isModeAddAttributeComposite ? initialValues && initialValues.listFilter : false,
+        } : {}),
+      ...(isComposite ?
+        {
+          compositeAttributeType:
+          !isModeAddAttributeComposite ? (initialValues && initialValues.type) || '' : '',
+        } : {}),
+      // Roles
+      joinRoles: initialValues && initialValues.roles && initialValues.roles.map(role => role.code),
+      // selectedAttributeType
+      ...(initialValues && selectedAttributeType &&
+        selectedAttributeSectionFieldsAndOgnlValidation(
+          selectedAttributeType,
+          initialValues,
+          mode,
+          isComposite,
+        )),
+
+    });
+  },
+  handleSubmit: (values, { props: { onSubmit, allowedRoles, mode } }) => {
+    onSubmit(cloneDeep(values), allowedRoles, mode);
+  },
 })(EditAttributeFormBody);
 
 export default EditAttributeForm;
diff --git a/src/ui/common/form/MonolistAttributeForm.js b/src/ui/common/form/MonolistAttributeForm.js
index c9e854ef1..1d8104efa 100644
--- a/src/ui/common/form/MonolistAttributeForm.js
+++ b/src/ui/common/form/MonolistAttributeForm.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, FormSection, Field } from 'redux-form';
+import { withFormik, Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Button, Row, Col, FormGroup, Alert } from 'patternfly-react';
 import AttributeOgnlValidation from 'ui/common/attributes/AttributeOgnlValidation';
@@ -9,12 +9,12 @@ import AttributeEnumMapSettings from 'ui/common/attributes/AttributeEnumMapSetti
 import AttributesNumber from 'ui/common/attributes/AttributesNumber';
 import AttributesDateSettings from 'ui/common/attributes/AttributesDateSettings';
 import AttributeEnumSettings from 'ui/common/attributes/AttributeEnumSettings';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import SwitchRenderer from 'ui/common/formik-field/SwitchInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import AttributeListTableComposite from 'ui/common/attributes/AttributeListTableComposite';
 import AttributeInfoComposite from 'ui/common/attributes/AttributeInfoComposite';
-
+import { selectedMonolistAttributeSectionFieldsAndOgnlValidation } from 'ui/common/attributes/AttributeFormUtils';
 import {
   TYPE_BOOLEAN,
   TYPE_CHECKBOX,
@@ -50,8 +50,8 @@ export class MonolistAttributeFormBody extends Component {
 
   render() {
     const {
-      attributeCode, selectedAttribute, selectedAttributeType, isIndexable, type, invalid,
-      submitting, onSubmit, mode, attributesList, onAddAttribute, onClickDelete, onMove,
+      attributeCode, initialValues, selectedAttributeType, isIndexable, type, invalid,
+      submitting, mode, attributesList, onAddAttribute, onClickDelete, onMove,
       compositeAttributes, handleSubmit,
     } = this.props;
     const isMonoListComposite = mode === MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE;
@@ -60,11 +60,11 @@ export class MonolistAttributeFormBody extends Component {
       if (isIndexable) {
         return (
           <FormGroup>
-            <label htmlFor="indexable" className="col-xs-2 control-label">
+            <label htmlFor="nestedAttribute.indexable" className="col-xs-2 control-label">
               <FormLabel labelId="app.indexable" />
             </label>
             <Col xs={4}>
-              <Field component={SwitchRenderer} name="indexable" />
+              <Field component={SwitchRenderer} name="nestedAttribute.indexable" />
             </Col>
           </FormGroup>
         );
@@ -74,7 +74,7 @@ export class MonolistAttributeFormBody extends Component {
 
     const renderAttributeInfo = () => {
       if (isMonoListComposite) {
-        return <AttributeInfoComposite />;
+        return <AttributeInfoComposite prefixName="nestedAttribute." />;
       }
 
       return (!NO_INFO_ATTRIBUTE.includes(type) ?
@@ -87,7 +87,7 @@ export class MonolistAttributeFormBody extends Component {
           </legend>
           <Field
             component={RenderTextInput}
-            name="type"
+            name="nestedAttribute.type"
             label={<FormLabel labelId="app.type" />}
             disabled
           />
@@ -98,29 +98,19 @@ export class MonolistAttributeFormBody extends Component {
 
     const renderSelectedAttribute = () => {
       switch (attributeType) {
-        case TYPE_TEXT: return (
-          <FormSection name="validationRules">
-            <AttributeHypeLongMonoTextSettings {...this.props} />
-          </FormSection>
-        );
-        case TYPE_NUMBER: return (
-          <FormSection name="validationRules">
-            <AttributesNumber {...this.props} />
-          </FormSection>
-        );
-        case TYPE_DATE: return (
-          <FormSection name="validationRules">
-            <AttributesDateSettings {...this.props} />
-          </FormSection>
-        );
+        case TYPE_TEXT: return <AttributeHypeLongMonoTextSettings {...this.props} prefixName="nestedAttribute." />;
+        case TYPE_NUMBER: return <AttributesNumber {...this.props} prefixName="nestedAttribute." />;
+        case TYPE_DATE: return <AttributesDateSettings {...this.props} prefixName="nestedAttribute." />;
         case TYPE_ENUMERATOR: return (
           <AttributeEnumSettings
-            enumeratorExtractorBeans={selectedAttribute.enumeratorExtractorBeans}
+            enumeratorExtractorBeans={initialValues.enumeratorExtractorBeans}
+            prefixName="nestedAttribute."
           />
         );
         case TYPE_ENUMERATOR_MAP: return (
           <AttributeEnumMapSettings
-            enumeratorMapExtractorBeans={selectedAttribute.enumeratorMapExtractorBeans}
+            enumeratorMapExtractorBeans={initialValues.enumeratorMapExtractorBeans}
+            prefixName="nestedAttribute."
           />
         );
         case TYPE_COMPOSITE: {
@@ -134,6 +124,7 @@ export class MonolistAttributeFormBody extends Component {
               onMove={onMove}
               invalid={invalid}
               submitting={submitting}
+              prefixName="nestedAttribute."
             /> : null;
         }
         default: return null;
@@ -141,10 +132,7 @@ export class MonolistAttributeFormBody extends Component {
     };
 
     const renderOgnlValidation = () => (
-      !isMonoListComposite ?
-        <FormSection name="validationRules">
-          <AttributeOgnlValidation />
-        </FormSection> : null
+      !isMonoListComposite ? <AttributeOgnlValidation prefixName="nestedAttribute." /> : null
     );
 
 
@@ -158,17 +146,15 @@ export class MonolistAttributeFormBody extends Component {
           ({isMonoListComposite ? TYPE_MONOLIST : selectedAttributeType}).
         </Alert>
         <form
-          onSubmit={handleSubmit(values => onSubmit(values, mode, selectedAttribute))}
+          onSubmit={handleSubmit}
           className="form-horizontal"
         >
           <Row>
             <Col xs={12}>
               <fieldset className="no-padding">
-                <FormSection name="nestedAttribute">
-                  {renderAttributeInfo()}
-                  {renderSelectedAttribute()}
-                  {renderOgnlValidation()}
-                </FormSection>
+                {renderAttributeInfo()}
+                {renderSelectedAttribute()}
+                {renderOgnlValidation()}
               </fieldset>
             </Col>
           </Row>
@@ -200,7 +186,7 @@ MonolistAttributeFormBody.propTypes = {
   onMove: PropTypes.func,
   type: PropTypes.string,
   attributeCode: PropTypes.string,
-  selectedAttribute: PropTypes.shape({
+  initialValues: PropTypes.shape({
     enumeratorExtractorBeans: PropTypes.arrayOf(PropTypes.string),
     enumeratorMapExtractorBeans: PropTypes.arrayOf(PropTypes.shape({
       code: PropTypes.string,
@@ -226,15 +212,49 @@ MonolistAttributeFormBody.defaultProps = {
   isIndexable: false,
   type: '',
   attributeCode: '',
-  selectedAttribute: {},
+  initialValues: {},
   selectedAttributeType: TYPE_MONOLIST,
   mode: '',
   attributesList: [],
   onFetchNestedAttribute: () => {},
 };
 
-const MonolistAttributeForm = reduxForm({
-  form: 'attribute',
+const MonolistAttributeForm = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({
+    initialValues, isIndexable, isSearchable,
+  }) => ({
+    ...initialValues,
+    // AttributeInfo
+    ...(initialValues && {
+      nestedAttribute: {
+        ...initialValues.nestedAttribute,
+        type: (initialValues.nestedAttribute && initialValues.nestedAttribute.type) || '',
+        compositeAttributeType: (initialValues.nestedAttribute && initialValues.nestedAttribute.compositeAttributeType) || '',
+        code: (initialValues && initialValues.nestedAttribute && initialValues.code) || '',
+        name: (initialValues && initialValues.nestedAttribute && initialValues.name) || '',
+        mandatory: initialValues.nestedAttribute.mandatory || false,
+        ...(isIndexable ? {
+          indexable: (initialValues
+          && initialValues.nestedAttribute
+          && initialValues.nestedAttribute.indexable) || false,
+        } : {}),
+        ...(isSearchable ? {
+          listFilter: (initialValues
+          && initialValues.nestedAttribute
+           && initialValues.nestedAttribute.indexable) || false,
+        } : {}),
+        // selectedAttributeType
+        ...(
+          initialValues
+          && selectedMonolistAttributeSectionFieldsAndOgnlValidation(initialValues)
+        ),
+      },
+    }),
+  }),
+  handleSubmit: (values, { props: { onSubmit, allowedRoles, mode } }) => {
+    onSubmit(values, allowedRoles, mode);
+  },
 })(MonolistAttributeFormBody);
 
 export default MonolistAttributeForm;
diff --git a/src/ui/common/form/RenderSelectInput.js b/src/ui/common/form/RenderSelectInput.js
index 708ddef0a..b93e3af60 100644
--- a/src/ui/common/form/RenderSelectInput.js
+++ b/src/ui/common/form/RenderSelectInput.js
@@ -57,6 +57,7 @@ const RenderSelectInputBody = ({
       <Col xs={12} sm={inputSize || 12 - labelSize}>
         <select
           {...input}
+          id={input.name}
           size={size}
           className="form-control RenderSelectInput"
           disabled={disabled}
diff --git a/src/ui/common/formik-field/FilterValueOptionSelector.js b/src/ui/common/formik-field/FilterValueOptionSelector.js
new file mode 100644
index 000000000..fa6033bf2
--- /dev/null
+++ b/src/ui/common/formik-field/FilterValueOptionSelector.js
@@ -0,0 +1,653 @@
+import React, { Fragment, Component } from 'react';
+import PropTypes from 'prop-types';
+import { get, isUndefined, isEqual } from 'lodash';
+import { FormattedMessage, FormattedHTMLMessage, intlShape } from 'react-intl';
+import { Collapse } from 'react-collapse';
+import { Field } from 'formik';
+import FormLabel from 'ui/common/form/FormLabel';
+import RadioInput from 'ui/common/formik-field/RenderRadioInput';
+import TextInput from 'ui/common/formik-field/RenderTextInput';
+import DateFilterInput from 'ui/common/form/RenderDateFilterInput';
+import SwitchRenderer from 'ui/common/formik-field/RenderSwitchInput';
+
+import {
+  TEXT_FILTERABLE_ATTRIBUTES,
+  DATE_FILTERABLE_ATTRIBUTES,
+  BOOL_FILTERABLE_ATTRIBUTES,
+} from 'state/content-type/selectors';
+
+const TEXT_FILTERABLE = 'text_filterable_type';
+const DATE_FILTERABLE = 'date_filterable_type';
+const BOOL_FILTERABLE = 'boolean_filterable_type';
+
+const HAS_VALUE = 'valuePresence';
+const HAS_NO_VALUE = 'valueAbsence';
+const BY_VALUE_ONLY = 'valueOnly';
+const BY_VALUE_PARTIAL = 'valuePartial';
+const BY_RANGE = 'valueRange';
+
+const CLEAN_VALUES = {
+  value: undefined,
+  nullValue: undefined,
+  likeOption: undefined,
+  valueDateDelay: undefined,
+  startDateDelay: undefined,
+  endDateDelay: undefined,
+  start: undefined,
+  end: undefined,
+};
+
+class FilterValueOptionSelector extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      filterableType: '',
+      expanded: false,
+      optionSelected: '',
+      keyChanged: false,
+    };
+    this.handleHeadlineClick = this.handleHeadlineClick.bind(this);
+    this.handleValueChange = this.handleValueChange.bind(this);
+    this.handleValueTypeChange = this.handleValueTypeChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.beginFillState();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      attributeFilterChoices: prevAttr,
+      value: prevValue,
+    } = prevProps;
+    const { key: prevKey } = prevValue;
+
+    const {
+      attributeFilterChoices: attr,
+      value,
+    } = this.props;
+    const { key } = value;
+
+    const hasAllValueChanged = !isEqual({ ...prevValue, key: 1 }, { ...value, key: 1 });
+
+    const keyChanged = prevKey !== key;
+    if (keyChanged || prevAttr.length !== attr.length) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ keyChanged });
+      this.beginFillState(hasAllValueChanged);
+    }
+  }
+
+  componentWillUnmount() {
+    this.setState({
+      filterableType: '',
+      expanded: false,
+      optionSelected: '',
+    });
+  }
+
+  getAttributeType() {
+    const { value } = this.props;
+    const { key } = value;
+    const { attributeFilterChoices } = this.props;
+    const selectedAttributeType = attributeFilterChoices.find(attribute => attribute.code === key);
+    return get(selectedAttributeType, 'type', '');
+  }
+
+  beginFillState(valuePropChanged) {
+    const {
+      attributeFilterChoices: attrChoices,
+      value: { attributeFilter },
+    } = this.props;
+    const { keyChanged } = this.state;
+
+    if (attributeFilter && attrChoices && attrChoices.length > 0) {
+      const filterableType = this.determineFilterableType();
+      if (keyChanged && !valuePropChanged) {
+        if (filterableType === BOOL_FILTERABLE) {
+          this.handleValueChange({ ...CLEAN_VALUES, value: true });
+        } else {
+          this.handleValueChange({ ...CLEAN_VALUES });
+        }
+      }
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        filterableType,
+        optionSelected: this.determineOptionSelected(filterableType),
+      });
+    }
+  }
+
+  determineFilterableType() {
+    const type = this.getAttributeType();
+    if (TEXT_FILTERABLE_ATTRIBUTES.includes(type)) {
+      return TEXT_FILTERABLE;
+    }
+    if (DATE_FILTERABLE_ATTRIBUTES.includes(type)) {
+      return DATE_FILTERABLE;
+    }
+    if (BOOL_FILTERABLE_ATTRIBUTES.includes(type)) {
+      return BOOL_FILTERABLE;
+    }
+    return '';
+  }
+
+  determineOptionSelected(filterableType) {
+    const { value: propValue } = this.props;
+    const {
+      value,
+      start,
+      end,
+      nullValue,
+    } = propValue;
+    if (!isUndefined(start) || !isUndefined(end)) {
+      return BY_RANGE;
+    }
+    if (value) {
+      return filterableType === TEXT_FILTERABLE ? BY_VALUE_PARTIAL : BY_VALUE_ONLY;
+    }
+    if (nullValue) {
+      return HAS_NO_VALUE;
+    }
+    return HAS_VALUE;
+  }
+
+  handleHeadlineClick() {
+    const { expanded } = this.state;
+    this.setState({ expanded: !expanded });
+  }
+
+  handleValueChange(newProp) {
+    const { value: propValue, onChange, fieldIndex } = this.props;
+    const newValue = {
+      ...propValue,
+      ...newProp,
+    };
+    onChange(newValue, fieldIndex);
+  }
+
+  resetValueKeys(option, filterableType) {
+    switch (option) {
+      case BY_VALUE_ONLY:
+        if (filterableType === DATE_FILTERABLE) {
+          this.handleValueChange({ ...CLEAN_VALUES, value: 'today' });
+        } else {
+          this.handleValueChange({ ...CLEAN_VALUES, value: '' });
+        }
+        break;
+      case BY_VALUE_PARTIAL:
+        this.handleValueChange({ ...CLEAN_VALUES, value: '', likeOption: false });
+        break;
+      case BY_RANGE:
+        this.handleValueChange({ ...CLEAN_VALUES, start: '', end: '' });
+        break;
+      case HAS_NO_VALUE:
+        this.handleValueChange({ ...CLEAN_VALUES, nullValue: true });
+        break;
+      case HAS_VALUE:
+      default:
+        this.handleValueChange({ ...CLEAN_VALUES });
+    }
+  }
+
+  handleValueTypeChange({ currentTarget: { value } }) {
+    const { filterableType } = this.state;
+    this.resetValueKeys(value, filterableType);
+    this.setState({ optionSelected: value });
+  }
+
+  renderLabelWithSort(node) {
+    const { value } = this.props;
+    const { order } = value;
+    return (
+      <Fragment>
+        {node}{order && (
+          <FormattedMessage id={`widget.form.filterable.sort${order}`} />
+        )}
+      </Fragment>
+    );
+  }
+
+  renderLabelValue() {
+    const { value, intl } = this.props;
+    const { key, attributeFilter } = value;
+    const { optionSelected, filterableType } = this.state;
+    if (!attributeFilter) {
+      return this.renderLabelWithSort(<FormattedMessage
+        id={`widget.form.filteropt.${key === 'created' ? 'creationDate' : 'lastModify'}`}
+      />);
+    }
+    const {
+      value: filterValue,
+      start,
+      end,
+      valueDateDelay,
+      startDateDelay,
+      endDateDelay,
+      likeOption,
+    } = value;
+
+    if (filterableType === BOOL_FILTERABLE) {
+      if (!isUndefined(filterValue)) {
+        return this.renderLabelWithSort(<FormattedHTMLMessage
+          id="widget.form.filterable.valueOnly"
+          values={{ value: filterValue ? 'true' : 'false' }}
+        />);
+      }
+      return this.renderLabelWithSort(<FormattedHTMLMessage
+        id="widget.form.filterable.valueOnly"
+        values={{ value: 'all' }}
+      />);
+    }
+
+    switch (optionSelected) {
+      case BY_VALUE_ONLY: {
+        const rendered = (
+          <Fragment>
+            <FormattedHTMLMessage
+              id="widget.form.filterable.valueOnly"
+              values={{ value: filterValue }}
+            />
+            {valueDateDelay && (
+              <FormattedHTMLMessage
+                id="widget.form.filterable.valueDateDelay"
+                values={{ delay: valueDateDelay }}
+              />
+            )}
+          </Fragment>
+        );
+        return this.renderLabelWithSort(rendered);
+      }
+      case BY_VALUE_PARTIAL: {
+        const partial = likeOption
+          && intl.formatMessage({ id: 'widget.form.filterable.valuePartialPhrase' });
+        return this.renderLabelWithSort(<FormattedHTMLMessage
+          id="widget.form.filterable.valuePartial"
+          values={{ value: filterValue, partial }}
+        />);
+      }
+      case BY_RANGE: {
+        const fromMsg = start && (
+          <Fragment>
+            <FormattedHTMLMessage
+              id="widget.form.filterable.valueRangeStart"
+              values={{ start }}
+            />
+            {startDateDelay && (
+              <FormattedHTMLMessage
+                id="widget.form.filterable.valueDateDelay"
+                values={{ delay: startDateDelay }}
+              />
+            )}
+          </Fragment>
+        );
+        const toMsg = end && (
+          <Fragment>
+            <FormattedHTMLMessage
+              id="widget.form.filterable.valueRangeEnd"
+              values={{ end }}
+            />
+            {endDateDelay && (
+              <FormattedHTMLMessage
+                id="widget.form.filterable.valueDateDelay"
+                values={{ delay: endDateDelay }}
+              />
+            )}
+          </Fragment>
+        );
+
+        const rendered = (
+          <Fragment>
+            <FormattedMessage id="widget.form.filterable.labelRangeField" />
+            {' '}
+            {fromMsg}
+            {' '}
+            {toMsg}
+          </Fragment>
+        );
+
+        return this.renderLabelWithSort(rendered);
+      }
+      case HAS_NO_VALUE:
+        return this.renderLabelWithSort(<FormattedMessage
+          id="widget.form.filterable.valueAbsence"
+        />);
+      default:
+        return this.renderLabelWithSort(<FormattedMessage
+          id="widget.form.filterable.valuePresence"
+        />);
+    }
+  }
+
+  renderSelectOptions(options, keyCode = 'value') {
+    const { intl } = this.props;
+    return options
+      .map(item => (
+        <option key={`opt-${item[keyCode]}`} value={item[keyCode]}>
+          {item.name || intl.formatMessage({ id: item.nameId })}
+        </option>
+      ));
+  }
+
+  renderBooleanFilterValueOptions() {
+    const { intl, value: propValue, filter } = this.props;
+    const { value: filterValue } = propValue;
+    const boolChoices = [
+      {
+        id: 'true',
+        label: intl.formatMessage({ id: 'cms.label.yes' }),
+      },
+      {
+        id: 'false',
+        label: intl.formatMessage({ id: 'cms.label.no' }),
+      },
+      {
+        id: 'all',
+        label: intl.formatMessage({ id: 'cms.label.all' }),
+      },
+    ];
+    const boolValue = filterValue ? 'true' : 'false';
+    const value = isUndefined(filterValue) ? 'all' : boolValue;
+
+    const input = {
+      name: `${filter}.value`,
+      type: 'radio',
+      value,
+      onChange: (valueSelected) => {
+        switch (valueSelected) {
+          case 'true':
+            this.handleValueChange({ value: true });
+            break;
+          case 'false':
+            this.handleValueChange({ value: false });
+            break;
+          case 'all':
+          default:
+            this.handleValueChange({ value: undefined });
+            break;
+        }
+      },
+    };
+
+    return (
+      <Fragment>
+        <h5><FormattedMessage id="widget.form.options" /></h5>
+        <RadioInput
+          input={input}
+          hasLabel={false}
+          toggleElement={boolChoices}
+          meta={{ touched: false, error: false }}
+        />
+      </Fragment>
+    );
+  }
+
+  renderValueOnlyFields() {
+    const { value: propValue, filter } = this.props;
+    const { value } = propValue;
+    const { filterableType } = this.state;
+    const input = {
+      name: `${filter}.value`,
+      value,
+    };
+    return (
+      filterableType !== DATE_FILTERABLE ? (
+        <div className="FilterValueOptionSelector__top-options">
+          <TextInput
+            input={{
+              ...input,
+              onChange: ({ currentTarget: { value: v } }) => (
+                this.handleValueChange({ value: v })
+              ),
+            }}
+            label={<FormLabel labelId="widget.form.filterable.whichcontains" />}
+          />
+        </div>
+      ) : (
+        <div className="FilterValueOptionSelector__top-options">
+          <DateFilterInput
+            input={{
+              ...input,
+              ...propValue,
+              onChange: values => this.handleValueChange(values),
+            }}
+            delayKey="valueDateDelay"
+            label={<FormLabel labelId="widget.form.filterable.whichcontains" />}
+          />
+        </div>
+      )
+    );
+  }
+
+  renderRangeFields() {
+    const { value: propValue, filter } = this.props;
+    const { start, end } = propValue;
+    const { filterableType } = this.state;
+
+    if (filterableType === TEXT_FILTERABLE) {
+      const handleChangeRange = forValue => ({ target: { value } }) => (
+        this.handleValueChange({ [forValue]: value })
+      );
+
+      return (
+        <div className="FilterValueOptionSelector__top-options">
+          <TextInput
+            input={{
+              name: `${filter}.start`,
+              value: start,
+              onChange: handleChangeRange('start'),
+            }}
+            label={<FormLabel labelId="cms.label.from" />}
+          />
+          <TextInput
+            input={{
+              name: `${filter}.end`,
+              value: end,
+              onChange: handleChangeRange('end'),
+            }}
+            label={<FormLabel labelId="cms.label.to" />}
+          />
+        </div>
+      );
+    }
+    const handleChangeDateRange = forValue => values => (
+      this.handleValueChange({
+        ...values,
+        [forValue]: values.value,
+        value: undefined,
+      })
+    );
+    return (
+      <div className="FilterValueOptionSelector__top-options">
+        <DateFilterInput
+          input={{
+            name: `${filter}.start`,
+            ...propValue,
+            value: start,
+            onChange: handleChangeDateRange('start'),
+          }}
+          hasNone
+          delayKey="startDateDelay"
+          label={<FormLabel labelId="cms.label.from" />}
+        />
+        <DateFilterInput
+          input={{
+            name: `${filter}.end`,
+            ...propValue,
+            value: end,
+            onChange: handleChangeDateRange('end'),
+          }}
+          hasNone
+          delayKey="endDateDelay"
+          label={<FormLabel labelId="cms.label.to" />}
+        />
+      </div>
+    );
+  }
+
+  renderFilterValueOptions() {
+    const { filterableType, optionSelected } = this.state;
+    const { value: propValue, filter } = this.props;
+    const { value, likeOption } = propValue;
+    const filterChoices = [
+      { value: HAS_VALUE, nameId: 'widget.form.filterable.labelPresence' },
+      { value: HAS_NO_VALUE, nameId: 'widget.form.filterable.labelAbsence' },
+      (
+        filterableType === TEXT_FILTERABLE ? (
+          { value: BY_VALUE_PARTIAL, nameId: 'widget.form.filterable.labelPartial' }
+        ) : (
+          { value: BY_VALUE_ONLY, nameId: 'widget.form.filterable.labelOnly' }
+        )
+      ),
+      { value: BY_RANGE, nameId: 'widget.form.filterable.labelRange' },
+    ];
+
+    return (
+      <Fragment>
+        <h5><FormattedMessage id="widget.form.options" /></h5>
+        <select
+          value={optionSelected}
+          className="form-control"
+          onChange={this.handleValueTypeChange}
+        >
+          {this.renderSelectOptions(filterChoices)}
+        </select>
+        {optionSelected === BY_VALUE_ONLY && (
+          this.renderValueOnlyFields()
+        )}
+        {optionSelected === BY_VALUE_PARTIAL && (
+          <div className="FilterValueOptionSelector__top-options">
+            <TextInput
+              input={{
+                name: `${filter}.value`,
+                value,
+                onChange: ({ currentTarget: { value: v } }) => (
+                  this.handleValueChange({ value: v })
+                ),
+              }}
+              labelSize={3}
+              label={<FormLabel labelId="widget.form.filterable.whichcontains" />}
+            />
+            <SwitchRenderer
+              input={{
+                name: `${filter}.likeOption`,
+                value: likeOption || false,
+                onChange: like => this.handleValueChange({ likeOption: like || undefined }),
+              }}
+              label={<FormLabel labelId="widget.form.filterable.valuePartialLabel" />}
+              labelSize={3}
+              switchVals={{
+                trueValue: 'true',
+                falseValue: 'false',
+              }}
+            />
+          </div>
+        )}
+        {optionSelected === BY_RANGE && this.renderRangeFields()}
+      </Fragment>
+    );
+  }
+
+  renderAttributeFilter() {
+    const { filterableType } = this.state;
+    if (filterableType === BOOL_FILTERABLE) {
+      return this.renderBooleanFilterValueOptions();
+    }
+    return this.renderFilterValueOptions();
+  }
+
+  render() {
+    const { expanded } = this.state;
+    const { value: propValue, intl, filter } = this.props;
+    const {
+      order,
+      attributeFilter,
+      key,
+    } = propValue;
+
+    const sortFilters = [
+      {
+        id: '',
+        label: intl.formatMessage({ id: 'app.enumerator.none' }),
+      },
+      {
+        id: 'ASC',
+        label: intl.formatMessage({ id: 'widget.form.asc' }),
+      },
+      {
+        id: 'DESC',
+        label: intl.formatMessage({ id: 'widget.form.desc' }),
+      },
+    ];
+
+    if (!key) return null;
+
+    return (
+      <Fragment>
+        <legend className="FilterValueOptionSelector__top">
+          <div
+            onClick={this.handleHeadlineClick}
+            onKeyDown={this.handleHeadlineClick}
+            role="button"
+            tabIndex={0}
+            className="FilterValueOptionSelector__top-select"
+          >
+            <div className="FilterValueOptionSelector__top-caption">
+              {this.renderLabelValue()}
+            </div>
+            <span
+              className={`icon fa fa-chevron-${expanded ? 'up' : 'down'} FilterValueOptionSelector__collapse-button`}
+            />
+          </div>
+        </legend>
+        <Collapse isOpened={expanded}>
+          <div className="FilterValueOptionSelector__settings">
+            {attributeFilter && this.renderAttributeFilter()}
+            <h5><FormattedMessage id="widget.form.order" /></h5>
+            <Field
+              component={RadioInput}
+              name={`${filter}.order`}
+              type="radio"
+              value={order}
+              onChange={ord => this.handleValueChange({ order: ord })}
+              hasLabel={false}
+              toggleElement={sortFilters}
+              meta={{ touched: false, error: false }}
+            />
+          </div>
+        </Collapse>
+      </Fragment>
+    );
+  }
+}
+
+FilterValueOptionSelector.propTypes = {
+  intl: intlShape.isRequired,
+  value: PropTypes.shape({
+    value: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.string,
+    ]),
+    start: PropTypes.string,
+    end: PropTypes.string,
+    nullValue: PropTypes.bool,
+    key: PropTypes.string,
+    attributeFilter: PropTypes.bool,
+    likeOption: PropTypes.bool,
+    order: PropTypes.string,
+    valueDateDelay: PropTypes.string,
+    startDateDelay: PropTypes.string,
+    endDateDelay: PropTypes.string,
+  }),
+  filter: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  fieldIndex: PropTypes.number.isRequired,
+  attributeFilterChoices: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+FilterValueOptionSelector.defaultProps = {
+  value: {},
+  attributeFilterChoices: [],
+};
+
+export default FilterValueOptionSelector;
diff --git a/src/ui/common/formik-field/FiltersSelectRenderer.js b/src/ui/common/formik-field/FiltersSelectRenderer.js
new file mode 100644
index 000000000..3562b7eed
--- /dev/null
+++ b/src/ui/common/formik-field/FiltersSelectRenderer.js
@@ -0,0 +1,181 @@
+import React from 'react';
+import { Field, getIn } from 'formik';
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+import { FormattedMessage, intlShape } from 'react-intl';
+import { Button, ButtonGroup } from 'patternfly-react';
+
+import FilterValueOptionSelector from 'ui/common/formik-field/FilterValueOptionSelector';
+
+const FiltersSelectRenderer = (props) => {
+  const {
+    filterName, attributeFilterChoices,
+    options, suboptions, intl,
+    onChangeFilterValue, onChangeFilterAttribute,
+    onResetFilterOption, form, push, swap, remove, name,
+  } = props;
+
+  const filterOptions = opts => opts
+    .map(item => (
+      <option key={`opt-${item.code}`} value={item.code}>
+        {item.name || intl.formatMessage({ id: item.nameId })}
+      </option>
+    ));
+
+  const handleAddNewFilter = () => push({});
+
+  const handleFilterAttributeChange = (value, index) => {
+    onResetFilterOption(filterName, index, value);
+    const attributeFilter = attributeFilterChoices.findIndex(({ code }) => code === value) > -1;
+    onChangeFilterAttribute(name, index, attributeFilter);
+  };
+
+  const handleFilterChange = (value, index) => (
+    onChangeFilterValue(name, index, value)
+  );
+
+  const renderFilters = getIn(form.values, name) && getIn(form.values, name).map((filter, i) => {
+    const { key } = filter;
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <tr key={i}>
+        <td className="text-center" style={{ verticalAlign: 'middle' }}>
+          <div
+            onClick={() => remove(i)}
+            onKeyDown={() => remove(i)}
+            tabIndex={0}
+            role="button"
+          >
+            <span className="pficon pficon-delete" />
+          </div>
+        </td>
+        <td style={{ verticalAlign: 'middle' }}>
+          <Field
+            name={`${filterName}.${i}.key`}
+            as="select"
+            className="form-control"
+            onChange={
+              ({ currentTarget }) => handleFilterAttributeChange(currentTarget.value, i)
+            }
+          >
+            {filterOptions(options)}
+          </Field>
+        </td>
+        <td>
+          {(filterName === 'filters' || filterName === 'config.filters') && (
+            <FilterValueOptionSelector
+              value={filter}
+              intl={intl}
+              filter={`${filterName}.${i}`}
+              filterName={filterName}
+              fieldIndex={i}
+              attributeFilterChoices={attributeFilterChoices}
+              onChange={handleFilterChange}
+            />
+          )}
+          {filterName !== 'filters' && key
+            && suboptions[key] && suboptions[key].length > 0 && (
+              <Field
+                name={`${filterName}.${i}.categoryCode`}
+                as="select"
+                className="form-control"
+              >
+                {filterOptions(suboptions[key])}
+              </Field>
+          )}
+        </td>
+        <td className="text-center">
+          <ButtonGroup bsSize="small">
+            {
+              i !== 0
+              && (
+              <Button onClick={() => swap(i, i - 1)}>
+                <span className="icon fa fa-sort-asc" />
+              </Button>
+              )
+            }
+            {
+              i !== getIn(form.values, name).length - 1
+              && (
+              <Button onClick={() => swap(i, i + 1)}>
+                <span className="icon fa fa-sort-desc" />
+              </Button>
+              )
+            }
+          </ButtonGroup>
+        </td>
+      </tr>
+    );
+  });
+
+
+  return (
+    <div className="FiltersSelectRenderer">
+      <Table bordered>
+        <thead>
+          <tr>
+            <th
+              width="5%"
+            >
+              <FormattedMessage id="widget.form.remove" />
+            </th>
+            <th
+              width="25%"
+            >
+              <FormattedMessage id="widget.form.filters" />
+            </th>
+            <th
+              width="25%"
+            >
+              <FormattedMessage
+                id={`widget.form.${filterName === 'filters' ? 'settings' : 'options'}`}
+              />
+            </th>
+            <th
+              width="5%"
+            >
+              <FormattedMessage id="widget.form.reorder" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {renderFilters}
+        </tbody>
+      </Table>
+      <div className="FiltersSelectRenderer__add-wrapper">
+        <Button
+          className="FiltersSelectRenderer__add"
+          onClick={handleAddNewFilter}
+        ><FormattedMessage id="app.add" />
+        </Button>
+      </div>
+      <br />
+    </div>
+  );
+};
+
+
+FiltersSelectRenderer.propTypes = {
+  intl: intlShape.isRequired,
+  form: PropTypes.shape({
+    initialValues: PropTypes.shape({}),
+    values: PropTypes.shape({}),
+  }).isRequired,
+  push: PropTypes.func.isRequired,
+  swap: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  suboptions: PropTypes.shape({}),
+  onChangeFilterAttribute: PropTypes.func.isRequired,
+  onChangeFilterValue: PropTypes.func.isRequired,
+  onResetFilterOption: PropTypes.func.isRequired,
+  filterName: PropTypes.string.isRequired,
+  attributeFilterChoices: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};
+
+FiltersSelectRenderer.defaultProps = {
+  suboptions: {},
+};
+
+export default FiltersSelectRenderer;
diff --git a/src/ui/common/formik-field/IconUploader.js b/src/ui/common/formik-field/IconUploader.js
new file mode 100644
index 000000000..3255c3e23
--- /dev/null
+++ b/src/ui/common/formik-field/IconUploader.js
@@ -0,0 +1,157 @@
+import React, { useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useDropzone } from 'react-dropzone';
+import { Col, ControlLabel, Button, Spinner } from 'patternfly-react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { setVisibleModal } from 'state/modal/actions';
+import { getLoading } from 'state/loading/selectors';
+import { uploadIcon } from 'state/widgets/actions';
+import { getTouchErrorByField } from 'helpers/formikUtils';
+
+import WidgetIcon from 'ui/widgets/common/WidgetIcon';
+import IconLibrary, { MODAL_ID } from 'ui/widgets/common/IconLibrary';
+
+const IconUploader = ({
+  field, append, labelSize, label, help, alignClass, inputSize, disabled, 'data-testid': dataTestId,
+  form,
+}) => {
+  const dispatch = useDispatch();
+  const inputFileRef = useRef(null);
+  const { iconUpload: loading } = useSelector(getLoading);
+
+  const onDrop = useCallback((acceptedFiles) => {
+    if (acceptedFiles.length && !disabled) {
+      const fileName = `asset:${acceptedFiles[0].name.split('.')[0]}`;
+      dispatch(uploadIcon(acceptedFiles[0]))
+        .then(async () => {
+          await form.setFieldValue(field.name, fileName);
+          await form.setFieldTouched(field.name, true);
+        });
+    }
+  }, [disabled, dispatch, field.name, form]);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop, noClick: true, multiple: false, accept: 'image/svg+xml',
+  });
+
+  const handleIconLibraryClick = () => {
+    dispatch(setVisibleModal(MODAL_ID));
+  };
+
+  const handleIconSelect = async (selectedIcon) => {
+    await form.setFieldValue(field.name, `font-awesome:${selectedIcon}`);
+    await form.setFieldTouched(field.name, true);
+    dispatch(setVisibleModal(''));
+  };
+
+  const value = field.value ? field.value.split(':')[1] : null;
+  const isLoading = loading === 'iconUpload';
+
+  const { touched, error } = getTouchErrorByField(field.name, form);
+
+  return (
+    <div className={cx('IconUploader', (touched && error) ? 'form-group has-error' : 'form-group')}>
+      {
+        labelSize > 0 ? (
+          <Col xs={labelSize} className={alignClass}>
+            <ControlLabel htmlFor={field.name}>
+              {label} {help}
+            </ControlLabel>
+          </Col>
+        ) : ''
+      }
+      <Col xs={inputSize || 12 - labelSize}>
+        <div {...getRootProps()} className="IconUploader__container">
+          <Spinner loading={isLoading}>
+            <input {...field} data-testid={dataTestId} type="hidden" />
+            <input {...getInputProps()} ref={inputFileRef} />
+            {
+                field.value
+                    ?
+                      <div>
+                        <WidgetIcon icon={field.value} className="IconUploader__uploaded-icon" />
+                        <p className="IconUploader__description">{value}</p>
+                      </div>
+                    :
+                      <div>
+                        <span className="fa fa-cloud-upload IconUploader__icon" />
+                        <p className="IconUploader__description"><FormattedMessage id="widget.icon.description" /></p>
+                      </div>
+            }
+          </Spinner>
+          <div>
+            <Button
+              type="button"
+              bsStyle="default"
+              onClick={handleIconLibraryClick}
+              disabled={isLoading || disabled}
+            >
+              <FormattedMessage id="widget.icon.iconLibrary" />
+            </Button>
+            {' '}
+            <Button
+              type="button"
+              bsStyle="default"
+              onClick={() => {
+                  if (inputFileRef) {
+                      inputFileRef.current.click();
+                  }
+                }}
+              disabled={isLoading || disabled}
+            >
+              <FormattedMessage id="widget.icon.upload" />
+            </Button>
+          </div>
+        </div>
+        {append && <span className="AppendedLabel">{append}</span>}
+        {touched && ((error && <span className="help-block">{error}</span>))}
+      </Col>
+      <IconLibrary selected={value} onSelect={handleIconSelect} />
+    </div>
+  );
+};
+
+IconUploader.propTypes = {
+  field: PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
+    name: PropTypes.string,
+  }),
+  form: PropTypes.shape({
+    touched: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+    setFieldTouched: PropTypes.func,
+    setFieldValue: PropTypes.func,
+  }),
+  label: PropTypes.node,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    error: PropTypes.string,
+  }),
+  help: PropTypes.node,
+  disabled: PropTypes.bool,
+  labelSize: PropTypes.number,
+  inputSize: PropTypes.number,
+  alignClass: PropTypes.string,
+  append: PropTypes.string,
+  tourClass: PropTypes.string,
+  'data-testid': PropTypes.string,
+};
+
+IconUploader.defaultProps = {
+  field: {},
+  meta: {},
+  form: {},
+  labelSize: 2,
+  alignClass: 'text-right',
+  label: null,
+  help: null,
+  disabled: false,
+  inputSize: null,
+  append: '',
+  tourClass: '',
+  'data-testid': '',
+};
+
+export default IconUploader;
diff --git a/src/ui/common/formik-field/MultiFilterSelectRenderer.js b/src/ui/common/formik-field/MultiFilterSelectRenderer.js
new file mode 100644
index 000000000..7cdefe1cc
--- /dev/null
+++ b/src/ui/common/formik-field/MultiFilterSelectRenderer.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { formattedText } from '@entando/utils';
+import { InputGroup, Button, Label } from 'patternfly-react';
+
+
+class MultiFilterSelectRenderer extends Component {
+  constructor(props) {
+    super(props);
+    this.pushField = this.pushField.bind(this);
+    this.renderTags = this.renderTags.bind(this);
+    this.select = null;
+  }
+
+  pushField() {
+    if (!this.select || !this.select.value) {
+      return;
+    }
+    const {
+      selectedValues, allMode,
+      push, form: { setFieldValue }, name,
+    } = this.props;
+
+    const allBool = allMode && this.select.value === 'all';
+
+    if (allBool) {
+      setFieldValue(name, []);
+    }
+
+    if (this.select.value && !selectedValues.includes(this.select.value) && !allBool) {
+      push(this.select.value);
+    }
+  }
+
+  renderTags() {
+    const {
+      selectedValues, labelKey, valueKey, options,
+      remove,
+    } = this.props;
+    return selectedValues && selectedValues.map((value, i) => {
+      const elem = options.length ? options.find(opt => opt[valueKey] === value) : null;
+      return (
+        <Label key={value} bsStyle="primary" className="MultiSelectRenderer__tag">
+          {elem ? elem[labelKey] : ''}
+          <Button
+            bsStyle="link"
+            className="MultiSelectRenderer__remove-tag-btn"
+            onClick={() => remove(i)}
+          >
+            <i className="fa fa-times" />
+          </Button>
+        </Label>
+      );
+    });
+  }
+
+  render() {
+    const {
+      options, selectedValues, labelKey, valueKey, emptyOptionTextId, allMode,
+    } = this.props;
+
+    const filteredOptions = options
+      .filter(opt => !selectedValues.includes(opt[valueKey]) || allMode)
+      .map(item => (
+        <option key={`opt-${item[valueKey]}`} value={item[valueKey]}>
+          {item[labelKey]}
+        </option>
+      ));
+
+    if (emptyOptionTextId) {
+      const emptyOptionText = formattedText(emptyOptionTextId);
+      filteredOptions.unshift((
+        <option key={emptyOptionText} value="">
+          {emptyOptionText}
+        </option>
+      ));
+    }
+
+    return (
+      <div className="MultiSelectRenderer">
+        <InputGroup>
+          <select
+            className="form-control"
+            ref={(select) => { this.select = select; }}
+          >
+            {filteredOptions}
+          </select>
+          <span className="input-group-btn">
+            <Button
+              className="MultiSelectRenderer__add-btn"
+              bsStyle="primary"
+              onClick={this.pushField}
+            >
+              <i className="fa fa-plus" />
+            </Button>
+          </span>
+        </InputGroup>
+        <br />
+        { this.renderTags() }
+      </div>
+    );
+  }
+}
+
+
+MultiFilterSelectRenderer.propTypes = {
+  name: PropTypes.string.isRequired,
+  form: PropTypes.shape({
+    setFieldValue: PropTypes.func,
+  }).isRequired,
+  push: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  selectedValues: PropTypes.arrayOf(PropTypes.string),
+  valueKey: PropTypes.string,
+  labelKey: PropTypes.string,
+  emptyOptionTextId: PropTypes.string,
+  allMode: PropTypes.bool,
+};
+
+MultiFilterSelectRenderer.defaultProps = {
+  selectedValues: [],
+  valueKey: 'value',
+  labelKey: 'label',
+  emptyOptionTextId: '',
+  allMode: false,
+};
+
+export default MultiFilterSelectRenderer;
diff --git a/src/ui/common/formik-field/MultiSelectRenderer.js b/src/ui/common/formik-field/MultiSelectRenderer.js
new file mode 100644
index 000000000..e94a12944
--- /dev/null
+++ b/src/ui/common/formik-field/MultiSelectRenderer.js
@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape, injectIntl } from 'react-intl';
+import { InputGroup, Button, Label } from 'patternfly-react';
+
+class MultiSelectRenderer extends Component {
+  constructor(props) {
+    super(props);
+    this.pushField = this.pushField.bind(this);
+    this.select = null;
+  }
+
+  pushField() {
+    if (!this.select || !this.select.value) {
+      return;
+    }
+
+    const { arrayHelpers, name } = this.props;
+    const { form } = arrayHelpers;
+    const { values } = form;
+
+    const myValues = (values || {})[name] || [];
+
+    if (this.select.value && !myValues.includes(this.select.value)) {
+      arrayHelpers.push(this.select.value);
+    }
+  }
+
+  render() {
+    const {
+      allOptions,
+      labelKey,
+      valueKey,
+      emptyOptionTextId,
+      intl,
+      arrayHelpers,
+      name,
+      ...other
+    } = this.props;
+
+    const { form } = arrayHelpers;
+    const { values } = form;
+    const myValues = (values || {})[name] || [];
+
+    const filteredOptions = allOptions
+      .filter(opt => !myValues.includes(opt[valueKey]))
+      .map(item => (
+        <option key={`opt-${item[valueKey]}`} value={item[valueKey]}>
+          {item[labelKey]}
+        </option>
+      ));
+    const messages = defineMessages({
+      emptyOption: {
+        id: 'cms.chooseAnOption',
+        defaultMessage: 'Choose Option',
+      },
+    });
+
+    if (emptyOptionTextId) {
+      filteredOptions.unshift((
+        <option key={messages.emptyOption.id} value="">
+          {intl.formatMessage(messages.emptyOption)}
+        </option>
+      ));
+    }
+
+    const renderedTags = myValues.map((value, i) => (
+      <Label key={value} bsStyle="primary" className="MultiSelectRenderer__tag">
+        {allOptions.length ? allOptions.find(opt => opt[valueKey] === value)[labelKey] : ''}
+        <Button
+          bsStyle="link"
+          className="MultiSelectRenderer__remove-tag-btn"
+          onClick={() => arrayHelpers.remove(i)}
+        >
+          <i className="fa fa-times" />
+        </Button>
+      </Label>
+    ));
+
+    return (
+      <div className="MultiSelectRenderer">
+        <InputGroup>
+          <select
+            className="form-control"
+            ref={(select) => {
+              this.select = select;
+            }}
+            {...other}
+          >
+            {filteredOptions}
+          </select>
+          <span className="input-group-btn">
+            <Button
+              className="MultiSelectRenderer__add-btn"
+              bsStyle="primary"
+              onClick={this.pushField}
+            >
+              <i className="fa fa-plus" />
+            </Button>
+          </span>
+        </InputGroup>
+        <br />
+        {renderedTags}
+      </div>
+    );
+  }
+}
+
+MultiSelectRenderer.propTypes = {
+  fields: PropTypes.shape({
+    push: PropTypes.func,
+    remove: PropTypes.func,
+  }).isRequired,
+  allOptions: PropTypes.arrayOf(PropTypes.shape({})),
+  valueKey: PropTypes.string,
+  labelKey: PropTypes.string,
+  emptyOptionTextId: PropTypes.string,
+  intl: intlShape,
+  arrayHelpers: PropTypes.shape({
+    push: PropTypes.func,
+    remove: PropTypes.func,
+    form: PropTypes.shape({
+      values: PropTypes.shape({}),
+    }),
+  }).isRequired,
+  name: PropTypes.string,
+};
+
+MultiSelectRenderer.defaultProps = {
+  valueKey: 'value',
+  labelKey: 'label',
+  emptyOptionTextId: '',
+  intl: {},
+  allOptions: [],
+  name: '',
+};
+
+export default injectIntl(MultiSelectRenderer);
diff --git a/src/ui/common/formik-field/RenderDatePickerInput.js b/src/ui/common/formik-field/RenderDatePickerInput.js
new file mode 100644
index 000000000..54bb34d08
--- /dev/null
+++ b/src/ui/common/formik-field/RenderDatePickerInput.js
@@ -0,0 +1,147 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Col, Icon, ControlLabel } from 'patternfly-react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import moment from 'moment';
+import { isNull } from 'lodash';
+
+class RenderDatePickerInput extends Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentDidMount() {
+    const { onDidMount, ...otherProps } = this.props;
+    onDidMount(otherProps);
+  }
+
+  handleChange(date) {
+    const {
+      dateFormat, field, onPickDate, maxDate, minDate, form: { setFieldValue },
+    } = this.props;
+    const value = !isNull(date) ? date.format(dateFormat) : '';
+    const dateValue = moment(value, dateFormat);
+    if (maxDate && dateValue > maxDate) return;
+    if (minDate && dateValue < minDate) return;
+    field.onChange(value);
+    onPickDate(value);
+    setFieldValue(field.name, value);
+  }
+
+  render() {
+    const {
+      field,
+      name,
+      label,
+      help,
+      locale,
+      dateFormat,
+      alignClass,
+      placeholder,
+      meta: { touched, error },
+      isClearable,
+      hasCalendarIcon,
+      hasLabel,
+      labelSize,
+      inputSize,
+      xsClass,
+      maxDate,
+      minDate,
+    } = this.props;
+
+    const errorblock = touched ? error : '';
+    const calendar = hasCalendarIcon ? (
+      <span className="calendar-icon" type="submit">
+        <Icon name="calendar" />
+      </span>
+    ) : null;
+    const dateLimitProps = { ...(maxDate && { maxDate }), ...(minDate && { minDate }) };
+    return (
+      <div className={`RenderDatePickerInput ${(touched && error) ? 'form-group has-error' : 'form-group'}`}>
+        {hasLabel && (
+        <Col xs={12} sm={labelSize} className={`${alignClass} ${xsClass}`}>
+          <ControlLabel htmlFor={name}>
+            {label} {help}
+          </ControlLabel>
+        </Col>
+        )}
+        <Col xs={12} sm={inputSize || 12 - labelSize} className="RenderDatePickerInput__container">
+          <DatePicker
+            {...field}
+            {...dateLimitProps}
+            placeholder={placeholder}
+            selected={field.value ? moment(field.value, dateFormat) : null}
+            onChange={this.handleChange}
+            disabledKeyboardNavigation
+            locale={locale}
+            autoComplete="off"
+            dateFormat={dateFormat}
+            isClearable={isClearable}
+            calendarClassName="RenderDatePickerInput__calendar"
+            style={{ after: 'fa fa-calendar', display: 'inline-block' }}
+          />
+          {calendar}
+          <div className="help-block help-block-error">{errorblock}</div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+RenderDatePickerInput.propTypes = {
+  onDidMount: PropTypes.func,
+  field: PropTypes.shape({
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    name: PropTypes.string,
+  }).isRequired,
+  form: PropTypes.shape({
+    setFieldValue: PropTypes.func,
+  }).isRequired,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    error: PropTypes.shape({}),
+  }),
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  alignClass: PropTypes.string,
+  xsClass: PropTypes.string,
+  label: PropTypes.node,
+  help: PropTypes.node,
+  language: PropTypes.string,
+  dateFormat: PropTypes.string,
+  locale: PropTypes.string,
+  isClearable: PropTypes.bool,
+  hasLabel: PropTypes.bool,
+  hasCalendarIcon: PropTypes.bool,
+  labelSize: PropTypes.number,
+  inputSize: PropTypes.number,
+  onPickDate: PropTypes.func,
+  maxDate: PropTypes.objectOf({}),
+  minDate: PropTypes.objectOf({}),
+};
+
+RenderDatePickerInput.defaultProps = {
+  onDidMount: () => {},
+  name: '',
+  placeholder: '',
+  label: '',
+  help: null,
+  language: 'en',
+  dateFormat: 'DD/MM/YYYY',
+  locale: 'en',
+  meta: {},
+  isClearable: true,
+  hasLabel: true,
+  alignClass: '',
+  hasCalendarIcon: false,
+  labelSize: 2,
+  inputSize: null,
+  xsClass: 'mobile-left',
+  onPickDate: () => {},
+  maxDate: null,
+  minDate: null,
+};
+export default RenderDatePickerInput;
diff --git a/src/ui/common/formik-field/RenderDateTimePickerInput.js b/src/ui/common/formik-field/RenderDateTimePickerInput.js
new file mode 100644
index 000000000..7d8b98c49
--- /dev/null
+++ b/src/ui/common/formik-field/RenderDateTimePickerInput.js
@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'patternfly-react';
+import { Field } from 'redux-form';
+import { FormattedMessage } from 'react-intl';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import moment from 'moment';
+import { isNull } from 'lodash';
+import { zeroFill } from 'helpers/entities';
+
+class RenderDateTimePickerInput extends Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentWillMount() {
+    this.props.onWillMount();
+  }
+
+  handleChange(date) {
+    const value = !isNull(date) ? date.format(this.props.dateFormat) : '';
+    this.props.field.onChange(value);
+  }
+
+  render() {
+    const optionsHours = this.props.hoursList.map(item => zeroFill(item));
+    const optionsMinutes = this.props.minutesList.map(item => zeroFill(item));
+    const optionsSeconds = this.props.secondsList.map(item => zeroFill(item));
+
+    const {
+      field, name, label, help, locale, dateFormat, placeholder, meta: { touched, error },
+    } = this.props;
+    return (
+      <div className="form-group" >
+        <label htmlFor={name} className="col-xs-2 control-label">
+          {label} {help}
+        </label>
+        <Col xs={10}>
+          <Row>
+            <Col xs={3}>
+              <DatePicker
+                {...field}
+                placeholder={placeholder}
+                selected={field.value ? moment(field.value, this.props.dateFormat) : null}
+                onChange={this.handleChange}
+                disabledKeyboardNavigation
+                locale={locale}
+                dateFormat={dateFormat}
+                isClearable
+                calendarClassName="RenderDatePickerInput__calendar"
+              />
+            </Col>
+            <Col xs={3}>
+              <Field
+                name={`${field.name}_ts_hours`}
+                component="select"
+                className="form-control"
+              >
+                { optionsHours.map(value => (<option key={value}>{value}</option>)) }
+              </Field>
+              <span className="help help-block">
+                <FormattedMessage id="app.timestamp.hours" />
+              </span>
+            </Col>
+            <Col xs={3}>
+              <Field
+                name={`${field.name}_ts_minutes`}
+                component="select"
+                className="form-control"
+              >
+                { optionsMinutes.map(value => (<option key={value}>{value}</option>)) }
+              </Field>
+              <span className="help help-block">
+                <FormattedMessage id="app.timestamp.minutes" />
+              </span>
+            </Col>
+            <Col xs={3}>
+              <Field
+                name={`${field.name}_ts_seconds`}
+                component="select"
+                className="form-control"
+              >
+                { optionsSeconds.map(value => (<option key={value}>{value}</option>)) }
+              </Field>
+              <span className="help help-block">
+                <FormattedMessage id="app.timestamp.seconds" />
+              </span>
+            </Col>
+          </Row>
+          <Col xs={12}>
+            <div className="help-block help-block-error">
+              {touched ? error : ''}
+            </div>
+          </Col>
+        </Col>
+      </div>
+    );
+  }
+}
+
+RenderDateTimePickerInput.propTypes = {
+  onWillMount: PropTypes.func,
+  field: PropTypes.shape({
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    error: PropTypes.bool,
+  }),
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  label: PropTypes.node,
+  help: PropTypes.node,
+  language: PropTypes.string,
+  dateFormat: PropTypes.string,
+  locale: PropTypes.string,
+  hoursList: PropTypes.arrayOf(PropTypes.number),
+  minutesList: PropTypes.arrayOf(PropTypes.number),
+  secondsList: PropTypes.arrayOf(PropTypes.number),
+};
+
+RenderDateTimePickerInput.defaultProps = {
+  onWillMount: () => {},
+  name: '',
+  placeholder: '',
+  label: '',
+  help: null,
+  language: 'en',
+  dateFormat: 'DD/MM/YYYY',
+  locale: 'en',
+  meta: {},
+  hoursList: Array.from(Array(24).keys()),
+  minutesList: Array.from(Array(60).keys()),
+  secondsList: Array.from(Array(60).keys()),
+};
+export default RenderDateTimePickerInput;
diff --git a/src/ui/common/formik-field/RenderDropdownTypeaheadInput.js b/src/ui/common/formik-field/RenderDropdownTypeaheadInput.js
new file mode 100644
index 000000000..593dd0f3e
--- /dev/null
+++ b/src/ui/common/formik-field/RenderDropdownTypeaheadInput.js
@@ -0,0 +1,181 @@
+import React, { Component } from 'react';
+import { injectIntl, intlShape } from 'react-intl';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { Col, ControlLabel } from 'patternfly-react';
+import { Typeahead } from 'react-bootstrap-typeahead';
+
+class RenderDropdownTypeaheadInput extends Component {
+  constructor(props) {
+    super(props);
+    this.valueChanged = this.valueChanged.bind(this);
+  }
+
+  valueChanged(selected) {
+    const {
+      field,
+      onChange,
+      multiple,
+      valueKey,
+    } = this.props;
+    const value = multiple ? selected.map(({ code }) => code) : get(selected, `0.${valueKey}`, '');
+    field.onChange({
+      target: {
+        name: field.name,
+        id: field.name,
+        value,
+      },
+    });
+    if (onChange) {
+      onChange(value);
+    }
+  }
+
+  render() {
+    const {
+      field,
+      meta: { touched, error },
+      intl,
+      multiple,
+      label,
+      help,
+      labelSize,
+      inputSize,
+      labelKey,
+      valueKey,
+      append,
+      alignClass,
+      placeholder,
+      options,
+      onChange,
+      tourClass,
+      ...others
+    } = this.props;
+
+    const fValue = field.value || '';
+
+    const filterBy = (option, state) => {
+      if (!multiple && state.selected.length) {
+        return true;
+      }
+      return option[labelKey].toLowerCase().indexOf(state.text.toLowerCase()) > -1;
+    };
+
+    const choices = multiple ? options.filter(option => (
+      !fValue.includes(get(option, valueKey, option))
+    )) : options;
+
+    const selected = options.filter((option) => {
+      const optionValue = get(option, valueKey, option);
+      if (multiple) {
+        return fValue.includes(optionValue);
+      }
+      return optionValue === fValue;
+    });
+
+    const renderToggleButton = ({ isMenuShown, onClick }) => (
+      <button
+        type="button"
+        className={`DropdownTypeahead__toggle-button fa fa-angle-${isMenuShown ? 'up' : 'down'}`}
+        onClick={(e) => {
+          e.preventDefault();
+          onClick(e);
+        }}
+        disabled={others.disabled}
+      />
+    );
+
+    return (
+      <div
+        className={
+          touched && error
+            ? 'DropdownTypeahead form-group has-error'
+            : 'DropdownTypeahead form-group'
+        }
+      >
+        {labelSize > 0 ? (
+          <Col xs={labelSize} className={alignClass}>
+            <ControlLabel htmlFor={field.name}>
+              {label} {help}
+            </ControlLabel>
+          </Col>
+        ) : (
+          ''
+        )}
+        <Col xs={inputSize || 12 - labelSize} data-testid={`${field.name}-typeahead`}>
+          <Typeahead
+            filterBy={filterBy}
+            id={field.name}
+            multiple={multiple}
+            options={choices}
+            emptyLabel={intl.formatMessage({ id: options.length === selected.length ? 'app.noOptions' : 'app.noMatchOptions' })}
+            labelKey={labelKey}
+            placeholder={placeholder}
+            selected={selected}
+            onChange={this.valueChanged}
+            disabled={others.disabled}
+            className={tourClass}
+          >
+            {({ isMenuShown, toggleMenu }) => (
+              renderToggleButton({ isMenuShown, onClick: toggleMenu })
+            )}
+          </Typeahead>
+          {append && <span className="AppendedLabel">{append}</span>}
+          {touched && (error && <span className="help-block">{error}</span>)}
+        </Col>
+      </div>
+    );
+  }
+}
+
+RenderDropdownTypeaheadInput.propTypes = {
+  field: PropTypes.shape({
+    onChange: PropTypes.func,
+    name: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+  }),
+  intl: intlShape.isRequired,
+  multiple: PropTypes.bool,
+  label: PropTypes.node,
+  labelSize: PropTypes.number,
+  labelKey: PropTypes.string,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    error: PropTypes.shape({}),
+  }),
+  help: PropTypes.node,
+  disabled: PropTypes.bool,
+  inputSize: PropTypes.number,
+  options: PropTypes.arrayOf(PropTypes.any).isRequired,
+  placeholder: PropTypes.string,
+  append: PropTypes.string,
+  alignClass: PropTypes.string,
+  onChange: PropTypes.func,
+  valueKey: PropTypes.string,
+  tourClass: PropTypes.string,
+};
+
+RenderDropdownTypeaheadInput.defaultProps = {
+  field: {
+    value: '',
+  },
+  label: <span>Select...</span>,
+  labelKey: 'label',
+  meta: {},
+  placeholder: 'Select...',
+  help: null,
+  labelSize: 2,
+  disabled: false,
+  inputSize: null,
+  append: '',
+  alignClass: 'text-right',
+  onChange: null,
+  valueKey: '',
+  multiple: false,
+  tourClass: '',
+};
+
+export default injectIntl(RenderDropdownTypeaheadInput);
diff --git a/src/ui/common/formik-field/RenderFileInput.js b/src/ui/common/formik-field/RenderFileInput.js
new file mode 100644
index 000000000..5ab1a50a9
--- /dev/null
+++ b/src/ui/common/formik-field/RenderFileInput.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col, ControlLabel } from 'patternfly-react';
+import { useFormikContext } from 'formik';
+
+const RenderFileInput = ({
+  field,
+  append,
+  label,
+  labelSize,
+  placeholder,
+  meta: { touched, error },
+  help,
+  disabled,
+  acceptFile,
+}) => {
+  const { setFieldValue } = useFormikContext();
+
+  const handleChange = (event) => {
+    setFieldValue(field.name, { files: Object.values(event.target.files) });
+  };
+
+  const { value, ...restOfField } = field;
+
+  return (
+    <div className={(touched && error) ? 'text-right form-group has-error' : 'text-right form-group'}>
+      <Col xs={labelSize}>
+        <ControlLabel htmlFor={restOfField.name}>
+          {label} {help}
+        </ControlLabel>
+      </Col>
+      <Col xs={12 - labelSize}>
+        <input
+          {...restOfField}
+          name={restOfField.name}
+          type="file"
+          accept={acceptFile}
+          multiple
+          onChange={handleChange}
+          placeholder={placeholder}
+          className="form-control RenderFileInput"
+          disabled={disabled}
+        />
+        {append && <span className="AppendedLabel">{append}</span>}
+        {touched && ((error && <span className="help-block">{error}</span>))}
+      </Col>
+    </div>
+  );
+};
+
+RenderFileInput.propTypes = {
+  field: PropTypes.shape({
+    name: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func.isRequired,
+    value: PropTypes.shape({}),
+  }),
+  label: PropTypes.node,
+  placeholder: PropTypes.string,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    error: PropTypes.string,
+  }),
+  help: PropTypes.node,
+  disabled: PropTypes.bool,
+  labelSize: PropTypes.number,
+  append: PropTypes.string,
+  acceptFile: PropTypes.string,
+};
+
+RenderFileInput.defaultProps = {
+  field: {},
+  label: '',
+  placeholder: '',
+  meta: {},
+  help: null,
+  disabled: false,
+  labelSize: 2,
+  append: '',
+  acceptFile: '',
+};
+
+export default RenderFileInput;
diff --git a/src/ui/common/formik-field/RenderListField.js b/src/ui/common/formik-field/RenderListField.js
new file mode 100644
index 000000000..8cf9a84ab
--- /dev/null
+++ b/src/ui/common/formik-field/RenderListField.js
@@ -0,0 +1,147 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Field } from 'formik';
+import { TYPE_COMPOSITE } from 'state/data-types/const';
+import { getComponentType } from 'helpers/formikEntities';
+import { CompositeField } from 'ui/user-profile/common/UserProfileField';
+import { Button, ButtonGroup, Col, FormGroup } from 'patternfly-react';
+import Panel from 'react-bootstrap/lib/Panel';
+
+class RenderListField extends Component {
+  buttonMoveUp(index) {
+    const {
+      swap,
+    } = this.props;
+    if ((index) > 0) {
+      return (
+        <Button
+          className="pull-right"
+          bsStyle="default"
+          title={`Move up ${index + 1}`}
+          onClick={() => swap(index, index - 1)}
+        >
+          <i className="fa fa-sort-asc" />
+        </Button>
+      );
+    }
+    return null;
+  }
+  buttonMoveDown(index, arraySize) {
+    const {
+      swap,
+    } = this.props;
+    if ((index) < arraySize - 1) {
+      return (
+        <Button
+          className="pull-right"
+          bsStyle="default"
+          title={`Move down ${index + 1}`}
+          onClick={() => swap(index, index + 1)}
+        >
+          <i className="fa fa-sort-desc" />
+        </Button>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const {
+      attributeType, options, optionValue,
+      optionDisplayName, label, nestedAttribute, intl,
+      push, remove, form, name,
+    } = this.props;
+    return (
+      <div>
+        <FormGroup>
+          <label className="col-xs-2 text-right control-label">
+            <div>{label}</div>
+            <Button
+              bsStyle="primary"
+              title="Add"
+              onClick={() => push()}
+            >
+              <FormattedMessage id="app.add" />
+            </Button>
+          </label>
+          <Col xs={10}>
+            {form.initialValues[name] && form.initialValues[name].map((item, index) => (
+              <Panel key={item}>
+                <Panel.Heading>
+                  <b>{index + 1}</b>
+                  <div className="pull-right">
+                    <ButtonGroup>
+                      {this.buttonMoveUp(index)}
+                      {this.buttonMoveDown(index, form.values[name].length)}
+                    </ButtonGroup>
+
+                    <Button
+                      bsStyle="danger"
+                      title={`Remove ${index + 1}`}
+                      onClick={() => remove(index)}
+                    >
+                      <FormattedMessage id="app.delete" />
+                    </Button>
+                  </div>
+                </Panel.Heading>
+                <Panel.Body>
+                  {attributeType === TYPE_COMPOSITE ? (
+                    <CompositeField
+                      fieldName={`${name}.${index}`}
+                      attribute={nestedAttribute}
+                      intl={intl}
+                      noLabel
+                    />
+                  ) : (
+                    <Field
+                      name={`${name}.${index}`}
+                      type="text"
+                      component={getComponentType(attributeType)}
+                      label={index + 1}
+                      options={options}
+                      optionValue={optionValue}
+                      optionDisplayName={optionDisplayName}
+                    />
+                  )}
+                </Panel.Body>
+              </Panel>
+            ))}
+          </Col>
+        </FormGroup>
+      </div>
+    );
+  }
+}
+
+RenderListField.propTypes = {
+  nestedAttribute: PropTypes.shape({}),
+  attributeType: PropTypes.string,
+  label: PropTypes.node,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    optionDisplayName: PropTypes.string,
+    value: PropTypes.string,
+  })),
+  intl: PropTypes.shape({}).isRequired,
+  optionValue: PropTypes.string,
+  optionDisplayName: PropTypes.string,
+  push: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+  swap: PropTypes.func.isRequired,
+  form: PropTypes.shape({
+    values: PropTypes.shape({}).isRequired,
+    initialValues: PropTypes.shape({}).isRequired,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+RenderListField.defaultProps = {
+  label: null,
+  options: [],
+  optionValue: 'value',
+  optionDisplayName: 'optionDisplayName',
+  nestedAttribute: null,
+  attributeType: null,
+};
+
+export default RenderListField;
diff --git a/src/ui/common/formik-field/RenderRadioInput.js b/src/ui/common/formik-field/RenderRadioInput.js
new file mode 100644
index 000000000..6c4a505fb
--- /dev/null
+++ b/src/ui/common/formik-field/RenderRadioInput.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToggleButtonGroup, ToggleButton, ButtonToolbar } from 'react-bootstrap';
+import { Col, ControlLabel } from 'patternfly-react';
+import { getTouchErrorByField } from 'helpers/formikUtils';
+
+const buttonToolbar = (field, toggleElement, defaultValue) => (
+  <div data-testid={`${field.name}-field`}>
+    <ButtonToolbar className="RenderRadioInput" aria-labelledby={`radiogroup-${field.name}`}>
+      <ToggleButtonGroup
+        type="radio"
+        {...field}
+        value={field.value || defaultValue}
+      >
+        { toggleElement.map(item => (
+          <ToggleButton
+            {...field}
+            key={item.id}
+            value={item.id}
+            className="RenderRadioInput__toggle-btn"
+          >
+            {item.label}
+          </ToggleButton>
+      ))
+      }
+      </ToggleButtonGroup>
+    </ButtonToolbar>
+  </div>
+);
+
+const RenderRadioInput = ({
+  append, label, labelSize, alignClass,
+  field, form, help, toggleElement, defaultValue,
+}) => {
+  const { touched, error } = getTouchErrorByField(field.name, form);
+  if (label) {
+    return (
+      <div className={`RadioInputRenderer ${(touched && error) ? 'form-group has-error' : 'form-group'}`}>
+        <Col xs={labelSize} className={alignClass}>
+          <ControlLabel htmlFor={field.name} id={`radiogroup-${field.name}`}>
+            {label} {help}
+          </ControlLabel>
+        </Col>
+        <Col xs={12 - labelSize}>
+          {buttonToolbar(field, toggleElement, defaultValue)}
+          {append && <span className="AppendedLabel">{append}</span>}
+          {touched && ((error && <span className="help-block">{error}</span>))}
+        </Col>
+      </div>
+    );
+  }
+  return buttonToolbar(field, toggleElement, defaultValue);
+};
+
+RenderRadioInput.propTypes = {
+  toggleElement: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  })),
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  alignClass: PropTypes.string,
+  labelSize: PropTypes.number,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    error: PropTypes.string,
+  }),
+  append: PropTypes.string,
+  help: PropTypes.node,
+  label: PropTypes.node,
+  field: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  form: PropTypes.shape({
+    touched: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+  }),
+};
+RenderRadioInput.defaultProps = {
+  toggleElement: [{
+    id: '',
+    label: '',
+  }],
+  defaultValue: '',
+  alignClass: 'text-right',
+  labelSize: 2,
+  meta: {},
+  append: '',
+  help: null,
+  label: null,
+  field: {},
+  form: {},
+};
+
+export default RenderRadioInput;
diff --git a/src/ui/common/formik-field/RenderSwitchInput.js b/src/ui/common/formik-field/RenderSwitchInput.js
new file mode 100644
index 000000000..7f863d1dd
--- /dev/null
+++ b/src/ui/common/formik-field/RenderSwitchInput.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col, ControlLabel, Switch } from 'patternfly-react';
+import { getTouchErrorByField } from 'helpers/formikUtils';
+
+export const RenderSwitchInputBody = ({
+  field,
+  append,
+  label,
+  labelSize,
+  inputSize,
+  alignClass,
+  placeholder,
+  form,
+  help,
+  disabled,
+  type,
+  hasLabel,
+  xsClass,
+  forwardedRef,
+  ...others
+}) => {
+  const { restProps } = others;
+  const { touched, error } = getTouchErrorByField(field.name, form);
+
+  const switchValue = field.value === 'true' || field.value === true;
+
+  const handleChange = (el, val) => {
+    const returnVal = !!val || val === 'true' || val === true;
+    field.onChange({ target: { name: field.name, value: returnVal } });
+  };
+
+  return (
+    <div className={touched && error ? 'form-group has-error' : 'form-group'}>
+      {hasLabel && labelSize > 0 && (
+        <Col xs={12} sm={labelSize} className={`${alignClass} ${xsClass}`}>
+          <ControlLabel htmlFor={field.name}>
+            {label} {help}
+          </ControlLabel>
+        </Col>
+      )}
+      <Col xs={12} sm={inputSize || 12 - labelSize}>
+        <div className="">
+          <Switch
+            {...field}
+            type={type}
+            id={field.name}
+            ref={forwardedRef}
+            placeholder={placeholder}
+            className=""
+            disabled={disabled}
+            {...restProps}
+            value={switchValue}
+            onChange={handleChange}
+          />
+        </div>
+        {append && <span className="AppendedLabel">{append}</span>}
+        {touched && error && <span className="help-block">{error}</span>}
+      </Col>
+    </div>
+  );
+};
+
+RenderSwitchInputBody.propTypes = {
+  field: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    onChange: PropTypes.func.isRequired,
+  }),
+  forwardedRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
+  label: PropTypes.node,
+  placeholder: PropTypes.string,
+  form: PropTypes.shape({
+    touched: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+  }),
+  help: PropTypes.node,
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+  labelSize: PropTypes.number,
+  inputSize: PropTypes.number,
+  append: PropTypes.string,
+  mainGroup: PropTypes.string,
+  langCode: PropTypes.string,
+  alignClass: PropTypes.string,
+  xsClass: PropTypes.string,
+  hasLabel: PropTypes.bool,
+};
+
+RenderSwitchInputBody.defaultProps = {
+  field: {},
+  label: '',
+  placeholder: '',
+  help: null,
+  disabled: false,
+  type: 'text',
+  labelSize: 2,
+  inputSize: null,
+  append: '',
+  mainGroup: '',
+  langCode: '',
+  alignClass: 'text-right',
+  hasLabel: true,
+  xsClass: 'mobile-left',
+  forwardedRef: null,
+  form: {},
+};
+
+export default React.forwardRef((props, ref) => (
+  <RenderSwitchInputBody {...props} forwardedRef={ref} />
+));
diff --git a/src/ui/common/formik-field/RenderTextAreaInput.js b/src/ui/common/formik-field/RenderTextAreaInput.js
new file mode 100644
index 000000000..c7d7204d0
--- /dev/null
+++ b/src/ui/common/formik-field/RenderTextAreaInput.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col, ControlLabel } from 'patternfly-react';
+import { getTouchErrorByField } from 'helpers/formikUtils';
+
+const RenderTextAreaInput = ({
+  field, append, label, labelSize, placeholder, alignClass,
+  form, help, disabled, cols, rows,
+  hasLabel, topBarOptions,
+}) => {
+  const { touched, error } = getTouchErrorByField(field.name, form);
+  return (
+    <div className={`RenderTextAreaInput ${(touched && error) ? 'form-group has-error' : 'form-group'}`}>
+      {((hasLabel && label) || help) && (
+        <Col xs={labelSize} className={`RenderTextAreaInput__label ${alignClass}`}>
+          <ControlLabel htmlFor={field.name}>
+            {label} {help}
+          </ControlLabel>
+        </Col>
+      )}
+      <Col xs={12 - labelSize} className="RenderTextAreaInput__content">
+        <div className="RenderTextAreaInput__textarea-body">
+          {topBarOptions && (
+            <div className="RenderTextAreaInput__toolbar-body text-right">
+              {topBarOptions}
+            </div>
+          )}
+          <textarea
+            {...field}
+            cols={cols}
+            rows={rows}
+            placeholder={placeholder}
+            className="form-control RenderTextAreaInput-textarea"
+            disabled={disabled}
+          />
+        </div>
+        {append && <span className="AppendedLabel">{append}</span>}
+        {touched && (error && <span role="alert" className="help-block">{error}</span>)}
+      </Col>
+    </div>
+  );
+};
+
+RenderTextAreaInput.propTypes = {
+  field: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  label: PropTypes.node,
+  placeholder: PropTypes.string,
+  form: PropTypes.shape({
+    touched: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+  }),
+  help: PropTypes.node,
+  disabled: PropTypes.bool,
+  labelSize: PropTypes.number,
+  append: PropTypes.string,
+  alignClass: PropTypes.string,
+  cols: PropTypes.number,
+  rows: PropTypes.number,
+  hasLabel: PropTypes.bool,
+  topBarOptions: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};
+
+RenderTextAreaInput.defaultProps = {
+  field: {},
+  label: '',
+  placeholder: '',
+  form: {},
+  help: null,
+  disabled: false,
+  labelSize: 2,
+  append: '',
+  alignClass: 'text-right',
+  cols: 20,
+  rows: 20,
+  hasLabel: true,
+  topBarOptions: null,
+};
+
+export default RenderTextAreaInput;
diff --git a/src/ui/common/formik-field/RenderTextInput.js b/src/ui/common/formik-field/RenderTextInput.js
index 29c123c04..1287c2d03 100644
--- a/src/ui/common/formik-field/RenderTextInput.js
+++ b/src/ui/common/formik-field/RenderTextInput.js
@@ -19,6 +19,7 @@ export const RenderTextInputBody = ({
   xsClass,
   forwardedRef,
   endButtons,
+  onChange,
   ...others
 }) => {
   const { restProps } = others;
@@ -43,6 +44,14 @@ export const RenderTextInputBody = ({
             className="form-control RenderTextInput"
             disabled={disabled}
             {...restProps}
+            onChange={(e) => {
+              field.onChange(e);
+              if (onChange) {
+                onChange(e);
+              } else if (restProps && restProps.onChange) {
+                restProps.onChange(e);
+              }
+            }}
           />
           {endButtons && (
             <div className="RenderTextAreaInput__endbuttons">
@@ -51,7 +60,7 @@ export const RenderTextInputBody = ({
           )}
         </div>
         {append && <span className="AppendedLabel">{append}</span>}
-        {touched && (error && <span className="help-block">{error}</span>)}
+        {touched && (error && <span role="alert" className="help-block">{error}</span>)}
       </Col>
     </div>
   );
@@ -60,6 +69,7 @@ export const RenderTextInputBody = ({
 RenderTextInputBody.propTypes = {
   field: PropTypes.shape({
     name: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
   }),
   forwardedRef: PropTypes.oneOfType([
     PropTypes.func,
@@ -86,6 +96,7 @@ RenderTextInputBody.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]),
+  onChange: PropTypes.func,
 };
 
 RenderTextInputBody.defaultProps = {
@@ -106,6 +117,7 @@ RenderTextInputBody.defaultProps = {
   forwardedRef: null,
   endButtons: null,
   form: {},
+  onChange: null,
 };
 
 export default React.forwardRef((props, ref) => (
diff --git a/src/ui/common/formik-field/RoleSelectRenderer.js b/src/ui/common/formik-field/RoleSelectRenderer.js
new file mode 100644
index 000000000..35bbf497c
--- /dev/null
+++ b/src/ui/common/formik-field/RoleSelectRenderer.js
@@ -0,0 +1,141 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { InputGroup, Button, Col } from 'patternfly-react';
+import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
+
+class RoleSelectRenderer extends Component {
+  constructor(props) {
+    super(props);
+    this.pushField = this.pushField.bind(this);
+    this.renderTags = this.renderTags.bind(this);
+    this.getLabel = this.getLabel.bind(this);
+    this.select = null;
+  }
+
+  getLabel(role) {
+    const { labelFn, labelKey } = this.props;
+    return labelFn ? labelFn(role) : role[labelKey];
+  }
+
+  pushField() {
+    if (!this.select || !this.select.value) {
+      return;
+    }
+    const {
+      name, form, push,
+    } = this.props;
+
+    if (this.select.value && !form.values[name].includes(this.select.value)) {
+      push(this.select.value);
+    }
+  }
+
+  renderTags() {
+    const {
+      name, valueKey, allRoles, form, remove,
+    } = this.props;
+    return allRoles && allRoles.length ? form.values[name].map((value, i) => (
+      <div key={value} className="clearfix">
+        { i === 0 && <h3><FormattedMessage id="app.assigned.roles" /></h3>}
+        <hr />
+        <Col xs={4}>
+          <p>
+            {this.getLabel(allRoles.find(opt => opt[valueKey] === value))}
+          </p>
+        </Col>
+        <Col xs={8}>
+          <Button
+            bsStyle="danger"
+            className="btn btn-danger RoleSelectRenderer__remove--btn"
+            onClick={() => remove(i)}
+          >
+            <FormattedMessage id="app.delete" />
+          </Button>
+        </Col>
+      </div>
+    )) : [];
+  }
+
+  render() {
+    const {
+      options, valueKey, emptyOptionTextId, intl, form, name,
+    } = this.props;
+
+    const filteredOptions = options
+      .filter(opt => !form.values[name].includes(opt[valueKey]))
+      .map(item => (
+        <option key={`opt-${item[valueKey]}`} value={item[valueKey]}>
+          {this.getLabel(item)}
+        </option>
+      ));
+
+    if (emptyOptionTextId) {
+      const msgs = defineMessages({
+        emptyOptionText: {
+          id: emptyOptionTextId,
+        },
+      });
+
+      const emptyOptionText = intl.formatMessage(msgs.emptyOptionText);
+      filteredOptions.unshift((
+        <option key={emptyOptionText} value="">
+          {emptyOptionText}
+        </option>
+      ));
+    }
+
+    return (
+      <div className="RoleSelectRenderer">
+        {filteredOptions.length && (
+          <Fragment>
+            <InputGroup>
+              <select className="form-control" ref={(select) => { this.select = select; }} >
+                {filteredOptions}
+              </select>
+              <span className="input-group-btn">
+                <Button
+                  className="RoleSelectRenderer__add-btn"
+                  bsStyle="primary"
+                  onClick={this.pushField}
+                >
+                  <FormattedMessage id="app.add" />
+                </Button>
+              </span>
+            </InputGroup>
+            <br />
+          </Fragment>
+        )}
+        { this.renderTags() }
+      </div>
+    );
+  }
+}
+
+
+RoleSelectRenderer.propTypes = {
+  form: PropTypes.shape({
+    initialValues: PropTypes.shape({}),
+    values: PropTypes.shape({}),
+    setFieldValue: PropTypes.func,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  allRoles: PropTypes.arrayOf(PropTypes.shape({})),
+  valueKey: PropTypes.string,
+  labelKey: PropTypes.string,
+  labelFn: PropTypes.func,
+  emptyOptionTextId: PropTypes.string,
+  intl: intlShape.isRequired,
+  push: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+};
+
+RoleSelectRenderer.defaultProps = {
+  allRoles: [],
+  valueKey: 'value',
+  labelKey: 'label',
+  labelFn: null,
+  emptyOptionTextId: '',
+};
+
+export default injectIntl(RoleSelectRenderer);
diff --git a/src/ui/common/formik-field/SelectInput.js b/src/ui/common/formik-field/SelectInput.js
new file mode 100644
index 000000000..5fe6a05ab
--- /dev/null
+++ b/src/ui/common/formik-field/SelectInput.js
@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col, ControlLabel } from 'patternfly-react';
+import { injectIntl, intlShape, defineMessages } from 'react-intl';
+
+import { getTouchErrorByField } from 'helpers/formikUtils';
+
+const SelectInput = ({
+  field,
+  form,
+  forwardedRef,
+  labelSize,
+  alignClass,
+  label,
+  help,
+  defaultOptionId,
+  options,
+  optionReducer,
+  optionValue,
+  optionDisplayName,
+  size,
+  inputSize,
+  disabled,
+  intl,
+  hasLabel,
+  xsClass,
+  onChange,
+}) => {
+  const { touched, error } = getTouchErrorByField(field.name, form);
+
+  const containerClasses =
+    touched && error ? 'form-group has-error' : 'form-group';
+
+  let defaultOption = null;
+  if (defaultOptionId) {
+    const defMsg = defineMessages({
+      defaultOptionId: {
+        id: defaultOptionId,
+      },
+    });
+    defaultOption = (
+      <option value="">{intl.formatMessage(defMsg.defaultOptionId)}</option>
+    );
+  }
+
+  const optionsList = optionReducer
+    ? optionReducer(options)
+    : options.map(item => (
+      <option key={item[optionValue]} value={item[optionValue]}>
+        {item[optionDisplayName]}
+      </option>
+    ));
+
+  const errorBox =
+    touched && error ? (
+      <span role="alert" className="help-block">
+        {error}
+      </span>
+    ) : null;
+
+  return (
+    <div className={containerClasses}>
+      {hasLabel && (
+        <Col xs={12} sm={labelSize} className={`${alignClass} ${xsClass}`}>
+          <ControlLabel htmlFor={field.name}>
+            {label} {help}
+          </ControlLabel>
+        </Col>
+      )}
+      <Col xs={12} sm={inputSize || 12 - labelSize}>
+        <select
+          {...field}
+          id={field.name}
+          size={size}
+          className="form-control SelectInput"
+          disabled={disabled}
+          ref={forwardedRef}
+          onChange={(e) => {
+            field.onChange(e);
+            if (onChange) {
+              onChange(e);
+            }
+          }}
+        >
+          {defaultOption}
+          {optionsList}
+        </select>
+        {errorBox}
+      </Col>
+    </div>
+  );
+};
+
+SelectInput.propTypes = {
+  intl: intlShape.isRequired,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+  }).isRequired,
+  form: PropTypes.shape({
+    touched: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+  }),
+  forwardedRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
+  defaultOptionId: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.string,
+  })),
+  label: PropTypes.node,
+  labelSize: PropTypes.number,
+  alignClass: PropTypes.string,
+  xsClass: PropTypes.string,
+  help: PropTypes.node,
+  optionReducer: PropTypes.func,
+  optionValue: PropTypes.string,
+  optionDisplayName: PropTypes.string,
+  size: PropTypes.number,
+  inputSize: PropTypes.number,
+  disabled: PropTypes.bool,
+  hasLabel: PropTypes.bool,
+  onChange: PropTypes.func,
+
+};
+
+SelectInput.defaultProps = {
+  form: {},
+  defaultOptionId: '',
+  options: [],
+  label: null,
+  labelSize: 2,
+  alignClass: 'text-right',
+  xsClass: 'mobile-left',
+  help: null,
+  optionReducer: null,
+  optionValue: 'value',
+  optionDisplayName: 'text',
+  size: null,
+  inputSize: null,
+  disabled: false,
+  hasLabel: true,
+  forwardedRef: null,
+  onChange: null,
+};
+
+const IntlWrappedSelectInput = injectIntl(SelectInput);
+
+export default React.forwardRef((props, ref) => (
+  <IntlWrappedSelectInput {...props} forwardedRef={ref} />
+));
diff --git a/src/ui/common/formik-field/SwitchInput.js b/src/ui/common/formik-field/SwitchInput.js
new file mode 100644
index 000000000..75393c099
--- /dev/null
+++ b/src/ui/common/formik-field/SwitchInput.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Switch, Col, ControlLabel } from 'patternfly-react';
+import { getTouchErrorByField } from 'helpers/formikUtils';
+
+const SwitchInput = ({
+  field, form, append, label, labelSize, inputSize, alignClass,
+  help, trueValue, falseValue, disabled, onToggleValue,
+}) => {
+  const switchValue = field.value === 'true' || field.value === true || field.value === trueValue;
+  const dataTestId = `${field.name}-switchField`;
+  const { touched, error } = getTouchErrorByField(field.name, form);
+
+  const handleChange = (el, val) => {
+    const returnVal = val ? trueValue : falseValue;
+    form.setFieldValue(field.name, returnVal);
+    if (onToggleValue) {
+      onToggleValue(returnVal);
+    }
+  };
+
+  if (label) {
+    return (
+      <div className={`SwitchInput ${(touched && error) ? 'form-group has-error' : 'form-group'}`}>
+        <Col xs={labelSize} className={alignClass}>
+          <ControlLabel id={`switch-${field.name}`} htmlFor={field.name}>
+            {label} {help}
+          </ControlLabel>
+        </Col>
+        <Col xs={inputSize || 12 - labelSize}>
+          <div data-testid={dataTestId} aria-labelledby={`switch-${field.name}`}>
+            <Switch
+              {...field}
+              disabled={disabled}
+              value={switchValue}
+              onChange={handleChange}
+            />
+          </div>
+          {append && <span className="AppendedLabel">{append}</span>}
+          {touched && ((error && <span role="alert" className="help-block">{error}</span>))}
+        </Col>
+      </div>);
+  }
+
+  return (
+    <div data-testid={dataTestId} aria-labelledby={`switch-${field.name}`}>
+      <Switch
+        {...field}
+        disabled={disabled}
+        value={switchValue}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+SwitchInput.propTypes = {
+  trueValue: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  falseValue: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  field: PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    onChange: PropTypes.func,
+    name: PropTypes.string,
+  }).isRequired,
+  form: PropTypes.shape({
+    touched: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+    setFieldValue: PropTypes.func.isRequired,
+  }).isRequired,
+  label: PropTypes.node,
+  meta: PropTypes.shape({}),
+  help: PropTypes.node,
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+  labelSize: PropTypes.number,
+  inputSize: PropTypes.number,
+  append: PropTypes.string,
+  alignClass: PropTypes.string,
+  onToggleValue: PropTypes.func,
+};
+
+SwitchInput.defaultProps = {
+  trueValue: true,
+  falseValue: false,
+  label: '',
+  meta: {},
+  help: null,
+  disabled: false,
+  type: 'text',
+  labelSize: 2,
+  inputSize: null,
+  append: '',
+  alignClass: 'text-right',
+  onToggleValue: null,
+};
+
+export default SwitchInput;
diff --git a/src/ui/component-repository/components/BundleGroupAutoComplete.js b/src/ui/component-repository/components/BundleGroupAutoComplete.js
index 5f7b91b0c..aa75c4e3f 100644
--- a/src/ui/component-repository/components/BundleGroupAutoComplete.js
+++ b/src/ui/component-repository/components/BundleGroupAutoComplete.js
@@ -1,14 +1,13 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
-import { Field, reduxForm } from 'redux-form';
+import { Field, withFormik } from 'formik';
 import { Button, Icon } from 'patternfly-react';
-import RenderDropdownTypeaheadInput from 'ui/common/form/RenderDropdownTypeaheadInput';
+import RenderDropdownTypeaheadInput from 'ui/common/formik-field/RenderDropdownTypeaheadInput';
 import { BUNDLE_GROUP_FILTER_ID } from 'ui/component-repository/components/list/ComponentListWrapper';
 import { fetchBundleGroups, setBundleGroupIdFilter } from 'state/component-repository/hub/actions';
-import { getBundleGroups, getSelectedRegistry } from 'state/component-repository/hub/selectors';
-import { getCurrentPage, getPageSize } from 'state/pagination/selectors';
+
 
 export const FORM_NAME = 'hubBundleGroupSearchForm';
 
@@ -20,36 +19,29 @@ const msgs = defineMessages({
 });
 
 const BundleGroupAutoCompleteBody = (props) => {
-  const { intl, handleSubmit, onSubmit } = props;
+  const {
+    intl, handleSubmit, activeRegistry, bundlegroups, submitForm, resetForm,
+  } = props;
   const dispatch = useDispatch();
-  const activeRegistry = useSelector(getSelectedRegistry);
-  const bundlegroups = useSelector(getBundleGroups);
-  const page = useSelector(getCurrentPage);
-  const pageSize = useSelector(getPageSize);
+
   useEffect(
     () => { dispatch(fetchBundleGroups(activeRegistry.id)); },
     [activeRegistry.id, dispatch],
   );
 
-  const submitHandler = handleSubmit(values => onSubmit(
-    values, activeRegistry.id,
-    { page, pageSize },
-  ));
-
   const clearSearch = () => {
-    const { reset } = props;
-    reset();
+    resetForm();
     dispatch(setBundleGroupIdFilter());
-    submitHandler();
+    submitForm();
   };
 
   const handleChange = (value) => {
     dispatch(setBundleGroupIdFilter(value));
-    submitHandler();
+    submitForm();
   };
 
   return (
-    <form className="SearchForm__container" onSubmit={submitHandler}>
+    <form className="SearchForm__container" onSubmit={handleSubmit}>
       <Field
         component={RenderDropdownTypeaheadInput}
         name={BUNDLE_GROUP_FILTER_ID}
@@ -84,12 +76,27 @@ const BundleGroupAutoCompleteBody = (props) => {
 BundleGroupAutoCompleteBody.propTypes = {
   intl: intlShape.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  reset: PropTypes.func.isRequired,
+  submitForm: PropTypes.func.isRequired,
+  resetForm: PropTypes.func.isRequired,
+  activeRegistry: PropTypes.shape({
+    id: PropTypes.string,
+  }).isRequired,
+  bundlegroups: PropTypes.arrayOf().isRequired,
 };
 
-const BundleGroupAutoComplete = reduxForm({
-  form: FORM_NAME,
+const BundleGroupAutoComplete = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => ({ ...initialValues }),
+  handleSubmit: (values, {
+    props: {
+      onSubmit, activeRegistry, page, pageSize,
+    },
+  }) => {
+    onSubmit(
+      values, activeRegistry.id,
+      { page, pageSize },
+    );
+  },
 })(BundleGroupAutoCompleteBody);
 
 export default injectIntl(BundleGroupAutoComplete);
diff --git a/src/ui/component-repository/components/BundleGroupAutoCompleteContainer.js b/src/ui/component-repository/components/BundleGroupAutoCompleteContainer.js
index d65302a2b..8fcbd5e80 100644
--- a/src/ui/component-repository/components/BundleGroupAutoCompleteContainer.js
+++ b/src/ui/component-repository/components/BundleGroupAutoCompleteContainer.js
@@ -1,11 +1,15 @@
 import { connect } from 'react-redux';
-import { formValueSelector } from 'redux-form';
 import { fetchBundlesFromRegistryWithFilters } from 'state/component-repository/hub/actions';
-import { BUNDLE_GROUP_FILTER_ID } from 'ui/component-repository/components/list/ComponentListWrapper';
-import BundleGroupAutoComplete, { FORM_NAME } from 'ui/component-repository/components/BundleGroupAutoComplete';
+import BundleGroupAutoComplete from 'ui/component-repository/components/BundleGroupAutoComplete';
+import { getBundleGroups, getSelectedRegistry } from 'state/component-repository/hub/selectors';
+import { getCurrentPage, getPageSize } from 'state/pagination/selectors';
+
 
 export const mapStateToProps = state => ({
-  searchTerm: formValueSelector(FORM_NAME)(state, BUNDLE_GROUP_FILTER_ID),
+  activeRegistry: getSelectedRegistry(state),
+  bundlegroups: getBundleGroups(state),
+  page: getCurrentPage(state),
+  pageSize: getPageSize(state),
 });
 
 export const mapDispatchToProps = dispatch => ({
diff --git a/src/ui/component-repository/components/list/AddNewRegistryModal.js b/src/ui/component-repository/components/list/AddNewRegistryModal.js
index e59b3a5c7..0c10db219 100644
--- a/src/ui/component-repository/components/list/AddNewRegistryModal.js
+++ b/src/ui/component-repository/components/list/AddNewRegistryModal.js
@@ -1,63 +1,71 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { Button, Modal } from 'patternfly-react';
-import { Field, reduxForm, destroy, submit, Form, reset } from 'redux-form';
+import { Field, withFormik } from 'formik';
 import PropTypes from 'prop-types';
-import { required } from '@entando/utils';
+import * as Yup from 'yup';
 
 import GenericModalContainer from 'ui/common/modal/GenericModalContainer';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import { getRegistries } from 'state/component-repository/hub/selectors';
 import { sendPostRegistry } from 'state/component-repository/hub/actions';
 import { setVisibleModal } from 'state/modal/actions';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
 export const ADD_NEW_REGISTRY_MODAL_ID = 'AddNewRegistryModal';
 
-const NewRegistryFormId = 'NewRegistryFormId';
+export const mustBeUnique = (values, value, key) => (value && values && values.includes(value) ? <FormattedMessage id={`hub.newRegistry.${key}.error`} /> : undefined);
 
-export const mustBeUnique = (values, key) => value => (value && values && values.includes(value) ? <FormattedMessage id={`hub.newRegistry.${key}.error`} /> : undefined);
+export const protocolCompliance = (value) => {
+  // get current protocol from window.location.protocol
+  const currentProtocol = window.location.protocol;
+  // if current protocol is https, then the protocol must be https
+  if (currentProtocol === 'https:' && value && value.startsWith('http://')) {
+    return <FormattedMessage id="hub.newRegistry.protocol.error" />;
+  }
+  return undefined;
+};
 
 const AddNewRegistryModalForm = ({
-  invalid, handleSubmit,
+  isValid, resetForm, values,
 }) => {
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
 
   const existingRegistries = useSelector(getRegistries);
 
-  const names = useMemo(() => existingRegistries.map(reg => reg.name), [existingRegistries]);
-  const urls = useMemo(() => existingRegistries.map(reg => reg.url), [existingRegistries]);
+  const names = existingRegistries.map(reg => reg.name);
+  const urls = existingRegistries.map(reg => reg.url);
 
-  const validateName = useMemo(() => [required, mustBeUnique(names, 'name')], [names]);
-  const validateUrl = useMemo(() => [required, mustBeUnique(urls, 'url')], [urls]);
+  const validateName = value => convertReduxValidationsToFormikValidations(value, [currVal => mustBeUnique(names, currVal, 'name')]);
+  const validateUrl = value => convertReduxValidationsToFormikValidations(value, [currVal => mustBeUnique(urls, currVal, 'url'), protocolCompliance]);
 
-  const handleSave = (values) => {
+  const handleSave = (formValues) => {
     setLoading(true);
-    dispatch(sendPostRegistry(values)).then((isSuccess) => {
+    dispatch(sendPostRegistry(formValues)).then((isSuccess) => {
       setLoading(false);
+      resetForm();
       if (isSuccess) {
         dispatch(setVisibleModal(''));
-        dispatch(destroy(NewRegistryFormId));
-      } else {
-        reset(NewRegistryFormId);
       }
     }).catch(() => {
       setLoading(false);
-      reset(NewRegistryFormId);
     });
   };
 
-  const handleCancel = () => dispatch(destroy(NewRegistryFormId));
+  const handleCancel = () => {
+    resetForm();
+  };
 
   const buttons = [
     <Button
       bsStyle="primary"
       type="submit"
       id="InstallationPlanModal__button-ok"
-      disabled={invalid || loading}
-      onClick={() => dispatch(submit(NewRegistryFormId))}
+      disabled={!isValid || loading}
+      onClick={() => handleSave(values)}
     >
       <FormattedMessage id="app.save" />
     </Button>,
@@ -76,45 +84,63 @@ const AddNewRegistryModalForm = ({
       closeLabel="app.cancel"
       modalCloseCleanup={handleCancel}
     >
-      <Form className="form-horizontal" onSubmit={handleSubmit(values => handleSave(values))}>
+      <form className="form-horizontal">
         <fieldset className="no-padding">
           <Field
             label={<FormLabel labelId="hub.newRegistry.name" required />}
             component={RenderTextInput}
             name="name"
-            type="text"
             validate={validateName}
           />
           <Field
             label={<FormLabel labelId="hub.newRegistry.url" required />}
             component={RenderTextInput}
             name="url"
-            type="text"
             validate={validateUrl}
           />
           <Field
             label={<FormLabel labelId="hub.newRegistry.apiKey" />}
             component={RenderTextInput}
             name="apiKey"
-            type="text"
           />
         </fieldset>
-      </Form>
+      </form>
     </GenericModalContainer>
   );
 };
 
 AddNewRegistryModalForm.propTypes = {
-  invalid: PropTypes.bool,
-  handleSubmit: PropTypes.func.isRequired,
+  isValid: PropTypes.bool,
+  resetForm: PropTypes.func.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    apiKey: PropTypes.string,
+  }).isRequired,
 };
 
 AddNewRegistryModalForm.defaultProps = {
-  invalid: false,
+  isValid: false,
 };
 
-const AddNewRegistryModal = reduxForm({
-  form: NewRegistryFormId,
+const AddNewRegistryModal = withFormik({
+  mapPropsToValues: () => {
+    const values = {
+      name: '',
+      url: '',
+      apiKey: '',
+    };
+    return values;
+  },
+  displayName: 'addNewRegistryModalForm',
+  validateOnMount: true,
+  enableReinitialize: true,
+  validationSchema: () => (
+    Yup.object().shape({
+      name: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      url: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      apiKey: Yup.string(),
+    })),
 })(AddNewRegistryModalForm);
 
 export default AddNewRegistryModal;
diff --git a/src/ui/component-repository/components/list/EditRegistryModal.js b/src/ui/component-repository/components/list/EditRegistryModal.js
index efaa8eee0..7ceefc369 100644
--- a/src/ui/component-repository/components/list/EditRegistryModal.js
+++ b/src/ui/component-repository/components/list/EditRegistryModal.js
@@ -2,25 +2,24 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { Button, Modal, Alert } from 'patternfly-react';
-import { Field, reduxForm, destroy, submit, Form, reset, initialize } from 'redux-form';
+import { Field, withFormik } from 'formik';
 import PropTypes from 'prop-types';
-import { required } from '@entando/utils';
+import * as Yup from 'yup';
 
 import GenericModalContainer from 'ui/common/modal/GenericModalContainer';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import { getRegistries } from 'state/component-repository/hub/selectors';
 import { sendPutRegistry } from 'state/component-repository/hub/actions';
 import { setInfo, setVisibleModal } from 'state/modal/actions';
 import { getInfo } from 'state/modal/selectors';
-import { mustBeUnique } from 'ui/component-repository/components/list/AddNewRegistryModal';
+import { mustBeUnique, protocolCompliance } from 'ui/component-repository/components/list/AddNewRegistryModal';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
 export const EDIT_REGISTRY_MODAL_ID = 'EditRegistryModal';
 
-const EditRegistryFormId = 'EditRegistryFormId';
-
 const EditRegistryModalForm = ({
-  invalid, handleSubmit,
+  isValid, resetForm, values, setValues,
 }) => {
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
@@ -33,28 +32,26 @@ const EditRegistryModalForm = ({
     [existingRegistries, editData],
   );
 
-  const names = useMemo(() => filteredRegistries.map(reg => reg.name), [filteredRegistries]);
-  const urls = useMemo(() => filteredRegistries.map(reg => reg.url), [filteredRegistries]);
+  const names = filteredRegistries.map(reg => reg.name);
+  const urls = filteredRegistries.map(reg => reg.url);
 
-  const validateName = useMemo(() => [required, mustBeUnique(names, 'name')], [names]);
-  const validateUrl = useMemo(() => [required, mustBeUnique(urls, 'url')], [urls]);
+  const validateName = value => convertReduxValidationsToFormikValidations(value, [currVal => mustBeUnique(names, currVal, 'name')]);
+  const validateUrl = value => convertReduxValidationsToFormikValidations(value, [currVal => mustBeUnique(urls, currVal, 'url'), protocolCompliance]);
 
   useEffect(() => {
     if (editData) {
-      dispatch((initialize(EditRegistryFormId, editData)));
+      setValues(editData);
     }
-  }, [dispatch, editData]);
+  }, [editData, setValues]);
 
-  const handleSave = (values) => {
+  const handleSave = (newValues) => {
     setLoading(true);
-    dispatch(sendPutRegistry(values)).then((isSuccess) => {
+    dispatch(sendPutRegistry(newValues)).then((isSuccess) => {
       setLoading(false);
+      resetForm();
       if (isSuccess) {
         dispatch(setVisibleModal(''));
         dispatch(setInfo({}));
-        dispatch(destroy(EditRegistryFormId));
-      } else {
-        reset(EditRegistryFormId);
       }
     }).catch(() => {
       setLoading(false);
@@ -63,7 +60,7 @@ const EditRegistryModalForm = ({
 
   const handleCancel = () => {
     dispatch(setInfo({}));
-    dispatch(destroy(EditRegistryFormId));
+    resetForm();
   };
 
   const buttons = [
@@ -71,8 +68,8 @@ const EditRegistryModalForm = ({
       bsStyle="primary"
       type="submit"
       id="InstallationPlanModal__button-ok"
-      disabled={invalid || loading}
-      onClick={() => dispatch(submit(EditRegistryFormId))}
+      disabled={!isValid || loading}
+      onClick={() => handleSave(values)}
     >
       <FormattedMessage id="app.save" />
     </Button>,
@@ -91,7 +88,7 @@ const EditRegistryModalForm = ({
       closeLabel="app.cancel"
       modalCloseCleanup={handleCancel}
     >
-      <Form className="form-horizontal" onSubmit={handleSubmit(values => handleSave(values))}>
+      <form className="form-horizontal">
         <fieldset className="no-padding">
           <Field
             label={<FormLabel labelId="hub.newRegistry.name" required />}
@@ -114,7 +111,7 @@ const EditRegistryModalForm = ({
             type="text"
           />
         </fieldset>
-      </Form>
+      </form>
       <Alert type="info">
         <FormattedMessage id="hub.editRegistry.alert" />
       </Alert>
@@ -123,18 +120,34 @@ const EditRegistryModalForm = ({
 };
 
 EditRegistryModalForm.propTypes = {
-  invalid: PropTypes.bool,
-  handleSubmit: PropTypes.func.isRequired,
+  isValid: PropTypes.bool,
+  setValues: PropTypes.func.isRequired,
+  resetForm: PropTypes.func.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    apiKey: PropTypes.string,
+  }).isRequired,
 };
 
 EditRegistryModalForm.defaultProps = {
-  invalid: false,
+  isValid: true,
 };
 
-const EditRegistryModal = reduxForm({
-  form: EditRegistryFormId,
+const EditRegistryModal = withFormik({
   enableReinitialize: true,
-  keepDirtyOnReinitialize: true,
+  validateOnMount: true,
+  mapPropsToValues: () => ({
+    name: '',
+    url: '',
+    apiKey: '',
+  }),
+  validationSchema: () => (
+    Yup.object().shape({
+      name: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      url: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      apiKey: Yup.string(),
+    })),
 })(EditRegistryModalForm);
 
 export default EditRegistryModal;
diff --git a/src/ui/component-repository/settings/edit/SettingsEditFormContainer.js b/src/ui/component-repository/settings/edit/SettingsEditFormContainer.js
index cc3c4e1a6..55428c95b 100644
--- a/src/ui/component-repository/settings/edit/SettingsEditFormContainer.js
+++ b/src/ui/component-repository/settings/edit/SettingsEditFormContainer.js
@@ -9,7 +9,7 @@ export const mapStateToProps = (state, { match: { params } }) => ({
 });
 
 export const mapDispatchToProps = dispatch => ({
-  onWillMount: (id) => { dispatch(fetchComponentRepository(id, true)); },
+  onWillMount: (id) => { dispatch(fetchComponentRepository(id)); },
   onSubmit: (data) => { dispatch(sendPutComponentRepository(data)); },
 });
 
diff --git a/src/ui/data-types/add/AddDataTypesPage.js b/src/ui/data-types/add/AddDataTypesPage.js
deleted file mode 100644
index 94108b18d..000000000
--- a/src/ui/data-types/add/AddDataTypesPage.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Grid, Row, Col, Breadcrumb } from 'patternfly-react';
-
-import BreadcrumbItem from 'ui/common/BreadcrumbItem';
-import InternalPage from 'ui/internal-page/InternalPage';
-import PageTitle from 'ui/internal-page/PageTitle';
-import AddFormContainer from 'ui/data-types/add/AddFormContainer';
-import { ROUTE_DATA_TYPE_LIST } from 'app-init/router';
-import withPermissions from 'ui/auth/withPermissions';
-import { SUPERUSER_PERMISSION } from 'state/permissions/const';
-
-const AddDataTypesPage = () => (
-  <InternalPage className="AddDataTypesPage">
-    <Grid fluid>
-      <Row>
-        <Col xs={12}>
-          <Breadcrumb>
-            <BreadcrumbItem>
-              <FormattedMessage id="menu.data" />
-            </BreadcrumbItem>
-            <BreadcrumbItem to={ROUTE_DATA_TYPE_LIST}>
-              <FormattedMessage id="menu.dataType" />
-            </BreadcrumbItem>
-            <BreadcrumbItem active>
-              <FormattedMessage id="app.add" />
-            </BreadcrumbItem>
-          </Breadcrumb>
-        </Col>
-      </Row>
-      <PageTitle
-        titleId="app.add"
-        helpId="dataType.help"
-      />
-      <Row>
-        <Col xs={12} >
-          <AddFormContainer />
-        </Col>
-      </Row>
-    </Grid>
-  </InternalPage>
-);
-
-export default withPermissions(SUPERUSER_PERMISSION)(AddDataTypesPage);
diff --git a/src/ui/data-types/add/AddFormContainer.js b/src/ui/data-types/add/AddFormContainer.js
deleted file mode 100644
index f0f642fc3..000000000
--- a/src/ui/data-types/add/AddFormContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { connect } from 'react-redux';
-import { fetchDataTypeAttributes, sendPostDataType } from 'state/data-types/actions';
-import { getDataTypeAttributesIdList } from 'state/data-types/selectors';
-import DataTypeForm from 'ui/data-types/common/DataTypeForm';
-import { formValueSelector } from 'redux-form';
-
-export const mapStateToProps = state => ({
-  mode: 'add',
-  attributesType: getDataTypeAttributesIdList(state),
-  attributeCode: formValueSelector('DataType')(state, 'type'),
-});
-
-export const mapDispatchToProps = dispatch => ({
-  onWillMount: () => {
-    dispatch(fetchDataTypeAttributes());
-  },
-  onSubmit: values => dispatch(sendPostDataType(values)),
-
-});
-export default connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(DataTypeForm);
diff --git a/src/ui/data-types/attributes/monolist/MonolistAttributeFormContainer.js b/src/ui/data-types/attributes/monolist/MonolistAttributeFormContainer.js
deleted file mode 100644
index 57f9ca47c..000000000
--- a/src/ui/data-types/attributes/monolist/MonolistAttributeFormContainer.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import { clearErrors } from '@entando/messages';
-import { formValueSelector } from 'redux-form';
-
-import {
-  fetchAttributeFromDataType,
-  fetchDataTypeAttribute,
-  sendPutAttributeFromDataTypeMonolist,
-  setActionMode,
-  removeAttributeFromComposite,
-  moveAttributeFromComposite,
-} from 'state/data-types/actions';
-import {
-  getActionModeDataTypeSelectedAttribute,
-  getDataTypeAttributesIdList,
-  getDataTypeSelectedAttribute,
-  getSelectedCompositeAttributes,
-} from 'state/data-types/selectors';
-import {
-  TYPE_COMPOSITE,
-  MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE,
-  MODE_ADD_SUB_ATTRIBUTE_MONOLIST_COMPOSITE,
-} from 'state/data-types/const';
-
-import { ROUTE_ATTRIBUTE_MONOLIST_ADD, ROUTE_DATA_TYPE_ATTRIBUTE_ADD } from 'app-init/router';
-
-import MonolistAttributeForm from 'ui/common/form/MonolistAttributeForm';
-
-export const mapStateToProps = (state, { match: { params } }) => ({
-  mode: getActionModeDataTypeSelectedAttribute(state),
-  attributeCode: params.attributeCode,
-  dataTypeCode: params.entityCode,
-  isIndexable: formValueSelector('monoListAttribute')(state, 'nestedAttribute.indexable'),
-  type: formValueSelector('monoListAttribute')(state, 'nestedAttribute.type'),
-  selectedAttributeTypeForAddComposite: getDataTypeSelectedAttribute(state),
-  selectedAttributeType: formValueSelector('monoListAttribute')(state, 'type'),
-  attributesList: getDataTypeAttributesIdList(state),
-  compositeAttributes: getSelectedCompositeAttributes(state),
-});
-
-
-export const mapDispatchToProps = (dispatch, { match: { params } }) => ({
-  onDidMount: ({ attributeCode, dataTypeCode, mode }) => {
-    dispatch(clearErrors());
-    if (mode === MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE) {
-      dispatch(fetchDataTypeAttribute(
-        TYPE_COMPOSITE,
-        {
-          route: ROUTE_ATTRIBUTE_MONOLIST_ADD,
-          params: { entityCode: dataTypeCode, attributeCode },
-        },
-        '',
-        'monoListAttribute',
-      ));
-    } else {
-      dispatch(fetchAttributeFromDataType('monoListAttribute', dataTypeCode, attributeCode));
-    }
-  },
-  onSubmit: (values) => {
-    dispatch(sendPutAttributeFromDataTypeMonolist(values, params.entityCode));
-  },
-  onAddAttribute: ({ dataTypeCode, type }) => {
-    dispatch(setActionMode(MODE_ADD_SUB_ATTRIBUTE_MONOLIST_COMPOSITE));
-    dispatch(fetchDataTypeAttribute(
-      type,
-      {
-        route: ROUTE_DATA_TYPE_ATTRIBUTE_ADD,
-        params: { entityCode: dataTypeCode },
-      },
-      type,
-      'addAttribute',
-    ));
-  },
-  onClickDelete: (attributeCode) => {
-    dispatch(removeAttributeFromComposite(attributeCode));
-  },
-  onMove: (fromIndex, toIndex) => {
-    dispatch(moveAttributeFromComposite(fromIndex, toIndex));
-  },
-});
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(MonolistAttributeForm));
diff --git a/src/ui/data-types/attributes/monolist/MonolistPage.js b/src/ui/data-types/attributes/monolist/MonolistPage.js
deleted file mode 100644
index d297aff7b..000000000
--- a/src/ui/data-types/attributes/monolist/MonolistPage.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { Grid, Row, Col, Breadcrumb } from 'patternfly-react';
-import { routeConverter } from '@entando/utils';
-
-import BreadcrumbItem from 'ui/common/BreadcrumbItem';
-import InternalPage from 'ui/internal-page/InternalPage';
-import PageTitle from 'ui/internal-page/PageTitle';
-import MonolistAttributeFormContainer from 'ui/data-types/attributes/monolist/MonolistAttributeFormContainer';
-import {
-  ROUTE_DATA_TYPE_LIST,
-  ROUTE_DATA_TYPE_ATTRIBUTE_EDIT,
-} from 'app-init/router';
-
-import { TYPE_COMPOSITE, TYPE_MONOLIST } from 'state/data-types/const';
-
-class MonolistPage extends Component {
-  componentWillMount() {
-    this.props.onWillMount(this.props);
-  }
-
-  render() {
-    const {
-      attributeCode, dataTypeCode, selectedAttribute, entityCode, type,
-    } = this.props;
-    const titleId = selectedAttribute === '' ? 'app.edit' : `app.edit.${selectedAttribute}`;
-    return (
-      <InternalPage className="MonolistPage">
-        <Grid fluid>
-          <Row>
-            <Col xs={12}>
-              <Breadcrumb>
-                <BreadcrumbItem>
-                  <FormattedMessage id="menu.data" />
-                </BreadcrumbItem>
-                <BreadcrumbItem to={ROUTE_DATA_TYPE_LIST}>
-                  <FormattedMessage id="menu.dataType" />
-                </BreadcrumbItem>
-                <BreadcrumbItem>
-                  <FormattedMessage id="app.edit" /> :
-                  &nbsp;{dataTypeCode}
-                </BreadcrumbItem>
-                {
-                  type === TYPE_COMPOSITE ?
-                    <BreadcrumbItem>
-                      <FormattedMessage id="app.edit.attribute" />
-                      {attributeCode}
-                    </BreadcrumbItem> :
-                    <BreadcrumbItem
-                      to={routeConverter(
-                        ROUTE_DATA_TYPE_ATTRIBUTE_EDIT,
-                        { entityCode, attributeCode },
-                      )}
-                    >
-                      <FormattedMessage id="app.edit.attribute" />
-                      {attributeCode}
-                    </BreadcrumbItem>
-                }
-                <BreadcrumbItem active>
-                  {type === TYPE_COMPOSITE ? TYPE_MONOLIST : selectedAttribute}
-                </BreadcrumbItem>
-              </Breadcrumb>
-            </Col>
-          </Row>
-          <PageTitle
-            titleId={titleId}
-            helpId="dataType.help"
-          />
-          <Row>
-            <Col xs={12} >
-              <MonolistAttributeFormContainer />
-            </Col>
-          </Row>
-        </Grid>
-      </InternalPage>
-    );
-  }
-}
-
-MonolistPage.propTypes = {
-  onWillMount: PropTypes.func,
-  dataTypeCode: PropTypes.string,
-  attributeCode: PropTypes.string,
-  selectedAttribute: PropTypes.string,
-  entityCode: PropTypes.string,
-  type: PropTypes.string,
-
-};
-
-MonolistPage.defaultProps = {
-  onWillMount: () => {},
-  dataTypeCode: '',
-  attributeCode: '',
-  selectedAttribute: '',
-  entityCode: '',
-  type: '',
-};
-
-
-export default MonolistPage;
diff --git a/src/ui/data-types/attributes/monolist/MonolistPageContainer.js b/src/ui/data-types/attributes/monolist/MonolistPageContainer.js
deleted file mode 100644
index 95017107e..000000000
--- a/src/ui/data-types/attributes/monolist/MonolistPageContainer.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import { formValueSelector } from 'redux-form';
-
-import { fetchAttributeFromDataType } from 'state/data-types/actions';
-import { getActionModeDataTypeSelectedAttribute } from 'state/data-types/selectors';
-import { MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE } from 'state/data-types/const';
-
-import MonolistPage from 'ui/data-types/attributes/monolist/MonolistPage';
-
-
-export const mapStateToProps = (state, { match: { params } }) => ({
-  mode: getActionModeDataTypeSelectedAttribute(state) || '',
-  attributeCode: params.attributeCode,
-  entityCode: params.entityCode,
-  dataTypeCode: params.entityCode,
-  isIndexable: formValueSelector('monoListAttribute')(state, 'nestedAttribute.indexable'),
-  type: formValueSelector('monoListAttribute')(state, 'nestedAttribute.type'),
-  selectedAttribute: formValueSelector('monoListAttribute')(state, 'type'),
-});
-
-export const mapDispatchToProps = dispatch => ({
-  onWillMount: ({ attributeCode, dataTypeCode, mode }) => {
-    if (mode !== MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE) {
-      dispatch(fetchAttributeFromDataType('monoListAttribute ', dataTypeCode, attributeCode));
-    }
-  },
-});
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MonolistPage));
diff --git a/src/ui/data-types/common/DataTypeForm.js b/src/ui/data-types/common/DataTypeForm.js
deleted file mode 100644
index 02837b0ab..000000000
--- a/src/ui/data-types/common/DataTypeForm.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { FormattedMessage } from 'react-intl';
-import { InputGroup, Button, Row, Col } from 'patternfly-react';
-
-import { required, maxLength } from '@entando/utils';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
-import FormLabel from 'ui/common/form/FormLabel';
-import AttributeListTable from 'ui/common/attributes/AttributeListTable';
-import DeleteAttributeModalContainer from 'ui/data-types/attributes/DeleteAttributeModalContainer';
-
-
-const uppercaseThreeLetters = value =>
-  (value && !/[A-Z]$/g.test(value)
-    ? <FormattedMessage id="validateForm.element.code" /> : undefined);
-
-const maxLength3 = maxLength(3);
-
-const maxLength50 = maxLength(50);
-
-
-export class DataTypeFormBody extends Component {
-  componentWillMount() {
-    this.props.onWillMount(this.props);
-  }
-
-  render() {
-    const {
-      attributesType, mode, handleSubmit,
-      onAddAttribute, invalid, submitting,
-      dataTypeCode,
-    } = this.props;
-
-    const isEdit = mode === 'edit';
-
-    const selectOptions = attributesType.map(item => ({
-      value: item,
-      text: item,
-    }));
-
-    const renderAttributeTable = () => {
-      if (isEdit) {
-        return (
-          <Row>
-            <AttributeListTable
-              entityCode={dataTypeCode}
-              {...this.props}
-            />
-            <DeleteAttributeModalContainer />
-          </Row>
-        );
-      }
-      return '';
-    };
-
-    const renderSelectOption = () => {
-      if (isEdit) {
-        return (
-          <div>
-            <legend>
-              <FormattedMessage id="app.attributes" />
-            </legend>
-            <InputGroup>
-              <Field
-                component={RenderSelectInput}
-                options={selectOptions}
-                defaultOptionId="app.chooseAnOption"
-                label={
-                  <FormLabel labelId="DataType.type" required />
-                }
-                name="type"
-              />
-              <span className="input-group-btn">
-                <Button
-                  type="button"
-                  className="pull-right DataTypeForm__add"
-                  bsStyle="primary"
-                  onClick={() => onAddAttribute(this.props)}
-                  disabled={invalid || submitting}
-                >
-                  <FormattedMessage
-                    id="app.add"
-                  />
-                </Button>
-              </span>
-            </InputGroup>
-          </div>
-        );
-      }
-      return '';
-    };
-
-    return (
-      <form onSubmit={handleSubmit} className="form-horizontal DataTypeForm">
-        <Row>
-          <Col xs={12}>
-            <fieldset className="no-padding">
-              <legend>
-                <FormattedMessage id="app.info" />
-                <div className="DataTypeForm__required-fields text-right">
-                  * <FormattedMessage id="app.fieldsRequired" />
-                </div>
-              </legend>
-              <Field
-                component={RenderTextInput}
-                className="DataTypeForm__input-code"
-                name="code"
-                label={
-                  <FormLabel labelId="app.code" helpId="app.add.attribute.code" required />
-                 }
-                validate={[required, uppercaseThreeLetters, maxLength3]}
-                disabled={isEdit}
-              />
-              <Field
-                component={RenderTextInput}
-                name="name"
-                label={
-                  <FormLabel labelId="app.name" helpId="app.help.name" required />
-                 }
-                validate={[required, maxLength50]}
-              />
-              {renderSelectOption()}
-              {renderAttributeTable()}
-            </fieldset>
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col xs={12}>
-            <Button
-              className="pull-right DataTypeFormBody__save--btn"
-              type="submit"
-              bsStyle="primary"
-              disabled={invalid || submitting}
-            >
-              <FormattedMessage id="app.save" />
-            </Button>
-          </Col>
-        </Row>
-      </form>
-
-    );
-  }
-}
-
-DataTypeFormBody.propTypes = {
-  onWillMount: PropTypes.func,
-  onSubmit: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  onAddAttribute: PropTypes.func,
-  attributesType: PropTypes.arrayOf(PropTypes.string).isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
-  mode: PropTypes.string,
-  dataTypeCode: PropTypes.string,
-};
-
-DataTypeFormBody.defaultProps = {
-  onWillMount: () => {},
-  onAddAttribute: () => {},
-  invalid: false,
-  submitting: false,
-  mode: 'add',
-  dataTypeCode: '',
-};
-
-const DataTypeForm = reduxForm({
-  form: 'DataType',
-})(DataTypeFormBody);
-
-export default DataTypeForm;
diff --git a/src/ui/data-types/edit/EditDataTypesPage.js b/src/ui/data-types/edit/EditDataTypesPage.js
deleted file mode 100644
index 3c0b7e8cd..000000000
--- a/src/ui/data-types/edit/EditDataTypesPage.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Grid, Row, Col, Breadcrumb } from 'patternfly-react';
-
-import BreadcrumbItem from 'ui/common/BreadcrumbItem';
-import InternalPage from 'ui/internal-page/InternalPage';
-import PageTitle from 'ui/internal-page/PageTitle';
-import EditFormContainer from 'ui/data-types/edit/EditFormContainer';
-import { ROUTE_DATA_TYPE_LIST } from 'app-init/router';
-import withPermissions from 'ui/auth/withPermissions';
-import { SUPERUSER_PERMISSION } from 'state/permissions/const';
-
-const EditDataTypesPage = () => (
-  <InternalPage className="EditDataTypesPage">
-    <Grid fluid>
-      <Row>
-        <Col xs={12}>
-          <Breadcrumb>
-            <BreadcrumbItem>
-              <FormattedMessage id="menu.data" />
-            </BreadcrumbItem>
-            <BreadcrumbItem to={ROUTE_DATA_TYPE_LIST}>
-              <FormattedMessage id="menu.dataType" />
-            </BreadcrumbItem>
-            <BreadcrumbItem active>
-              <FormattedMessage id="app.edit" />
-            </BreadcrumbItem>
-          </Breadcrumb>
-        </Col>
-      </Row>
-      <PageTitle
-        titleId="app.edit"
-        helpId="dataType.help"
-      />
-      <Row>
-        <Col xs={12} >
-          <EditFormContainer />
-        </Col>
-      </Row>
-    </Grid>
-  </InternalPage>
-);
-
-export default withPermissions(SUPERUSER_PERMISSION)(EditDataTypesPage);
diff --git a/src/ui/data-types/edit/EditFormContainer.js b/src/ui/data-types/edit/EditFormContainer.js
deleted file mode 100644
index 5e5d183ef..000000000
--- a/src/ui/data-types/edit/EditFormContainer.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { connect } from 'react-redux';
-import { formValueSelector } from 'redux-form';
-import { withRouter } from 'react-router-dom';
-import {
-  fetchDataTypeAttributes,
-  sendPutDataType,
-  fetchDataType,
-  fetchDataTypeAttribute,
-  sendMoveAttributeUp,
-  sendMoveAttributeDown,
-
-} from 'state/data-types/actions';
-import {
-  getSelectedDataTypeAttributes,
-  getDataTypeAttributesIdList,
-
-} from 'state/data-types/selectors';
-import DataTypeForm from 'ui/data-types/common/DataTypeForm';
-
-import { setVisibleModal, setInfo } from 'state/modal/actions';
-import { MODAL_ID } from 'ui/data-types/attributes/DeleteAttributeModal';
-import { ROUTE_DATA_TYPE_ATTRIBUTE_ADD, ROUTE_DATA_TYPE_ATTRIBUTE_EDIT } from 'app-init/router';
-
-export const mapStateToProps = (state, { match: { params } }) => ({
-  mode: 'edit',
-  dataTypeCode: params.datatypeCode,
-  attributes: getSelectedDataTypeAttributes(state),
-  attributesType: getDataTypeAttributesIdList(state),
-  attributeCode: formValueSelector('DataType')(state, 'type'),
-  routeToEdit: ROUTE_DATA_TYPE_ATTRIBUTE_EDIT,
-});
-
-
-export const mapDispatchToProps = dispatch => ({
-  onWillMount: ({ dataTypeCode }) => {
-    dispatch(fetchDataType(dataTypeCode));
-    dispatch(fetchDataTypeAttributes());
-  },
-  onAddAttribute: ({ attributeCode, dataTypeCode }) => {
-    dispatch(fetchDataTypeAttribute(
-      attributeCode,
-      {
-        route: ROUTE_DATA_TYPE_ATTRIBUTE_ADD,
-        params: { entityCode: dataTypeCode },
-      },
-    ));
-  },
-
-  onMoveUp: (entityCode, attributeCode, attributeIndex) => {
-    dispatch(sendMoveAttributeUp({ entityCode, attributeCode, attributeIndex }));
-  },
-  onMoveDown: (entityCode, attributeCode, attributeIndex) => {
-    dispatch(sendMoveAttributeDown({ entityCode, attributeCode, attributeIndex }));
-  },
-  onClickDelete: (code) => {
-    dispatch(setVisibleModal(MODAL_ID));
-    dispatch(setInfo({ type: 'attribute', code }));
-  },
-  onSubmit: values => dispatch(sendPutDataType(values)),
-
-});
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(DataTypeForm));
diff --git a/src/ui/email-config/AddEmailSenderFormContainer.js b/src/ui/email-config/AddEmailSenderFormContainer.js
index 49367b180..0cd7ff0d5 100644
--- a/src/ui/email-config/AddEmailSenderFormContainer.js
+++ b/src/ui/email-config/AddEmailSenderFormContainer.js
@@ -12,8 +12,14 @@ const AddEmailSenderFormContainer = () => {
     [dispatch],
   );
 
+  const initialValues = { code: '', email: '' };
+
   return (
-    <EmailSenderForm titleId="emailConfig.senderMgmt.new" onSubmit={handleSubmit} />
+    <EmailSenderForm
+      titleId="emailConfig.senderMgmt.new"
+      onSubmit={handleSubmit}
+      initialValues={initialValues}
+    />
   );
 };
 
diff --git a/src/ui/email-config/EditEmailSenderFormContainer.js b/src/ui/email-config/EditEmailSenderFormContainer.js
index 0c4df313b..6d02daa91 100644
--- a/src/ui/email-config/EditEmailSenderFormContainer.js
+++ b/src/ui/email-config/EditEmailSenderFormContainer.js
@@ -1,13 +1,21 @@
-import React, { useCallback, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import EmailSenderForm from 'ui/email-config/EmailSenderForm';
 import { fetchEmailSender, updateEmailSender } from 'state/email-config/actions';
+import { getSelectedSender } from 'state/email-config/selectors';
 
 const EditEmailSenderFormContainer = () => {
   const dispatch = useDispatch();
   const { code } = useParams();
+  const selectedSender = useSelector(getSelectedSender);
+
+  const initialValues = useMemo(() => ({
+    code: '',
+    email: '',
+    ...selectedSender,
+  }), [selectedSender]);
 
   useEffect(() => {
     dispatch(fetchEmailSender(code));
@@ -19,7 +27,12 @@ const EditEmailSenderFormContainer = () => {
   );
 
   return (
-    <EmailSenderForm titleId="emailConfig.senderMgmt.edit" onSubmit={handleSubmit} editing />
+    <EmailSenderForm
+      titleId="emailConfig.senderMgmt.edit"
+      onSubmit={handleSubmit}
+      initialValues={initialValues}
+      editing
+    />
   );
 };
 
diff --git a/src/ui/email-config/EmailConfigSmtpServer.js b/src/ui/email-config/EmailConfigSmtpServer.js
index e7d068c90..04d5454c1 100644
--- a/src/ui/email-config/EmailConfigSmtpServer.js
+++ b/src/ui/email-config/EmailConfigSmtpServer.js
@@ -2,15 +2,16 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Panel } from 'react-bootstrap';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import { Field, reduxForm } from 'redux-form';
-import { Form, Button } from 'patternfly-react';
+import * as Yup from 'yup';
+import { withFormik, Form, Field } from 'formik';
+import { Button } from 'patternfly-react';
 import { required } from '@entando/utils';
 
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
 import FormLabel from 'ui/common/form/FormLabel';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderRadioInput from 'ui/common/form/RenderRadioInput';
+import SwitchInput from 'ui/common/formik-field/SwitchInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderRadioInput from 'ui/common/formik-field/RenderRadioInput';
 
 const msgs = defineMessages({
   formLabel: {
@@ -19,19 +20,19 @@ const msgs = defineMessages({
   },
 });
 
-const EmailConfigSmtpServerBody = ({
-  intl, handleSubmit, onTestConfig, onSendTestEmail, invalid, submitting,
+export const EmailConfigSmtpServerBody = ({
+  intl, handleSubmit, onTestConfig, onSendTestEmail, isValid, isSubmitting, values,
 }) => {
   const generalSettingsSection = (
     <Fragment>
       <FormSectionTitle titleId="emailConfig.smtpServer.generalSettings" />
       <Field
-        component={SwitchRenderer}
+        component={SwitchInput}
         name="active"
         label={<FormLabel labelId="emailConfig.smtpServer.active" />}
       />
       <Field
-        component={SwitchRenderer}
+        component={SwitchInput}
         name="debugMode"
         label={<FormLabel labelId="emailConfig.smtpServer.debugMode" />}
       />
@@ -63,7 +64,7 @@ const EmailConfigSmtpServerBody = ({
           ]}
       />
       <Field
-        component={SwitchRenderer}
+        component={SwitchInput}
         name="checkServerIdentity"
         label={<FormLabel labelId="emailConfig.smtpServer.checkServerIdentity" />}
       />
@@ -92,15 +93,15 @@ const EmailConfigSmtpServerBody = ({
     </Fragment>
   );
 
-  const btnsDisabled = invalid || submitting;
+  const btnsDisabled = !isValid || isSubmitting;
 
   const buttonToolbar = (
     <div>
       <div className="btn-toolbar pull-right">
         <Button
-          onClick={handleSubmit(onTestConfig)}
           bsStyle="success"
           disabled={btnsDisabled}
+          onClick={() => onTestConfig(values)}
         >
           <FormattedMessage id="emailConfig.smtpServer.testConfig" />
         </Button>
@@ -123,7 +124,7 @@ const EmailConfigSmtpServerBody = ({
   );
 
   return (
-    <Form aria-label={intl.formatMessage(msgs.formLabel)} onSubmit={handleSubmit} horizontal>
+    <Form aria-label={intl.formatMessage(msgs.formLabel)} onSubmit={handleSubmit} className="form-horizontal">
       <Panel>
         <Panel.Body>
           <FormattedMessage id="emailConfig.smtpServer.panelMsg" />
@@ -142,14 +143,41 @@ EmailConfigSmtpServerBody.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   onTestConfig: PropTypes.func.isRequired,
   onSendTestEmail: PropTypes.func.isRequired,
-  invalid: PropTypes.bool.isRequired,
-  submitting: PropTypes.bool.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  values: PropTypes.object.isRequired,
 };
 
-const EmailConfigSmtpServer = injectIntl(reduxForm({
-  form: 'emailConfig',
+const EmailConfigSmtpServer = withFormik({
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  validationSchema: () => (
+    Yup.object().shape({
+      host: Yup.string()
+        .required(<FormattedMessage id="validateForm.required" />),
+      timeout: Yup.number()
+        .typeError(<FormattedMessage id="validateForm.number" />)
+        .nullable()
+        .integer(<FormattedMessage id="validateForm.number" />),
+      port: Yup.number()
+        .typeError(<FormattedMessage id="validateForm.number" />)
+        .nullable()
+        .integer(<FormattedMessage id="validateForm.number" />),
+    })),
+  handleSubmit: (
+    values,
+    {
+      props: { onSubmit },
+      setSubmitting,
+    },
+  ) => {
+    onSubmit(values).then(() => (
+      setSubmitting(false)
+    ));
+  },
   enableReinitialize: true,
+  displayName: 'emailConfig',
   keepDirtyOnReinitialize: true,
-})(EmailConfigSmtpServerBody));
+})(EmailConfigSmtpServerBody);
 
-export default EmailConfigSmtpServer;
+export default injectIntl(EmailConfigSmtpServer);
diff --git a/src/ui/email-config/EmailConfigSmtpServerContainer.js b/src/ui/email-config/EmailConfigSmtpServerContainer.js
index 77463bab0..da1ffaa54 100644
--- a/src/ui/email-config/EmailConfigSmtpServerContainer.js
+++ b/src/ui/email-config/EmailConfigSmtpServerContainer.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import EmailConfigSmtpServer from 'ui/email-config/EmailConfigSmtpServer';
 import {
@@ -8,9 +8,11 @@ import {
   sendTestEmail,
   testEmailConfig,
 } from 'state/email-config/actions';
+import { getSmtpServer } from 'state/email-config/selectors';
 
 const EmailConfigSmtpServerContainer = () => {
   const dispatch = useDispatch();
+  const initialValues = useSelector(getSmtpServer);
 
   useEffect(() => {
     dispatch(fetchSMTPServerSettings());
@@ -36,6 +38,7 @@ const EmailConfigSmtpServerContainer = () => {
       onSubmit={handleSubmit}
       onTestConfig={handleTestConfig}
       onSendTestEmail={handleSendTestEmail}
+      initialValues={initialValues}
     />
   );
 };
diff --git a/src/ui/email-config/EmailSenderForm.js b/src/ui/email-config/EmailSenderForm.js
index 88fb58e7d..b24a4a5b8 100644
--- a/src/ui/email-config/EmailSenderForm.js
+++ b/src/ui/email-config/EmailSenderForm.js
@@ -1,62 +1,75 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
-import { Field, reduxForm } from 'redux-form';
-import { Form, Button } from 'patternfly-react';
-import { required } from '@entando/utils';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from 'yup';
+import { Button } from 'patternfly-react';
 
 import PageTitle from 'ui/internal-page/PageTitle';
 import FormLabel from 'ui/common/form/FormLabel';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import { emailValid } from 'helpers/formikValidations';
 
-const EmailSenderFormBody = ({
-  intl, titleId, handleSubmit, invalid, submitting, editing,
+const formSchema = Yup.object().shape({
+  code: Yup.string()
+    .required(<FormattedMessage id="validateForm.required" />),
+  email: Yup.string()
+    .required(<FormattedMessage id="validateForm.required" />)
+    .test('emailValid', emailValid),
+});
+
+const EmailSenderForm = ({
+  intl, titleId, editing, initialValues, onSubmit,
 }) => (
   <div>
     <PageTitle titleId={titleId} helpId="emailConfig.help" />
-    <Form aria-label={intl.formatMessage({ id: titleId })} onSubmit={handleSubmit} horizontal>
-      <Field
-        component={RenderTextInput}
-        name="code"
-        label={<FormLabel labelId="app.code" required />}
-        validate={required}
-        disabled={editing}
-      />
-      <Field
-        component={RenderTextInput}
-        name="email"
-        label={<FormLabel labelId="emailConfig.senderMgmt.email" required />}
-        validate={required}
-      />
-      <Button
-        type="submit"
-        bsStyle="primary"
-        className="pull-right"
-        disabled={invalid || submitting}
-      >
-        <FormattedMessage id="app.save" />
-      </Button>
-    </Form>
+    <Formik
+      initialValues={initialValues}
+      validationSchema={formSchema}
+      onSubmit={onSubmit}
+      validateOnMount
+      enableReinitialize
+    >
+      {formik => (
+        <Form className="form-horizontal" aria-label={intl.formatMessage({ id: titleId })}>
+          <Field
+            component={RenderTextInput}
+            name="code"
+            label={<FormLabel labelId="app.code" required />}
+            disabled={editing}
+          />
+          <Field
+            component={RenderTextInput}
+            name="email"
+            label={<FormLabel labelId="emailConfig.senderMgmt.email" required />}
+          />
+          <Button
+            type="submit"
+            bsStyle="primary"
+            className="pull-right"
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            <FormattedMessage id="app.save" />
+          </Button>
+        </Form>
+        )}
+    </Formik>
   </div>
 );
 
-EmailSenderFormBody.propTypes = {
+EmailSenderForm.propTypes = {
   intl: intlShape.isRequired,
   titleId: PropTypes.string.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool.isRequired,
-  submitting: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
   editing: PropTypes.bool,
+  initialValues: PropTypes.shape({
+    code: PropTypes.string,
+    email: PropTypes.string,
+  }).isRequired,
 };
 
-EmailSenderFormBody.defaultProps = {
+EmailSenderForm.defaultProps = {
   editing: false,
 };
 
-const EmailSenderForm = injectIntl(reduxForm({
-  form: 'emailSender',
-  enableReinitialize: true,
-  keepDirtyOnReinitialize: true,
-})(EmailSenderFormBody));
-
-export default EmailSenderForm;
+export default injectIntl(EmailSenderForm);
diff --git a/src/ui/file-browser/add/CreateFolderForm.js b/src/ui/file-browser/add/CreateFolderForm.js
index 5f4b52ab8..3a6e8b36d 100644
--- a/src/ui/file-browser/add/CreateFolderForm.js
+++ b/src/ui/file-browser/add/CreateFolderForm.js
@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
+import { Form, Field, withFormik } from 'formik';
+import * as Yup from 'yup';
+import { formatMessageMaxLength, formatMessageRequired } from 'helpers/formikValidations';
 import { Button, Row, Col } from 'patternfly-react';
-import { required, maxLength } from '@entando/utils';
+import { maxLength } from '@entando/utils';
 import { Link } from 'react-router-dom';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import { ROUTE_FILE_BROWSER, history } from 'app-init/router';
 
@@ -26,11 +28,11 @@ export class CreateFolderFormBody extends Component {
 
   render() {
     const {
-      intl, invalid, submitting,
+      intl, isValid, isSubmitting,
     } = this.props;
 
     return (
-      <form onSubmit={this.onSubmit} className="FileBrowserCreateFolder form-horizontal">
+      <Form className="FileBrowserCreateFolder form-horizontal">
         <Row>
           <Col xs={12}>
             <fieldset className="no-padding">
@@ -44,7 +46,6 @@ export class CreateFolderFormBody extends Component {
                 name="path"
                 label={<FormLabel labelId="fileBrowser.newFolder" required />}
                 placeholder={intl.formatMessage(msgs.newFolder)}
-                validate={[required, maxLength50]}
               />
             </fieldset>
           </Col>
@@ -55,7 +56,7 @@ export class CreateFolderFormBody extends Component {
               className="pull-right FileBrowserCreateFolderForm__btn-submit"
               type="submit"
               bsStyle="primary"
-              disabled={invalid || submitting}
+              disabled={!isValid || isSubmitting}
             >
               <FormattedMessage id="app.save" />
             </Button>
@@ -68,7 +69,7 @@ export class CreateFolderFormBody extends Component {
             </Button>
           </Col>
         </Row>
-      </form>
+      </Form>
     );
   }
 }
@@ -76,8 +77,8 @@ export class CreateFolderFormBody extends Component {
 CreateFolderFormBody.propTypes = {
   intl: intlShape.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool.isRequired,
-  submitting: PropTypes.bool.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
   history: PropTypes.shape({
     location: PropTypes.shape({
       pathname: PropTypes.string.isRequired,
@@ -85,8 +86,18 @@ CreateFolderFormBody.propTypes = {
   }).isRequired,
 };
 
-const CreateFolderForm = reduxForm({
-  form: 'FileBrowserCreateFolder',
+const CreateFolderForm = withFormik({
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  enableReinitialize: true,
+  validationSchema: ({ intl }) => Yup.object().shape({
+    path: Yup.string()
+      .required(intl.formatMessage(formatMessageRequired))
+      .max(50, intl.formatMessage(formatMessageMaxLength, { max: 50 })),
+  }),
+  handleSubmit: (values, { props: { onSubmit } }) => {
+    onSubmit(values);
+  },
+  displayName: 'FileBrowserCreateFolderFormik',
 })(CreateFolderFormBody);
 
 export default injectIntl(CreateFolderForm);
diff --git a/src/ui/file-browser/add/CreateFolderFormContainer.js b/src/ui/file-browser/add/CreateFolderFormContainer.js
index 9949a3ced..77d561c80 100644
--- a/src/ui/file-browser/add/CreateFolderFormContainer.js
+++ b/src/ui/file-browser/add/CreateFolderFormContainer.js
@@ -4,13 +4,17 @@ import { sendPostCreateFolder } from 'state/file-browser/actions';
 import CreateFolderForm from 'ui/file-browser/add/CreateFolderForm';
 
 export const mapDispatchToProps = dispatch => ({
-  onSubmit: (values) => {
-    dispatch(sendPostCreateFolder(values));
+  onSubmit: values => dispatch(sendPostCreateFolder(values)),
+});
+
+export const mapStateToProps = () => ({
+  initialValues: {
+    path: '',
   },
 });
 
 export default withRouter(connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps,
   null, {
     pure: false,
diff --git a/src/ui/file-browser/add/CreateTextFileFormContainer.js b/src/ui/file-browser/add/CreateTextFileFormContainer.js
index 2768a7399..de75de8ae 100644
--- a/src/ui/file-browser/add/CreateTextFileFormContainer.js
+++ b/src/ui/file-browser/add/CreateTextFileFormContainer.js
@@ -6,6 +6,8 @@ import { saveFile } from 'state/file-browser/actions';
 export const mapStateToProps = () => ({
   initialValues: {
     extension: '.txt',
+    name: '',
+    content: '',
   },
 });
 
@@ -13,7 +15,7 @@ export const mapDispatchToProps = dispatch => ({
   onSubmit: (values) => {
     const { name, extension, content } = values;
     const file = new File([content], `${name}${extension}`);
-    dispatch(saveFile(file));
+    return dispatch(saveFile(file));
   },
 });
 
diff --git a/src/ui/file-browser/common/CreateTextFileForm.js b/src/ui/file-browser/common/CreateTextFileForm.js
index b342c4d05..b724bfb80 100644
--- a/src/ui/file-browser/common/CreateTextFileForm.js
+++ b/src/ui/file-browser/common/CreateTextFileForm.js
@@ -1,13 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { Button, Row, Col, ControlLabel, Icon } from 'patternfly-react';
-import { required, maxLength } from '@entando/utils';
+import { Form, Field, withFormik } from 'formik';
+import * as Yup from 'yup';
+import { formatMessageMaxLength, formatMessageRequired } from 'helpers/formikValidations';
+import { Button, Row, Col, Icon } from 'patternfly-react';
+import { maxLength } from '@entando/utils';
 import { Link } from 'react-router-dom';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import RenderTextAreaInput from 'ui/common/form/RenderTextAreaInput';
+import RenderTextAreaInput from 'ui/common/formik-field/RenderTextAreaInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import { ROUTE_FILE_BROWSER, history } from 'app-init/router';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 
 export const maxLength50 = maxLength(50);
 
@@ -22,26 +25,6 @@ const msgs = defineMessages({
   },
 });
 
-const RenderTextInput = (field) => {
-  const {
-    input, append, meta: { touched, error }, disabled,
-  } = field;
-  return (
-    <div className={`CreateTextFileForm__input ${(touched && error) ? 'form-group has-error' : 'form-group'}`}>
-      <input
-        {...input}
-        type="text"
-        id={input.name}
-        className="form-control CreateTextFileForm__input-text"
-        disabled={disabled}
-      />
-      {append && <span className="AppendedLabel">{append}</span>}
-      {touched && ((error && <span className="help-block">{error}</span>))}
-    </div>
-  );
-};
-
-
 export class CreateTextFileFormBody extends Component {
   componentWillMount() {
     const { filename, onWillMount } = this.props;
@@ -49,24 +32,18 @@ export class CreateTextFileFormBody extends Component {
   }
   render() {
     const {
-      intl, invalid, submitting, handleSubmit, mode, filename, onClickDownload,
+      intl, isValid, isSubmitting, handleSubmit, mode, filename, onClickDownload,
     } = this.props;
 
     return (
-      <form onSubmit={handleSubmit} className="CreateTextFileForm form-horizontal">
+      <Form onSubmit={handleSubmit} className="CreateTextFileForm form-horizontal">
         <Row>
-          <Col xs={2} className="text-right">
-            <ControlLabel htmlFor="name">
-              <FormLabel labelId="app.name" />
-            </ControlLabel>
-          </Col>
-          <Col xs={7}>
+          <Col xs={9}>
             { mode !== 'edit' ?
               <Field
                 component={RenderTextInput}
                 name="name"
                 label={<FormLabel labelId="app.name" />}
-                validate={[required, maxLength50]}
               /> :
               <div className="CreateTextFileForm__download-filename">{filename}
 
@@ -89,7 +66,6 @@ export class CreateTextFileFormBody extends Component {
                     <Field
                       component="select"
                       name="extension"
-                      validate={[required]}
                       className="CreateTextFileForm__select-extension form-control"
                     >
                       <option value=".txt">txt</option>
@@ -100,15 +76,14 @@ export class CreateTextFileFormBody extends Component {
             }
         </Row>
         <Row>
-          <Col xs={12}>
+          <Col xs={9}>
             <Field
               component={RenderTextAreaInput}
               cols={50}
               rows={20}
-              name="content"
               label={intl.formatMessage(msgs.textFileContent)}
+              name="content"
               placeholder={intl.formatMessage(msgs.textFilePlaceholder)}
-              validate={[required]}
             />
           </Col>
         </Row>
@@ -118,7 +93,7 @@ export class CreateTextFileFormBody extends Component {
               className="pull-right CreateTextFileForm__btn-submit"
               type="submit"
               bsStyle="primary"
-              disabled={invalid || submitting}
+              disabled={!isValid || isSubmitting}
             >
               <FormattedMessage id="app.save" />
             </Button>
@@ -131,7 +106,7 @@ export class CreateTextFileFormBody extends Component {
             </Button>
           </Col>
         </Row>
-      </form>
+      </Form>
     );
   }
 }
@@ -140,8 +115,8 @@ CreateTextFileFormBody.propTypes = {
   onWillMount: PropTypes.func,
   onClickDownload: PropTypes.func,
   handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool.isRequired,
-  submitting: PropTypes.bool.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
   mode: PropTypes.string,
   filename: PropTypes.string,
   history: PropTypes.shape({
@@ -158,8 +133,20 @@ CreateTextFileFormBody.defaultProps = {
   filename: '',
 };
 
-const CreateTextFileForm = reduxForm({
-  form: 'CreateTextFileForm',
+const CreateTextFileForm = withFormik({
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  enableReinitialize: true,
+  validationSchema: ({ intl, mode }) => Yup.object().shape({
+    name: mode === 'edit' ? null : Yup.string()
+      .required(intl.formatMessage(formatMessageRequired))
+      .max(50, intl.formatMessage(formatMessageMaxLength, { max: 50 })),
+    extension: mode === 'edit' ? null : Yup.string().required(intl.formatMessage(formatMessageRequired)),
+    content: Yup.string().required(intl.formatMessage(formatMessageRequired)),
+  }),
+  handleSubmit: (values, { props: { onSubmit } }) => {
+    onSubmit(values);
+  },
+  displayName: 'CreateTextFileFormFormik',
 })(CreateTextFileFormBody);
 
 export default injectIntl(CreateTextFileForm);
diff --git a/src/ui/file-browser/edit/EditTextFileFormContainer.js b/src/ui/file-browser/edit/EditTextFileFormContainer.js
index 5de59d9ba..78b3760bf 100644
--- a/src/ui/file-browser/edit/EditTextFileFormContainer.js
+++ b/src/ui/file-browser/edit/EditTextFileFormContainer.js
@@ -10,6 +10,10 @@ import { history, ROUTE_FILE_BROWSER } from 'app-init/router';
 export const mapStateToProps = (state, { match: { params } }) => ({
   mode: 'edit',
   filename: params.filename,
+  initialValues: {
+    name: '',
+    content: '',
+  },
 });
 
 export const mapDispatchToProps = dispatch => ({
@@ -22,9 +26,7 @@ export const mapDispatchToProps = dispatch => ({
   onClickDownload: (file) => {
     dispatch(downloadFile(file)).then((base64) => { download(file.name, base64); });
   },
-  onSubmit: (file) => {
-    dispatch(saveFile(file));
-  },
+  onSubmit: file => dispatch(saveFile(file)),
 });
 
 const mergeProps = (stateProps, dispatchProps) => ({
diff --git a/src/ui/file-browser/upload/UploadFileBrowserForm.js b/src/ui/file-browser/upload/UploadFileBrowserForm.js
index d98218267..904ab130d 100644
--- a/src/ui/file-browser/upload/UploadFileBrowserForm.js
+++ b/src/ui/file-browser/upload/UploadFileBrowserForm.js
@@ -1,26 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { Field, reduxForm } from 'redux-form';
 import { FormGroup, Col, Icon, Button, Spinner } from 'patternfly-react';
 import { Link } from 'react-router-dom';
 import { ROUTE_FILE_BROWSER, history } from 'app-init/router';
-import { required } from '@entando/utils';
-import RenderFileInput from 'ui/common/form/RenderFileInput';
+import RenderFileInput from 'ui/common/formik-field/RenderFileInput';
+import { Form, Field, withFormik } from 'formik';
+import * as Yup from 'yup';
 
 export const UploadFileBrowserBody = (props) => {
   const {
-    handleSubmit, invalid, submitting, loading,
+    isValid, isSubmitting, loading,
   } = props;
 
   return (
-    <form onSubmit={handleSubmit} className="UploadFileBrowserForm form-horizontal">
+    <Form aria-label="form" className="UploadFileBrowserForm form-horizontal">
       <Spinner loading={loading} size="lg" />
       <Field
         className="UploadFileBrowserForm__file"
         name="file"
         component={RenderFileInput}
-        validate={[required]}
         label={<FormattedMessage id="fileBrowser.uploadFiles" />}
       />
       <FormGroup>
@@ -28,7 +27,7 @@ export const UploadFileBrowserBody = (props) => {
           <div className="UploadFileBrowserForm__btn">
             <Button
               type="submit"
-              disabled={invalid || submitting}
+              disabled={!isValid || isSubmitting}
               className="pull-right UploadFileBrowserForm__btn-save"
               bsStyle="primary"
             >
@@ -45,15 +44,14 @@ export const UploadFileBrowserBody = (props) => {
           </div>
         </Col>
       </FormGroup>
-    </form>
+    </Form>
 
   );
 };
 
 UploadFileBrowserBody.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   loading: PropTypes.bool,
   history: PropTypes.shape({
     location: PropTypes.shape({
@@ -63,12 +61,22 @@ UploadFileBrowserBody.propTypes = {
 };
 
 UploadFileBrowserBody.defaultProps = {
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isSubmitting: false,
   loading: false,
 };
 
-const UploadFileBrowserForm = reduxForm({
-  form: 'fileBroswer',
+const UploadFileBrowserForm = withFormik({
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  enableReinitialize: true,
+  validationSchema: () => Yup.object().shape({
+    file: Yup.mixed().required(),
+  }),
+  handleSubmit: (values, { props: { onSubmit } }) => {
+    onSubmit(values);
+  },
+  displayName: 'fileBrowserUploadForm',
 })(UploadFileBrowserBody);
+
+
 export default UploadFileBrowserForm;
diff --git a/src/ui/file-browser/upload/UploadFileBrowserFormContainer.js b/src/ui/file-browser/upload/UploadFileBrowserFormContainer.js
index 4f869d8cd..7defb20a8 100644
--- a/src/ui/file-browser/upload/UploadFileBrowserFormContainer.js
+++ b/src/ui/file-browser/upload/UploadFileBrowserFormContainer.js
@@ -6,6 +6,9 @@ import { saveFile } from 'state/file-browser/actions';
 
 export const mapStateToProps = state => ({
   loading: getLoading(state).uploadFile,
+  initialValues: {
+    file: null,
+  },
 });
 
 export const mapDispatchToProps = dispatch => ({
diff --git a/src/ui/fragments/clone/CloneFormContainer.js b/src/ui/fragments/clone/CloneFormContainer.js
index ac30cc4bb..293948804 100644
--- a/src/ui/fragments/clone/CloneFormContainer.js
+++ b/src/ui/fragments/clone/CloneFormContainer.js
@@ -2,7 +2,6 @@ import { connect } from 'react-redux';
 
 import FragmentForm from 'ui/fragments/common/FragmentForm';
 import { sendPostFragment } from 'state/fragments/actions';
-import { submit } from 'redux-form';
 import { withRouter } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
 import { setVisibleModal } from 'state/modal/actions';
@@ -19,7 +18,6 @@ export const mapStateToProps = state => ({
 
 export const mapDispatchToProps = (dispatch, { history }) => ({
   onSubmit: (fragment, saveType) => dispatch(sendPostFragment(fragment, saveType)),
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('fragment')); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_FRAGMENT_LIST)); },
 });
diff --git a/src/ui/fragments/list/FragmentSearchForm.js b/src/ui/fragments/list/FragmentSearchForm.js
index 4a39da9e5..1f9227f2e 100644
--- a/src/ui/fragments/list/FragmentSearchForm.js
+++ b/src/ui/fragments/list/FragmentSearchForm.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, Field } from 'redux-form';
+import { Formik, Field } from 'formik';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Row, Col, FormGroup, Button } from 'patternfly-react';
 
@@ -17,6 +17,10 @@ const msgs = defineMessages({
     id: 'fragment.form.edit.plugin',
     defaultMessage: 'Edit Plugin',
   },
+  widgetTypePlaceholder: {
+    id: 'fragment.widgetType.placeholder',
+    defaultMessage: 'Widget Type',
+  },
 });
 
 const widgetCategoryMsgs = defineMessages({
@@ -74,91 +78,103 @@ export class FragmentSearchFormBody extends Component {
     this.props.onWillMount();
   }
 
-  onSubmit = (ev) => {
-    ev.preventDefault();
-    this.props.handleSubmit();
+  onSubmit = (values) => {
+    this.props.onSubmit(values);
   };
 
   render() {
     const { intl, widgetTypes, plugins } = this.props;
     return (
-      <form onSubmit={this.onSubmit} className="FragmentSearchForm form-horizontal well">
-        <h3><FormattedMessage id="app.search" /></h3>
-        <FormGroup>
-          <Row>
-            <label className="control-label col-sm-2" htmlFor="code">
-              <FormattedMessage id="fragment.code" />
-            </label>
-            <Col sm={9}>
-              <Field
-                id="fragmentcode"
-                component="input"
-                className="form-control"
-                name="code"
-                placeholder={intl.formatMessage(msgs.codePlaceholder)}
-              />
-            </Col>
-          </Row>
-        </FormGroup>
-        <FormGroup>
-          <Row>
-            <label className="control-label col-sm-2" htmlFor="widgetType">
-              <FormattedMessage id="fragment.form.edit.widgetType" />
-            </label>
-            <Col sm={9}>
-              <Field
-                component="select"
-                className="form-control"
-                name="widgetType"
-              >
-                <option>{intl.formatMessage(msgs.appAll)}</option>
-                {renderSelectOptgroup(widgetTypes, intl)}
-              </Field>
-            </Col>
-          </Row>
-        </FormGroup>
-        <FormGroup>
-          <Row>
-            <label className="control-label col-sm-2" htmlFor="plugin">
-              <FormattedMessage id="fragment.form.edit.plugin" />
-            </label>
-            <Col sm={9}>
-              <Field
-                component="select"
-                className="form-control"
-                name="pluginCode"
-                placeholder={intl.formatMessage(msgs.editPlugin)}
-              >
-                <option value={intl.formatMessage(msgs.appAll)}>
-                  {intl.formatMessage(msgs.appAll)}
-                </option>
-                {plugins.map(plugin =>
-                  <option key={plugin.code} value={plugin.code}>{plugin.title}</option>)}
-              </Field>
-            </Col>
-          </Row>
-        </FormGroup>
-        <FormGroup>
-          <Row>
-            <Col xs={11}>
-              <Button
-                type="submit"
-                bsStyle="primary"
-                className="pull-right"
-              >
-                <FormattedMessage id="app.search" />
-              </Button>
-            </Col>
-          </Row>
-        </FormGroup>
-      </form>
+      <Formik
+        initialValues={{
+      code: '', widgetType: '', pluginCode: '',
+    }}
+        onSubmit={this.onSubmit}
+      >
+        {({ handleSubmit }) => (
+          <form
+            onSubmit={handleSubmit}
+            className="FragmentSearchForm form-horizontal well"
+          >
+            <h3><FormattedMessage id="app.search" /></h3>
+            <FormGroup>
+              <Row>
+                <label className="control-label col-sm-2" htmlFor="fragmentcode">
+                  <FormattedMessage id="fragment.code" />
+                </label>
+                <Col sm={9}>
+                  <Field
+                    id="fragmentcode"
+                    component="input"
+                    className="form-control"
+                    name="code"
+                    placeholder={intl.formatMessage(msgs.codePlaceholder)}
+                  />
+                </Col>
+              </Row>
+            </FormGroup>
+            <FormGroup>
+              <Row>
+                <label className="control-label col-sm-2" htmlFor="widgetType">
+                  <FormattedMessage id="fragment.form.edit.widgetType" />
+                </label>
+                <Col sm={9}>
+                  <Field
+                    component="select"
+                    className="form-control"
+                    name="widgetType"
+                    placeholder={intl.formatMessage(msgs.widgetTypePlaceholder)}
+                  >
+                    <option>{intl.formatMessage(msgs.appAll)}</option>
+                    {renderSelectOptgroup(widgetTypes, intl)}
+                  </Field>
+                </Col>
+              </Row>
+            </FormGroup>
+            <FormGroup>
+              <Row>
+                <label className="control-label col-sm-2" htmlFor="pluginCode">
+                  <FormattedMessage id="fragment.form.edit.plugin" />
+                </label>
+                <Col sm={9}>
+                  <Field
+                    component="select"
+                    className="form-control"
+                    name="pluginCode"
+                    placeholder={intl.formatMessage(msgs.editPlugin)}
+                  >
+                    <option value={intl.formatMessage(msgs.appAll)}>
+                      {intl.formatMessage(msgs.appAll)}
+                    </option>
+                    {plugins.map(plugin =>
+                      <option key={plugin.code} value={plugin.code}>{plugin.title}</option>)}
+                  </Field>
+                </Col>
+              </Row>
+            </FormGroup>
+            <FormGroup>
+              <Row>
+                <Col xs={11}>
+                  <Button
+                    type="submit"
+                    bsStyle="primary"
+                    className="pull-right"
+                  >
+                    <FormattedMessage id="app.search" />
+                  </Button>
+                </Col>
+              </Row>
+            </FormGroup>
+          </form>
+         )}
+      </Formik>
     );
   }
 }
 
 FragmentSearchFormBody.propTypes = {
   intl: intlShape.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
   onWillMount: PropTypes.func,
   widgetTypes: PropTypes.arrayOf(PropTypes.shape({})),
   plugins: PropTypes.arrayOf(PropTypes.shape({})),
@@ -170,8 +186,4 @@ FragmentSearchFormBody.defaultProps = {
   plugins: [],
 };
 
-const FragmentSearchForm = reduxForm({
-  form: 'fragmentSearch',
-})(FragmentSearchFormBody);
-
-export default injectIntl(FragmentSearchForm);
+export default injectIntl(FragmentSearchFormBody);
diff --git a/src/ui/fragments/list/SettingsFragmentForm.js b/src/ui/fragments/list/SettingsFragmentForm.js
index 575c27fca..c6b475d7e 100644
--- a/src/ui/fragments/list/SettingsFragmentForm.js
+++ b/src/ui/fragments/list/SettingsFragmentForm.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import { PropTypes } from 'prop-types';
-import { reduxForm, Field } from 'redux-form';
+import { Form, Field, withFormik } from 'formik';
+import * as Yup from 'yup';
 import { FormattedMessage } from 'react-intl';
 import { FormGroup, Button, Row, Col } from 'patternfly-react';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import RenderSwitchInput from 'ui/common/formik-field/RenderSwitchInput';
 
 export class SettingsFragmentFormBody extends React.Component {
   componentWillMount() {
@@ -11,9 +12,10 @@ export class SettingsFragmentFormBody extends React.Component {
   }
 
   render() {
+    const { isValid, isSubmitting } = this.props;
     return (
       <div className="SettingsFragmentForm">
-        <form onSubmit={this.props.handleSubmit} className="SettingsFragmentForm">
+        <Form className="SettingsFragmentForm">
           <Row>
             <Col xs={12}>
               <fieldset>
@@ -26,7 +28,7 @@ export class SettingsFragmentFormBody extends React.Component {
                     </Col>
                     <Col xs={9} className="text-left">
                       <Field
-                        component={SwitchRenderer}
+                        component={RenderSwitchInput}
                         name="enableEditingWhenEmptyDefaultGui"
                       />
                     </Col>
@@ -41,6 +43,7 @@ export class SettingsFragmentFormBody extends React.Component {
                         type="submit"
                         bsStyle="primary"
                         className="pull-right"
+                        disabled={!isValid || isSubmitting}
                       >
                         <FormattedMessage id="app.save" />
                       </Button>
@@ -50,7 +53,7 @@ export class SettingsFragmentFormBody extends React.Component {
               </fieldset>
             </Col>
           </Row>
-        </form>
+        </Form>
       </div>
 
     );
@@ -59,11 +62,22 @@ export class SettingsFragmentFormBody extends React.Component {
 
 SettingsFragmentFormBody.propTypes = {
   onWillMount: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
 };
 
-const SettingsFragmentForm = reduxForm({
-  form: 'fragmentSettings',
+const SettingsFragmentForm = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  validationSchema: () => (
+    Yup.object().shape({
+      enableEditingWhenEmptyDefaultGui: Yup.boolean().nullable(true),
+    })
+  ),
+  handleSubmit: (values, { setSubmitting, props: { onSubmit } }) => {
+    onSubmit(values).then(() => setSubmitting(false));
+  },
+  displayName: 'fragmentSettings',
 })(SettingsFragmentFormBody);
 
 export default SettingsFragmentForm;
diff --git a/src/ui/fragments/list/SettingsFragmentFormContainer.js b/src/ui/fragments/list/SettingsFragmentFormContainer.js
index b76a0ac46..ceb4e93b6 100644
--- a/src/ui/fragments/list/SettingsFragmentFormContainer.js
+++ b/src/ui/fragments/list/SettingsFragmentFormContainer.js
@@ -1,17 +1,25 @@
 import { connect } from 'react-redux';
 
 import { fetchFragmentSettings, updateFragmentSettings } from 'state/fragments/actions';
+import { getFragmentSettings } from 'state/fragments/selectors';
 import SettingsFragmentForm from 'ui/fragments/list/SettingsFragmentForm';
 
+export const DEFAULT_FRAGMENT_SETTINGS = {
+  enableEditingWhenEmptyDefaultGui: false,
+};
+
+export const mapStateToProps = state => (
+  {
+    initialValues: getFragmentSettings(state) || DEFAULT_FRAGMENT_SETTINGS,
+  });
+
 export const mapDispatchToProps = dispatch => ({
   onWillMount: () => {
     dispatch(fetchFragmentSettings());
   },
-  onSubmit: (settings) => {
-    dispatch(updateFragmentSettings(settings));
-  },
+  onSubmit: settings => dispatch(updateFragmentSettings(settings)),
 });
 
-export default connect(null, mapDispatchToProps, null, {
+export default connect(mapStateToProps, mapDispatchToProps, null, {
   pure: false,
 })(SettingsFragmentForm);
diff --git a/src/ui/internal-page/VerticalMenuContainer.js b/src/ui/internal-page/VerticalMenuContainer.js
index 311cb5cc1..796b5d41e 100644
--- a/src/ui/internal-page/VerticalMenuContainer.js
+++ b/src/ui/internal-page/VerticalMenuContainer.js
@@ -5,10 +5,10 @@ import { withRouter } from 'react-router-dom';
 import { injectIntl, intlShape } from 'react-intl';
 import { VerticalNav, Button, Icon } from 'patternfly-react';
 import { routeConverter, hasAccess } from '@entando/utils';
+import { adminConsoleUrl } from 'helpers/urlUtils';
 
 import { clearAppTourProgress, setAppTourLastStep, setWizardEnabled } from 'state/app-tour/actions';
 
-import { adminConsoleUrl } from 'helpers/urlUtils';
 import UserMenuContainer from 'ui/internal-page/UserMenuContainer';
 import LanguageSelectContainer from 'ui/internal-page/LanguageSelectContainer';
 
@@ -230,13 +230,7 @@ const EntandoMenu = ({
         hiddenIcons={false}
         hideMasthead={false}
         hoverDisabled
-        onNavigate={({ href, onClick }) => {
-          if (href) {
-            window.location.href = href;
-          } else {
-            onClick();
-          }
-        }}
+        onNavigate={e => e.onClick()}
         pinnableMenus={false}
         hoverPath={openPath}
         onItemClick={handleItemClick}
diff --git a/src/ui/labels/add/AddFormContainer.js b/src/ui/labels/add/AddFormContainer.js
index 294308fba..3556f8b7b 100644
--- a/src/ui/labels/add/AddFormContainer.js
+++ b/src/ui/labels/add/AddFormContainer.js
@@ -6,21 +6,28 @@ import { getActiveLanguages, getDefaultLanguage } from 'state/languages/selector
 import { fetchLanguages } from 'state/languages/actions';
 import { getLoading } from 'state/loading/selectors';
 
-export const mapStateToProps = state => ({
-  locale: getLocale(state),
-  languages: getActiveLanguages(state),
-  defaultLanguage: getDefaultLanguage(state),
-  loadingLangs: getLoading(state).languages,
-
-});
+export const mapStateToProps = (state) => {
+  const languages = getActiveLanguages(state);
+  return {
+    locale: getLocale(state),
+    languages,
+    defaultLanguage: getDefaultLanguage(state),
+    loadingLangs: getLoading(state).languages,
+    initialValues: {
+      key: '',
+      titles: languages.reduce((acc, curr) => ({
+        ...acc,
+        [curr.code]: '',
+      }), {}),
+    },
+  };
+};
 
 export const mapDispatchToProps = dispatch => ({
-  onWillMount: () => {
+  onDidMount: () => {
     dispatch(fetchLanguages({ page: 1, pageSize: 0 }));
   },
-  onSubmit: (label) => {
-    dispatch(createLabel(label));
-  },
+  onSubmit: values => dispatch(createLabel(values)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps, null, {
diff --git a/src/ui/labels/common/LabelsForm.js b/src/ui/labels/common/LabelsForm.js
index 556e7c7b4..331c5851f 100644
--- a/src/ui/labels/common/LabelsForm.js
+++ b/src/ui/labels/common/LabelsForm.js
@@ -1,12 +1,13 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
+import * as Yup from 'yup';
+import { Form, Field, withFormik } from 'formik';
 import { Button, Row, Col } from 'patternfly-react';
-import { required, code } from '@entando/utils';
+import { validateCodeField, formatMessageRequired } from 'helpers/formikValidations';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import FormLabel from 'ui/common/form/FormLabel';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderTextAreaInput from 'ui/common/form/RenderTextAreaInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderTextAreaInput from 'ui/common/formik-field/RenderTextAreaInput';
 
 const EDIT_MODE = 'edit';
 const NEW_MODE = 'new';
@@ -18,107 +19,90 @@ const msgs = defineMessages({
   },
 });
 
-export class LabelsFormBody extends Component {
-  componentWillMount() {
-    this.props.onWillMount(this.props.labelCode);
-  }
+const LabelsFormBody = ({
+  intl, languages, labelCode, defaultLanguage, mode,
+  onDidMount, isValid, isSubmitting: submitting, onWillUnmount,
+}) => {
+  useEffect(() => {
+    onDidMount(labelCode);
+    return () => onWillUnmount();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  onSubmit = (ev) => {
-    ev.preventDefault();
-    this.props.handleSubmit();
-  };
+  const invalid = !isValid;
 
-  renderField(defaultLanguage) {
-    return this.props.languages.map((language) => {
-      const titles = `titles.${language.code}`;
+  return (
+    <Form className="form-horizontal LabelsForm">
+      <Row>
+        <Col xs={12}>
+          <fieldset className="no-padding">
+            <div className="text-right">
+              * <FormattedMessage id="labels.default.language" />
+            </div>
+            <div>
+              <Field
+                component={RenderTextInput}
+                name="key"
+                label={<FormLabel labelId="app.code" helpId="app.help.code" required />}
+                placeholder={intl.formatMessage(msgs.codePlaceholder)}
+                disabled={mode === EDIT_MODE}
+              />
+            </div>
+          </fieldset>
+        </Col>
+      </Row>
 
-      return (
-        <div key={language.code}>
-          <Field
-            name={titles}
-            component={RenderTextAreaInput}
-            label={
-              <span>
-                <span className="label label-info">
-                  {language.code === defaultLanguage ? `${language.code} *` : language.code}
-                </span>
-                &nbsp;<FormattedMessage id="app.name" />
-              </span>
-            }
-            cols="50"
-            rows="2"
-            className="form-control"
-            validate={language.code === defaultLanguage ? [required] : []}
-          />
-        </div>
-      );
-    });
-  }
-  renderFieldKey = () => {
-    const { intl } = this.props;
-    return (
-      <div>
-        <Field
-          component={RenderTextInput}
-          name="key"
-          label={<FormLabel labelId="app.code" helpId="app.help.code" required />}
-          placeholder={intl.formatMessage(msgs.codePlaceholder)}
-          validate={[required, code]}
-          disabled={this.props.mode === EDIT_MODE}
-        />
-      </div>
-    );
-  }
-
-
-  render() {
-    return (
-      <form onSubmit={this.onSubmit} className="form-horizontal LabelsForm">
-        <Row>
-          <Col xs={12}>
-            <fieldset className="no-padding">
-              <div className="text-right">
-                * <FormattedMessage id="labels.default.language" />
-              </div>
-              {this.renderFieldKey()}
-            </fieldset>
-          </Col>
-        </Row>
-
-        <Row>
-          <Col xs={12}>
-            <fieldset className="no-padding">
-              <div className="tab-content margin-large-bottom ">
-                {this.renderField(this.props.defaultLanguage)}
-              </div>
-            </fieldset>
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col xs={12}>
-            <Button
-              className="pull-right LabelsForm__save-btn"
-              type="submit"
-              bsStyle="primary"
-              disabled={this.props.invalid || this.props.submitting}
-            >
-              <FormattedMessage id="app.save" />
-            </Button>
-          </Col>
-        </Row>
-      </form>
-    );
-  }
-}
+      <Row>
+        <Col xs={12}>
+          <fieldset className="no-padding">
+            <div className="tab-content margin-large-bottom ">
+              {languages.map(language => (
+                <div key={language.code}>
+                  <Field
+                    name={`titles.${language.code}`}
+                    component={RenderTextAreaInput}
+                    label={
+                      <span>
+                        <span className="label label-info">
+                          {language.code === defaultLanguage ? `${language.code} *` : language.code}
+                        </span>
+                        &nbsp;<FormattedMessage id="app.name" />
+                      </span>
+                    }
+                    cols={50}
+                    rows={2}
+                    className="form-control"
+                  />
+                </div>
+              ))}
+            </div>
+          </fieldset>
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Col xs={12}>
+          <Button
+            className="pull-right LabelsForm__save-btn"
+            type="submit"
+            bsStyle="primary"
+            disabled={invalid || submitting}
+          >
+            <FormattedMessage id="app.save" />
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
 
 LabelsFormBody.propTypes = {
   intl: intlShape.isRequired,
   labelCode: PropTypes.string,
-  onWillMount: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  onDidMount: PropTypes.func.isRequired,
+  onWillUnmount: PropTypes.func,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   languages: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string,
     isActive: PropTypes.bool,
@@ -130,8 +114,8 @@ LabelsFormBody.propTypes = {
 
 LabelsFormBody.defaultProps = {
   labelCode: '',
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isSubmitting: false,
   languages: PropTypes.arrayOf(PropTypes.shape({
     code: '',
     isActive: '',
@@ -139,10 +123,46 @@ LabelsFormBody.defaultProps = {
   })),
   defaultLanguage: '',
   mode: NEW_MODE,
+  onWillUnmount: () => {},
 };
 
-const LabelsForm = reduxForm({
-  form: 'label',
+const LabelsForm = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  mapPropsToErrors: ({ mode, languages }) => {
+    switch (mode) {
+      default:
+      case NEW_MODE: {
+        const titles = languages.reduce((acc, curr) => ({
+          ...acc,
+          [curr.code]: '',
+        }), {});
+        return {
+          key: '',
+          titles,
+        };
+      }
+      case EDIT_MODE:
+        return {};
+    }
+  },
+  validationSchema: ({ intl, languages }) => {
+    const key = Yup.string()
+      .required(intl.formatMessage(formatMessageRequired))
+      .test(
+        'validateCodeField',
+        validateCodeField(intl),
+      );
+    const titles = Yup.object().shape(languages.reduce((acc, curr) => ({
+      ...acc,
+      [curr.code]: Yup.string().required(intl.formatMessage(formatMessageRequired)),
+    }), {}));
+    return Yup.object().shape({ key, titles });
+  },
+  handleSubmit: (values, { setSubmitting, props: { onSubmit } }) => {
+    onSubmit(values).then(() => setSubmitting(false));
+  },
+  displayName: 'labelForm',
 })(LabelsFormBody);
 
 export default injectIntl(LabelsForm);
diff --git a/src/ui/labels/edit/EditFormContainer.js b/src/ui/labels/edit/EditFormContainer.js
index c7a579989..03798344c 100644
--- a/src/ui/labels/edit/EditFormContainer.js
+++ b/src/ui/labels/edit/EditFormContainer.js
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { updateLabel, fetchLabel } from 'state/labels/actions';
+import { updateLabel, fetchLabel, setSelectedLabel } from 'state/labels/actions';
+import { getSelectedLabel } from 'state/labels/selectors';
 import LabelsForm from 'ui/labels/common/LabelsForm';
 import { getLocale } from 'state/locale/selectors';
 import { getActiveLanguages, getDefaultLanguage } from 'state/languages/selectors';
@@ -12,16 +13,16 @@ export const mapStateToProps = (state, { match: { params } }) => ({
   languages: getActiveLanguages(state),
   defaultLanguage: getDefaultLanguage(state),
   labelCode: params.labelCode,
+  initialValues: getSelectedLabel(state),
 });
 
 export const mapDispatchToProps = dispatch => ({
-  onWillMount: (labelCode) => {
+  onDidMount: (labelCode) => {
     dispatch(fetchLanguages({ page: 1, pageSize: 0 }));
     dispatch(fetchLabel(labelCode));
   },
-  onSubmit: (label) => {
-    dispatch(updateLabel(label));
-  },
+  onWillUnmount: () => dispatch(setSelectedLabel(null)),
+  onSubmit: label => dispatch(updateLabel(label)),
 });
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, {
diff --git a/src/ui/labels/list/ActiveLangTable.js b/src/ui/labels/list/ActiveLangTable.js
index abedadeed..7947ac03b 100644
--- a/src/ui/labels/list/ActiveLangTable.js
+++ b/src/ui/labels/list/ActiveLangTable.js
@@ -14,6 +14,7 @@ const renderRows = (rows, onDeactivateLang, defaultLanguage) => rows.map(item =>
     <td className="ActiveLangTable__td">{item.name}</td>
     <td className="ActiveLangTable__td text-center">
       <Button
+        id={`ActiveLangTable-delete-${item.code}`}
         bsStyle="link"
         className="ActiveLangTable__delete-tag-btn"
         onClick={() => onDeactivateLang(item.code)}
diff --git a/src/ui/labels/list/LabelSearchForm.js b/src/ui/labels/list/LabelSearchForm.js
index 991b04988..08f2eae53 100644
--- a/src/ui/labels/list/LabelSearchForm.js
+++ b/src/ui/labels/list/LabelSearchForm.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, Field } from 'redux-form';
+import { Formik, Form, Field } from 'formik';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Row, Col, FormGroup, Button } from 'patternfly-react';
 
@@ -12,7 +12,7 @@ const msgs = defineMessages({
 });
 
 export const LabelSearchFormBody = ({
-  intl, handleSubmit, onUnmount, onMount,
+  intl, onUnmount, onMount, onSubmit, pageSize,
 }) => {
   useEffect(() => {
     onMount();
@@ -22,56 +22,65 @@ export const LabelSearchFormBody = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onSubmit = (ev) => {
-    ev.preventDefault();
-    handleSubmit();
+  const handleSubmit = (values) => {
+    onSubmit(values, pageSize);
   };
 
   return (
-    <form onSubmit={onSubmit} className="LabelSearchForm form-horizontal well">
-      <h3><FormattedMessage id="label.searchForm.title" /></h3>
-      <FormGroup>
-        <Row>
-          <label className="control-label col-xs-2" htmlFor="username">
-            <FormattedMessage id="label.searchForm.code" />
-          </label>
-          <Col xs={9}>
-            <Field
-              id="text"
-              component="input"
-              className="LabelSearchForm__text-field form-control"
-              name="key"
-              placeholder={intl.formatMessage(msgs.searchFormCode)}
-            />
-          </Col>
-        </Row>
-      </FormGroup>
-      <FormGroup>
-        <Row>
-          <Col xs={11}>
-            <Button
-              type="submit"
-              bsStyle="primary"
-              className="pull-right"
-            >
-              <FormattedMessage id="app.search" />
-            </Button>
-          </Col>
-        </Row>
-      </FormGroup>
-    </form>
+    <Formik
+      initialValues={{ key: '' }}
+      onSubmit={handleSubmit}
+    >
+      {
+        () => (
+          <Form className="LabelSearchForm form-horizontal well">
+            <h3><FormattedMessage id="label.searchForm.title" /></h3>
+            <FormGroup>
+              <Row>
+                <label className="control-label col-xs-2" htmlFor="username">
+                  <FormattedMessage id="label.searchForm.code" />
+                </label>
+                <Col xs={9}>
+                  <Field
+                    id="text"
+                    component="input"
+                    className="LabelSearchForm__text-field form-control"
+                    name="key"
+                    placeholder={intl.formatMessage(msgs.searchFormCode)}
+                  />
+                </Col>
+              </Row>
+            </FormGroup>
+            <FormGroup>
+              <Row>
+                <Col xs={11}>
+                  <Button
+                    type="submit"
+                    bsStyle="primary"
+                    className="pull-right"
+                  >
+                    <FormattedMessage id="app.search" />
+                  </Button>
+                </Col>
+              </Row>
+            </FormGroup>
+          </Form>
+        )
+      }
+    </Formik>
   );
 };
 
 LabelSearchFormBody.propTypes = {
   intl: intlShape.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  pageSize: PropTypes.number,
   onUnmount: PropTypes.func.isRequired,
   onMount: PropTypes.func.isRequired,
 };
 
-const LabelSearchForm = reduxForm({
-  form: 'labelSearch',
-})(LabelSearchFormBody);
+LabelSearchFormBody.defaultProps = {
+  pageSize: 10,
+};
 
-export default injectIntl(LabelSearchForm);
+export default injectIntl(LabelSearchFormBody);
diff --git a/src/ui/labels/list/LabelSearchFormContainer.js b/src/ui/labels/list/LabelSearchFormContainer.js
index 677c4e449..4efe33ea0 100644
--- a/src/ui/labels/list/LabelSearchFormContainer.js
+++ b/src/ui/labels/list/LabelSearchFormContainer.js
@@ -8,7 +8,7 @@ const DEFAULT_PAGE = { page: 1, pageSize: 10 };
 export const mapDispatchToProps = dispatch => ({
   onSubmit: (values) => {
     dispatch(setLabelFilters({ keyword: values.key }));
-    dispatch(fetchLabels(DEFAULT_PAGE));
+    dispatch(fetchLabels({ page: 1, pageSize: 10 }));
   },
   onUnmount: () => {
     dispatch(setLabelFilters({ keyword: '' }));
diff --git a/src/ui/labels/list/LanguageForm.js b/src/ui/labels/list/LanguageForm.js
index ee9cf9653..2b7c000e8 100644
--- a/src/ui/labels/list/LanguageForm.js
+++ b/src/ui/labels/list/LanguageForm.js
@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
+import { Field, Form, withFormik } from 'formik';
+import * as Yup from 'yup';
 import { Button, Col, FormGroup, InputGroup } from 'patternfly-react';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import FormLabel from 'ui/common/form/FormLabel';
@@ -24,60 +25,50 @@ const msgs = defineMessages({
   },
 });
 
-export class LanguageFormBody extends Component {
-  onSubmit = (ev) => {
-    ev.preventDefault();
-    this.props.handleSubmit();
-  };
-
-  render() {
-    const {
-      intl, invalid, submitting, languages,
-    } = this.props;
-
-    return (
-      <div>
-        <form onSubmit={this.onSubmit} className="LanguageForm form-horizontal">
-          <FormGroup>
-            <Col xs={12}>
-              <label className="control-label" htmlFor="language">
-                <FormattedMessage id="language.selectLanguage" />
-              </label>
-              <InputGroup>
-                <Field
-                  component="select"
-                  name="language"
-                  label={<FormLabel labelId="label.selectLabel" />}
-                  className="form-control LanguageForm__language-field"
+const LanguageFormBody = ({
+  intl, isValid, isSubmitting: submitting, languages, ...otherProps
+}) => {
+  const invalid = !isValid;
+  return (
+    <div>
+      <Form className="LanguageForm form-horizontal">
+        <FormGroup>
+          <Col xs={12}>
+            <label className="control-label" htmlFor="language">
+              <FormattedMessage id="language.selectLanguage" />
+            </label>
+            <InputGroup>
+              <Field
+                as="select"
+                name="language"
+                label={<FormLabel labelId="label.selectLabel" />}
+                className="form-control LanguageForm__language-field"
+              >
+                <option>{intl.formatMessage(msgs.selectChoose)}</option>
+                {renderSelectOptions(languages)}
+              </Field>
+              <span className="input-group-btn">
+                <Button
+                  bsStyle="primary"
+                  type="submit"
+                  disabled={invalid || submitting}
                 >
-                  <option>{intl.formatMessage(msgs.selectChoose)}</option>
-                  {renderSelectOptions(languages)}
-                </Field>
-                <span className="input-group-btn">
-                  <Button
-                    bsStyle="primary"
-                    type="submit"
-                    disabled={invalid || submitting}
-                  >
-                    <FormattedMessage id="app.add" />
-                  </Button>
-                </span>
-              </InputGroup>
-            </Col>
-          </FormGroup>
-        </form>
-        <ActiveLangTable {...this.props} />
-      </div>
-    );
-  }
-}
-
+                  <FormattedMessage id="app.add" />
+                </Button>
+              </span>
+            </InputGroup>
+          </Col>
+        </FormGroup>
+      </Form>
+      <ActiveLangTable {...otherProps} />
+    </div>
+  );
+};
 
 LanguageFormBody.propTypes = {
   intl: intlShape.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   languages: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.string,
@@ -85,13 +76,23 @@ LanguageFormBody.propTypes = {
 };
 
 LanguageFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isSubmitting: false,
   languages: [],
 };
 
-const LanguageForm = reduxForm({
-  form: 'language',
+const LanguageForm = withFormik({
+  mapPropsToValues: () => ({ language: '' }),
+  validationSchema: Yup.object().shape({
+    language: Yup.string(),
+  }),
+  handleSubmit: (values, { setSubmitting, resetForm, props: { onSubmit } }) => {
+    onSubmit(values).then(() => {
+      setSubmitting(false);
+      resetForm();
+    });
+  },
+  displayName: 'languageForm',
 })(LanguageFormBody);
 
 export default injectIntl(LanguageForm);
diff --git a/src/ui/pages/add/PagesAddFormContainer.js b/src/ui/pages/add/PagesAddFormContainer.js
index 44e23202b..8c3843cc9 100644
--- a/src/ui/pages/add/PagesAddFormContainer.js
+++ b/src/ui/pages/add/PagesAddFormContainer.js
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { formValueSelector, change, initialize } from 'redux-form';
 import { routeConverter } from '@entando/utils';
 
 import { ACTION_SAVE, ACTION_SAVE_AND_CONFIGURE, SEO_ENABLED } from 'state/pages/const';
@@ -79,7 +78,6 @@ export const mapStateToProps = (state) => {
   const joinGroups = userPreferences.defaultPageJoinGroups;
   const appTourProgress = getAppTourProgress(state);
   const mainTitleLangCode = (languages[0] || {}).code || 'en';
-  const mainTitleName = `titles.${mainTitleLangCode}`;
   const appTourLastPageData = getTourCreatedPage(state);
   const parentCode = getSearchParam('parentCode');
   const existingPages = (getExistingPages(state) || []).map(page =>
@@ -87,6 +85,12 @@ export const mapStateToProps = (state) => {
   const pageName = getNextPageName({ pages: existingPages, pattern: 'Hello World App', separator: ' ' });
   const pageCode = getNextPageCode({ pages: existingPages, pattern: 'hello_world_app', separator: '_' });
 
+  // generate empty titles for all languages
+  const emptyTitles = languages.reduce((acc, curr) => ({
+    ...acc,
+    [curr.code]: '',
+  }), {});
+
   return {
     languages,
     groups,
@@ -106,6 +110,7 @@ export const mapStateToProps = (state) => {
       ...(parentCode ? { parentCode } : {}),
       ...(appTourProgress === APP_TOUR_STARTED && {
         titles: {
+          ...emptyTitles,
           [mainTitleLangCode]: pageName,
         },
         code: pageCode,
@@ -114,18 +119,15 @@ export const mapStateToProps = (state) => {
         pageModel: '1-column',
         ...appTourLastPageData,
       }),
+      ...(appTourProgress !== APP_TOUR_STARTED && {
+        titles: emptyTitles,
+      }),
     },
     mode: 'add',
     locale: getLocale(state),
     parentCode,
     parentTitle: getSelectedPageLocaleTitle(state),
     appTourProgress,
-    mainTitleValue: formValueSelector('page')(state, mainTitleName),
-    codeValue: formValueSelector('page')(state, 'code'),
-    ownerGroupValue: formValueSelector('page')(state, 'ownerGroup'),
-    parentCodeValue: formValueSelector('page')(state, 'parentCode'),
-    pageModelValue: formValueSelector('page')(state, 'pageModel'),
-    titles: formValueSelector('page')(state, 'titles'),
     appTourLastPageData,
   };
 };
@@ -139,24 +141,6 @@ export const mapDispatchToProps = dispatch => ({
     dispatch(fetchAllGroupEntries({ page: 1, pageSize: 0 }));
     dispatch(fetchMyGroups({ sort: 'name' }));
   },
-  onInitPageForm: (data) => {
-    const {
-      appTourProgress, codeValue, languages, appTourLastPageData,
-    } = data;
-    const mainTitleLangCode = (languages[0] || {}).code || 'en';
-    if (appTourProgress === APP_TOUR_STARTED && !codeValue) {
-      dispatch(initialize('page', {
-        titles: {
-          [mainTitleLangCode]: 'Hello World App',
-        },
-        code: 'hello_world_app',
-        ownerGroup: 'free',
-        parentCode: APP_TOUR_HOMEPAGE_CODEREF,
-        pageModel: '1-column',
-        ...appTourLastPageData,
-      }));
-    }
-  },
   onSubmit: (data, action) =>
     dispatch(sendPostPage(data)).then((res) => {
       if (res) {
@@ -185,8 +169,6 @@ export const mapDispatchToProps = dispatch => ({
         }
       }
     }),
-  onChangeDefaultTitle: title =>
-    dispatch(change('page', 'code', title.replace(/\W/g, '_').toLowerCase())),
   onFindTemplateClick: () => dispatch(setVisibleModal('FindTemplateModal')),
   onChangePageTemplate: (newValue, appTourProgress) => {
     if (appTourProgress === APP_TOUR_STARTED && newValue) {
diff --git a/src/ui/pages/add/PagesAddPage.js b/src/ui/pages/add/PagesAddPage.js
index e0c792fc5..17bbb7cef 100644
--- a/src/ui/pages/add/PagesAddPage.js
+++ b/src/ui/pages/add/PagesAddPage.js
@@ -13,6 +13,11 @@ import { ROUTE_PAGE_TREE } from 'app-init/router';
 
 
 class PagesAddPage extends Component {
+  constructor(props) {
+    super(props);
+    this.addPageFormRef = React.createRef();
+  }
+
   componentWillMount() {
     if (this.props.onWillMount) this.props.onWillMount(this.props);
   }
@@ -48,10 +53,10 @@ class PagesAddPage extends Component {
           </Row>
           <Row>
             <Col xs={12}>
-              <PagesAddFormContainer />
+              <PagesAddFormContainer innerRef={this.addPageFormRef} />
             </Col>
           </Row>
-          <AppTourContainer />
+          <AppTourContainer innerRef={this.addPageFormRef} />
         </Grid>
       </InternalPage>
     );
diff --git a/src/ui/pages/clone/CloneFormContainer.js b/src/ui/pages/clone/CloneFormContainer.js
index fa6ef9268..2e42359f3 100644
--- a/src/ui/pages/clone/CloneFormContainer.js
+++ b/src/ui/pages/clone/CloneFormContainer.js
@@ -1,27 +1,16 @@
 import { connect } from 'react-redux';
-import { formValueSelector, change } from 'redux-form';
 import { routeConverter } from '@entando/utils';
 
 import { ACTION_SAVE, ACTION_SAVE_AND_CONFIGURE } from 'state/pages/const';
 import PageForm from 'ui/pages/common/PageForm';
 import { fetchLanguages } from 'state/languages/actions';
 import { getActiveLanguages } from 'state/languages/selectors';
-import { getGroupsList } from 'state/groups/selectors';
-import { getPageTemplatesList } from 'state/page-templates/selectors';
-import { getCharsets, getContentTypes } from 'state/pages/selectors';
 import { sendClonePage } from 'state/pages/actions';
 import { history, ROUTE_PAGE_TREE, ROUTE_PAGE_CONFIG } from 'app-init/router';
-import { setVisibleModal } from 'state/modal/actions';
 import getSearchParam from 'helpers/getSearchParam';
 
 export const mapStateToProps = state => ({
   languages: getActiveLanguages(state),
-  groups: getGroupsList(state),
-  pageTemplates: getPageTemplatesList(state),
-  charsets: getCharsets(state),
-  contentTypes: getContentTypes(state),
-  selectedJoinGroups: formValueSelector('page')(state, 'joinGroups') || [],
-  titles: formValueSelector('page')(state, 'titles'),
   mode: 'clone',
   keepDirtyOnReinitialize: true,
 });
@@ -55,9 +44,6 @@ export const mapDispatchToProps = dispatch => ({
       }
     });
   },
-  onChangeDefaultTitle: title =>
-    dispatch(change('page', 'code', title.replace(/\W/g, '_').toLowerCase())),
-  onFindTemplateClick: () => dispatch(setVisibleModal('FindTemplateModal')),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps, null, {
diff --git a/src/ui/pages/common/FindTemplateModal.js b/src/ui/pages/common/FindTemplateModal.js
index 45165628b..816c67ea6 100644
--- a/src/ui/pages/common/FindTemplateModal.js
+++ b/src/ui/pages/common/FindTemplateModal.js
@@ -10,7 +10,7 @@ import { TEMPLATE_THUMBNAIL } from 'ui/pages/common/const';
 export const MODAL_ID = 'FindTemplateModal';
 
 const FindTemplateModal = ({
-  onSelectClick, pageTemplates, isEditMode, loading,
+  onSelectClick, pageTemplates, loading,
 }) => {
   const [searchValue, setSearchValue] = useState('');
 
@@ -31,7 +31,7 @@ const FindTemplateModal = ({
   };
 
   const handleSave = () => {
-    onSelectClick(selected, isEditMode);
+    onSelectClick(selected);
     handleModalClose();
   };
 
@@ -117,13 +117,11 @@ FindTemplateModal.propTypes = {
     code: PropTypes.string.isRequired,
   })),
   onSelectClick: PropTypes.func.isRequired,
-  isEditMode: PropTypes.bool,
 };
 
 FindTemplateModal.defaultProps = {
   loading: false,
   pageTemplates: [],
-  isEditMode: false,
 };
 
 export default FindTemplateModal;
diff --git a/src/ui/pages/common/FindTemplateModalContainer.js b/src/ui/pages/common/FindTemplateModalContainer.js
index 1db6c08c6..2c693acaf 100644
--- a/src/ui/pages/common/FindTemplateModalContainer.js
+++ b/src/ui/pages/common/FindTemplateModalContainer.js
@@ -4,7 +4,6 @@ import { getPageTemplatesList } from 'state/page-templates/selectors';
 import { getLoading } from 'state/loading/selectors';
 import { getCurrentPage, getTotalItems, getPageSize } from 'state/pagination/selectors';
 import { setVisibleModal } from 'state/modal/actions';
-import { change } from 'redux-form';
 
 export const mapStateToProps = state => ({
   pageTemplates: getPageTemplatesList(state),
@@ -14,9 +13,9 @@ export const mapStateToProps = state => ({
   loading: getLoading(state).pageTemplates,
 });
 
-export const mapDispatchToProps = dispatch => ({
-  onSelectClick: (value, isEditMode) => {
-    dispatch(change(isEditMode ? 'pageEdit' : 'page', 'pageModel', value));
+export const mapDispatchToProps = (dispatch, { setFieldValue }) => ({
+  onSelectClick: (value) => {
+    setFieldValue('pageModel', value);
     dispatch(setVisibleModal(''));
   },
 });
diff --git a/src/ui/pages/common/PageForm.js b/src/ui/pages/common/PageForm.js
index aae615913..c9d44e40b 100644
--- a/src/ui/pages/common/PageForm.js
+++ b/src/ui/pages/common/PageForm.js
@@ -1,27 +1,24 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
+import { withFormik, Form, Field } from 'formik';
 import { Row, Col, FormGroup } from 'patternfly-react';
 import { Button } from 'react-bootstrap';
-import { required, maxLength } from '@entando/utils';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { isUndefined } from 'lodash';
+import * as Yup from 'yup';
 
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
-import RenderDropdownTypeaheadInput from 'ui/common/form/RenderDropdownTypeaheadInput';
+import RenderDropdownTypeaheadInput from 'ui/common/formik-field/RenderDropdownTypeaheadInput';
 import PageTreeSelectorContainer from 'ui/pages/common/PageTreeSelectorContainer';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import SwitchRenderer from 'ui/common/formik-field/SwitchInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 import { ACTION_SAVE, ACTION_SAVE_AND_CONFIGURE } from 'state/pages/const';
 import SeoInfo from 'ui/pages/common/SeoInfo';
 import FindTemplateModalContainer from 'ui/pages/common/FindTemplateModalContainer';
 import { APP_TOUR_STARTED } from 'state/app-tour/const';
-import { codeWithDash } from 'helpers/attrValidation';
-
-const maxLength30 = maxLength(30);
-const maxLength70 = maxLength(70);
+import { validateCodeField } from 'helpers/formikValidations';
 
 const getDefaultLanguage = (languages) => {
   const defaultLang = { code: 'en' };
@@ -63,14 +60,15 @@ export class PageFormBody extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { myGroups: prevMyGroups, pageOwnerGroup: prevPageOwnerGroup } = prevProps;
+    const { myGroups: prevMyGroups, values: prevValues } = prevProps;
     const {
-      enableGroupAccessControl, myGroups, redirectToForbidden, pageOwnerGroup,
+      enableGroupAccessControl, myGroups, redirectToForbidden, values,
     } = this.props;
 
     if (enableGroupAccessControl) {
-      if (myGroups != null && pageOwnerGroup && (prevMyGroups == null || !prevPageOwnerGroup)) {
-        const redirectDueToLackOfGroupAccess = !myGroups.includes(pageOwnerGroup);
+      if (myGroups != null && (values || {}).ownerGroup &&
+      (prevMyGroups == null || !(prevValues || {}).ownerGroup)) {
+        const redirectDueToLackOfGroupAccess = !myGroups.includes((values || {}).ownerGroup);
         if (redirectDueToLackOfGroupAccess) {
           redirectToForbidden();
         }
@@ -80,17 +78,20 @@ export class PageFormBody extends Component {
 
   render() {
     const {
-      intl, handleSubmit, invalid, submitting, groups, allGroups, pageTemplates,
-      contentTypes, charsets, mode, onChangeDefaultTitle, parentCode, parentTitle, languages,
+      intl, isValid, isSubmitting, groups, allGroups, pageTemplates,
+      contentTypes, charsets, mode, parentCode, parentTitle, languages,
       pageCode, seoMode, onFindTemplateClick, appTourProgress, onChangePageTemplate,
-      onChangeOwnerGroup, readOnly, stayOnSave, form, titles,
+      onChangeOwnerGroup, readOnly, stayOnSave, values: formikValues,
+      setFieldValue, handleSubmit, innerRef,
     } = this.props;
+    const { titles } = formikValues || {};
     let { pages } = this.props;
     if (pages && pages.length > 0) {
       pages = pages.filter(p => p.code !== pageCode);
     }
     const isEditMode = mode === 'edit';
     const isCloneMode = mode === 'clone';
+    const isAddMode = mode === 'add';
 
     const defaultLang = languages.find(lang => lang.isDefault) || { code: '' };
     const isDefaultTitleEmpty = !titles || !titles[defaultLang.code] ||
@@ -110,12 +111,20 @@ export class PageFormBody extends Component {
             name="parentCode"
             pages={pages}
             onPageSelect={pageTemplateDisabled ? () => {} : null}
-            validate={[required]}
-            disabled={readOnly}
           />
         </div>
       );
 
+    const validateTitle = (val) => {
+      if (!val || val.length === 0) {
+        return <FormattedMessage id="validateForm.required" />;
+      }
+      if (val.length > 70) {
+        return <FormattedMessage id="validateForm.maxLength" values={{ max: 70 }} />;
+      }
+      return null;
+    };
+
     const renderActiveLanguageTitles = () => {
       if (!isUndefined(languages)) {
         return languages
@@ -132,10 +141,10 @@ export class PageFormBody extends Component {
                 tourClass="app-tour-step-6"
                 label={<FormLabel langLabelText={lang.code} labelId="app.title" required />}
                 placeholder={intl.formatMessage(msgTitle.langCode)}
-                validate={[required, maxLength70]}
+                validate={validateTitle}
                 onChange={(ev) => {
-                  if (onChangeDefaultTitle && lang.isDefault) {
-                    onChangeDefaultTitle(ev.currentTarget.value);
+                  if (lang.isDefault && (isAddMode || isCloneMode)) {
+                    setFieldValue('code', ev.currentTarget.value && ev.currentTarget.value.replace(/\W/g, '_').toLowerCase());
                   }
                 }}
                 disabled={readOnly}
@@ -173,7 +182,6 @@ export class PageFormBody extends Component {
                 onChange={optionSelected => (
                   onChangeOwnerGroup(optionSelected.code, appTourProgress)
                 )}
-                validate={[required]}
               />
               <Field
                 component={RenderDropdownTypeaheadInput}
@@ -202,7 +210,6 @@ export class PageFormBody extends Component {
                     name="pageModel"
                     className="form-control"
                     tourClass="app-tour-step-10"
-                    validate={[required]}
                     label={
                       <FormLabel
                         labelId="pages.pageForm.pageTemplate"
@@ -228,7 +235,7 @@ export class PageFormBody extends Component {
                   </Button>
                 </Col>
               </Row>
-              <FindTemplateModalContainer isEditMode={isEditMode} />
+              <FindTemplateModalContainer setFieldValue={setFieldValue} isEditMode={isEditMode} />
               <FormGroup>
                 <label htmlFor="displayedInMenu" className="col-xs-2 control-label">
                   <FormLabel
@@ -270,7 +277,6 @@ export class PageFormBody extends Component {
                     name="charset"
                     className="PageForm__charsets-select form-control"
                     size="3"
-                    validate={[required]}
                     disabled={readOnly}
                   >
                     {charsets.map(type => (
@@ -296,7 +302,6 @@ export class PageFormBody extends Component {
                     name="contentType"
                     className="PageForm__content-types-select form-control"
                     size="5"
-                    validate={[required]}
                     disabled={readOnly}
                   >
                     {contentTypes.map(type => (
@@ -317,16 +322,13 @@ export class PageFormBody extends Component {
       );
     };
 
-    const onSaveClick = (values, action) => {
-      const data = {
-        ...values,
-        titles: complementTitlesForActiveLanguages(values.titles, languages),
-      };
-      return this.props.onSubmit(data, action);
+    const onSaveClick = (action) => {
+      setFieldValue('saveAction', action);
+      handleSubmit();
     };
 
     return (
-      <form className="PageForm form-horizontal">
+      <Form ref={innerRef} className="PageForm form-horizontal">
         <Row>
           <Col xs={12}>
             <FormSectionTitle titleId="pages.pageForm.info" />
@@ -337,10 +339,10 @@ export class PageFormBody extends Component {
 
             {seoMode ? (
               <SeoInfo
-                formId={form}
                 languages={languages}
-                onChangeDefaultTitle={onChangeDefaultTitle}
                 readOnly={readOnly}
+                isAddMode={isAddMode}
+                isCloneMode={isCloneMode}
               />
             ) : (
               renderActiveLanguageTitles()
@@ -353,7 +355,6 @@ export class PageFormBody extends Component {
               tourClass="app-tour-step-7"
               label={<FormLabel labelId="app.code" helpId="pages.pageForm.codeHelp" required />}
               placeholder={intl.formatMessage(msgs.appCode)}
-              validate={[required, codeWithDash, maxLength30]}
               disabled={isEditMode}
             />
 
@@ -392,32 +393,27 @@ export class PageFormBody extends Component {
           </Fragment>
         )}
 
-        {(!readOnly && !stayOnSave) && (
+        {(!readOnly && !stayOnSave) ? (
           <Row>
             <Col xs={12}>
               <div className="btn-toolbar pull-right">
                 <Button
                   className="PageForm__save-and-configure-btn app-tour-step-11"
-                  type="submit"
                   bsStyle="success"
-                  disabled={invalid || submitting || isDefaultTitleEmpty}
-                  onClick={handleSubmit(values =>
-                    onSaveClick(
-                      { ...values, appTourProgress },
-                      ACTION_SAVE_AND_CONFIGURE,
-                    ))}
+                  disabled={!isValid || isSubmitting || isDefaultTitleEmpty}
+                  onClick={() =>
+                    onSaveClick(ACTION_SAVE_AND_CONFIGURE)}
                 >
                   <FormattedMessage id="pages.pageForm.saveAndConfigure" />
 
                 </Button>
                 <Button
                   className="PageForm__save-btn"
-                  type="submit"
                   data-testid="save-page"
                   bsStyle="primary"
-                  disabled={invalid || submitting || isDefaultTitleEmpty}
-                  onClick={handleSubmit(values =>
-                    onSaveClick(values, ACTION_SAVE))}
+                  disabled={!isValid || isSubmitting || isDefaultTitleEmpty}
+                  onClick={() =>
+                    onSaveClick(ACTION_SAVE)}
                 >
                   <FormattedMessage id="app.save" />
 
@@ -425,21 +421,19 @@ export class PageFormBody extends Component {
               </div>
             </Col>
           </Row>
-        )}
-      </form>
+        ) : null}
+      </Form>
     );
   }
 }
 
 PageFormBody.propTypes = {
   intl: intlShape.isRequired,
-  form: PropTypes.string.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
-  charsets: PropTypes.arrayOf(PropTypes.string).isRequired,
-  contentTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
+  charsets: PropTypes.arrayOf(PropTypes.string),
+  contentTypes: PropTypes.arrayOf(PropTypes.string),
   languages: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
@@ -448,18 +442,17 @@ PageFormBody.propTypes = {
   groups: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-  })).isRequired,
+  })),
   allGroups: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-  })).isRequired,
+  })),
   pageTemplates: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     descr: PropTypes.string.isRequired,
-  })).isRequired,
+  })),
   mode: PropTypes.string,
   onWillMount: PropTypes.func,
-  onChangeDefaultTitle: PropTypes.func,
   onFindTemplateClick: PropTypes.func,
   parentCode: PropTypes.string,
   parentTitle: PropTypes.string,
@@ -474,16 +467,17 @@ PageFormBody.propTypes = {
   enableGroupAccessControl: PropTypes.bool,
   myGroups: PropTypes.arrayOf(PropTypes.string),
   redirectToForbidden: PropTypes.func,
-  pageOwnerGroup: PropTypes.string,
-  titles: PropTypes.shape({}),
+  initialValues: PropTypes.shape({}),
+  values: PropTypes.shape({}),
+  setFieldValue: PropTypes.func.isRequired,
+  innerRef: PropTypes.shape({ current: PropTypes.instanceOf(Object) }),
 };
 
 PageFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
+  isValid: true,
+  isSubmitting: false,
   mode: 'add',
   onWillMount: null,
-  onChangeDefaultTitle: null,
   onFindTemplateClick: null,
   parentCode: null,
   parentTitle: null,
@@ -498,13 +492,72 @@ PageFormBody.defaultProps = {
   enableGroupAccessControl: false,
   myGroups: null,
   redirectToForbidden: () => {},
-  pageOwnerGroup: '',
-  titles: {},
+  initialValues: {},
+  values: {},
+  pageTemplates: [],
+  charsets: [],
+  contentTypes: [],
+  groups: [],
+  allGroups: [],
+  innerRef: null,
 };
 
-const PageForm = reduxForm({
-  form: 'page',
+
+const PageForm = withFormik({
   enableReinitialize: true,
+  mapPropsToValues: ({ initialValues, mode }) => ({ ...initialValues, mode, code: (initialValues && initialValues.code) || '' }),
+  validationSchema: ({ intl }) => (
+    Yup.object().shape({
+      code: Yup.string()
+        .required(<FormattedMessage id="validateForm.required" />)
+        .max(30, <FormattedMessage id="validateForm.maxLength" values={{ max: 30 }} />)
+        .test('validateCodeField', validateCodeField(intl)),
+      parentCode: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      ownerGroup: Yup.string().when('mode', {
+        is: mode => mode === 'add' || mode === 'edit',
+        then: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      }),
+      pageModel: Yup.string().when('mode', {
+        is: mode => mode === 'add' || mode === 'edit',
+        then: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      }),
+      charset: Yup.string().when('mode', {
+        is: mode => mode === 'add' || mode === 'edit',
+        then: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      }),
+      contentType: Yup.string().when('mode', {
+        is: mode => mode === 'add' || mode === 'edit',
+        then: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      }),
+    })),
+  handleSubmit: (
+    values,
+    formikBag,
+  ) => {
+    const {
+      props: {
+        onSubmit, languages, stayOnSave, onSaveSuccess, appTourProgress,
+      },
+      setSubmitting,
+    } = formikBag;
+    setSubmitting(true);
+    const newValues = {
+      ...values,
+      titles: complementTitlesForActiveLanguages(values.titles, languages),
+      saveAction: undefined,
+      mode: undefined,
+      appTourProgress,
+    };
+    onSubmit(newValues, values.saveAction).catch(() => setSubmitting(false)).then(() => {
+      if (stayOnSave) {
+        setSubmitting(false);
+        if (onSaveSuccess) {
+          onSaveSuccess(newValues);
+        }
+      }
+    });
+  },
+  displayName: 'pageForm',
 })(PageFormBody);
 
 export default injectIntl(PageForm);
diff --git a/src/ui/pages/common/PageTreeSelectorContainer.js b/src/ui/pages/common/PageTreeSelectorContainer.js
index 7062b2626..f4c28c113 100644
--- a/src/ui/pages/common/PageTreeSelectorContainer.js
+++ b/src/ui/pages/common/PageTreeSelectorContainer.js
@@ -8,11 +8,31 @@ import { handleExpandPage, fetchPageTreeAll, collapseAll } from 'state/pages/act
 import { getPageTreePages } from 'state/pages/selectors';
 import { getLoading } from 'state/loading/selectors';
 
-export const mapStateToProps = (state, { pages, onPageSelect = null }) => ({
-  pages: pages || getPageTreePages(state),
-  loading: getLoading(state).pageTree,
-  onPageSelect,
-});
+export const mapStateToProps = (state, {
+  pages, onPageSelect = null, input, field,
+}) => {
+  const onChange = (input || {}).onChange ? input.onChange : (val) => {
+    (field || {}).onChange({
+      target: {
+        value: val,
+        id: field.name,
+        name: field.name,
+      },
+    });
+  };
+  return ({
+    pages: pages || getPageTreePages(state),
+    loading: getLoading(state).pageTree,
+    onPageSelect,
+    // support both redux-form and formik
+    input: {
+      ...(input || {}),
+      ...(field || {}),
+      value: (input || {}).value || (field || {}).value || '',
+      onChange,
+    },
+  });
+};
 
 export const mapDispatchToProps = dispatch => ({
   onExpandPage: pageCode =>
diff --git a/src/ui/pages/common/SeoInfo.js b/src/ui/pages/common/SeoInfo.js
index 530e56c95..1b9f23da8 100644
--- a/src/ui/pages/common/SeoInfo.js
+++ b/src/ui/pages/common/SeoInfo.js
@@ -1,21 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tabs, Tab, Col, ControlLabel } from 'patternfly-react';
-import { Field, FieldArray, FormSection } from 'redux-form';
-import { required, maxLength } from '@entando/utils';
+import { Field, FieldArray, useFormikContext } from 'formik';
 import { FormattedMessage } from 'react-intl';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import FormLabel from 'ui/common/form/FormLabel';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import SwitchRenderer from 'ui/common/formik-field/SwitchInput';
+import SeoInfoMetadata from 'ui/pages/common/SeoInfoMetadata';
 
-import SeoInfoMetadataContainer from 'ui/pages/common/SeoInfoMetadataContainer';
-import { friendlyCodeWithDash } from 'helpers/attrValidation';
-
-const maxLength70 = maxLength(70);
-const maxLength100 = maxLength(100);
-
-// const friendlyCodeValidation = value => (value && !/^[0-9a-z_]+$/g.test(value) ?
-//   <FormattedMessage id="validateForm.friendlyCode" /> : undefined);
+const friendlyCodeValidation = value => (value && !/^[0-9a-z_]+$/g.test(value) ?
+  <FormattedMessage id="validateForm.friendlyCode" /> : undefined);
 
 const uniqueFriendlyCodeValidation = (value, allValues) => {
   const friendlyCodes = Object.values((allValues.seoData || {}).seoDataByLang || {})
@@ -27,12 +21,14 @@ const uniqueFriendlyCodeValidation = (value, allValues) => {
 
 const SeoInfo = ({
   languages,
-  onChangeDefaultTitle,
   readOnly,
-  formId,
+  isAddMode,
+  isCloneMode,
 }) => {
   const [touchedTabs, setTouchedTabs] = React.useState([]);
 
+  const formik = useFormikContext();
+
   const defaultLang = React.useMemo(
     () => languages.find(lang => lang.isDefault) || {}
     , [languages],
@@ -44,12 +40,32 @@ const SeoInfo = ({
     }
   };
 
-  const createRequiredArray = React.useCallback((key) => {
+  const validateTitle = (key, val) => {
     if (touchedTabs.includes(key) || defaultLang.code === key) {
-      return [required, maxLength70];
+      if (!val || val.length === 0) {
+        return <FormattedMessage id="validateForm.required" />;
+      }
+      if (val.length > 70) {
+        return <FormattedMessage id="validateForm.maxLength" values={{ max: 70 }} />;
+      }
     }
-    return [];
-  }, [defaultLang.code, touchedTabs]);
+    return null;
+  };
+
+  const validateFriendlyCode = (val) => {
+    let error = null;
+    if (val && val.length > 100) {
+      error = <FormattedMessage id="validateForm.maxLength" values={{ max: 100 }} />;
+      return error;
+    }
+    if (val && val.length > 0) {
+      error = friendlyCodeValidation(val);
+      if (error) return error;
+      error = uniqueFriendlyCodeValidation(val, formik.values);
+      if (error) return error;
+    }
+    return null;
+  };
 
   return (languages && languages.length ? (
     <Tabs mountOnEnter unmountOnExit id="basic-tabs" defaultActiveKey={defaultLang ? defaultLang.code : undefined} className="SeoInfo" onSelect={handleSelect}>
@@ -65,108 +81,111 @@ const SeoInfo = ({
                   data-testid={`titles.${lang.code}`}
                   tourClass="app-tour-step-6"
                   label={<FormLabel helpId="app.pages.titleHelp" labelId="app.pages.title" required />}
-                  validate={createRequiredArray(lang.code)}
+                  validate={val => validateTitle(lang.code, val)}
                   inputSize={9}
                   onChange={(ev) => {
-                    if (onChangeDefaultTitle && lang.isDefault) {
-                      onChangeDefaultTitle(ev.currentTarget.value);
+                    if (lang.isDefault && (isAddMode || isCloneMode)) {
+                      formik.setFieldValue('code', ev.currentTarget.value && ev.currentTarget.value.replace(/\W/g, '_').toLowerCase());
                     }
                   }}
                   disabled={readOnly}
                 />
-                <FormSection name={`seoData.seoDataByLang.${lang.code}`}>
-                  <div className="form-group SeoInfo__metadata--itemgroup">
-                    <Col sm={2}>
-                      <div className="text-right SeoInfo__metadata--itemgroup">
-                        <ControlLabel htmlFor={`seoData.seoDataByLang.${lang.code}.description`}>
-                          <FormLabel helpId="app.seo.descriptionHelp" labelId="app.seo.description" />
-                        </ControlLabel>
-                      </div>
-                    </Col>
-                    <Col sm={lang.isDefault ? 9 : 6}>
-                      <Field
-                        key={`seoData.seoDataByLang.${lang.code}.description`}
-                        component={RenderTextInput}
-                        name="description"
-                        inputSize={12}
-                        labelSize={0}
-                        disabled={readOnly}
-                      />
-                    </Col>
-                    {!lang.isDefault && (
-                      <Col sm={3} className="text-right">
-                        <Field
-                          component={SwitchRenderer}
-                          name="inheritDescriptionFromDefaultLang"
-                          label={<FormLabel labelId="app.seo.inheritLangLabel" />}
-                          labelSize={7}
-                          disabled={readOnly}
-                        />
-                      </Col>
+                <div className="form-group SeoInfo__metadata--itemgroup">
+                  <Col sm={2}>
+                    <div className="text-right SeoInfo__metadata--itemgroup">
+                      <ControlLabel htmlFor={`seoData.seoDataByLang.${lang.code}.description`}>
+                        <FormLabel helpId="app.seo.descriptionHelp" labelId="app.seo.description" />
+                      </ControlLabel>
+                    </div>
+                  </Col>
+                  <Col sm={lang.isDefault ? 9 : 6}>
+                    <Field
+                      key={`seoData.seoDataByLang.${lang.code}.description`}
+                      component={RenderTextInput}
+                      name={`seoData.seoDataByLang.${lang.code}.description`}
+                      inputSize={12}
+                      labelSize={0}
+                      disabled={readOnly}
+                    />
+                  </Col>
+                  {!lang.isDefault && (
+                  <Col sm={3} className="text-right">
+                    <Field
+                      component={SwitchRenderer}
+                      name={`seoData.seoDataByLang.${lang.code}.inheritDescriptionFromDefaultLang`}
+                      label={<FormLabel labelId="app.seo.inheritLangLabel" />}
+                      labelSize={7}
+                      disabled={readOnly}
+                    />
+                  </Col>
                     )}
-                  </div>
+                </div>
 
-                  <div className="form-group SeoInfo__metadata--itemgroup">
-                    <Col sm={2}>
-                      <div className="text-right SeoInfo__metadata--itemgroup">
-                        <ControlLabel htmlFor={`seoData.seoDataByLang.${lang.code}.keywords`}>
-                          <FormLabel helpId="app.seo.keywordsHelp" labelId="app.seo.keywords" />
-                        </ControlLabel>
-                      </div>
-                    </Col>
-                    <Col sm={lang.isDefault ? 9 : 6}>
-                      <Field
-                        key={`seoData.seoDataByLang.${lang.code}.keywords`}
-                        component={RenderTextInput}
-                        name="keywords"
-                        inputSize={12}
-                        labelSize={0}
-                        disabled={readOnly}
-                      />
-                    </Col>
-                    {!lang.isDefault && (
-                      <Col sm={3} className="text-right">
-                        <Field
-                          component={SwitchRenderer}
-                          name="inheritKeywordsFromDefaultLang"
-                          label={<FormLabel labelId="app.seo.inheritLangLabel" />}
-                          labelSize={7}
-                          disabled={readOnly}
-                        />
-                      </Col>
+                <div className="form-group SeoInfo__metadata--itemgroup">
+                  <Col sm={2}>
+                    <div className="text-right SeoInfo__metadata--itemgroup">
+                      <ControlLabel htmlFor={`seoData.seoDataByLang.${lang.code}.keywords`}>
+                        <FormLabel helpId="app.seo.keywordsHelp" labelId="app.seo.keywords" />
+                      </ControlLabel>
+                    </div>
+                  </Col>
+                  <Col sm={lang.isDefault ? 9 : 6}>
+                    <Field
+                      key={`seoData.seoDataByLang.${lang.code}.keywords`}
+                      component={RenderTextInput}
+                      name={`seoData.seoDataByLang.${lang.code}.keywords`}
+                      inputSize={12}
+                      labelSize={0}
+                      disabled={readOnly}
+                    />
+                  </Col>
+                  {!lang.isDefault && (
+                  <Col sm={3} className="text-right">
+                    <Field
+                      component={SwitchRenderer}
+                      name={`seoData.seoDataByLang.${lang.code}.inheritKeywordsFromDefaultLang`}
+                      label={<FormLabel labelId="app.seo.inheritLangLabel" />}
+                      labelSize={7}
+                      disabled={readOnly}
+                    />
+                  </Col>
                     )}
-                  </div>
+                </div>
 
-                  <div className="form-group SeoInfo__metadata--itemgroup">
-                    <Col sm={2}>
-                      <div className="text-right SeoInfo__metadata--itemgroup">
-                        <ControlLabel htmlFor={`seoData.seoDataByLang.${lang.code}.keywords`}>
-                          <FormLabel helpId="app.pages.friendlyCodeHelp" labelId="pages.pageForm.seoFriendlyCode" />
-                        </ControlLabel>
-                      </div>
-                    </Col>
-                    <Col sm={lang.isDefault ? 9 : 6}>
-                      <Field
-                        component={RenderTextInput}
-                        key={`seoData.seoDataByLang.${lang.code}.friendlyCode`}
-                        name="friendlyCode"
-                        disabled={readOnly}
-                        inputSize={12}
-                        validate={[friendlyCodeWithDash,
-                          maxLength100, uniqueFriendlyCodeValidation]}
-                        labelSize={0}
-                      />
-                    </Col>
-                  </div>
-                  <FieldArray
-                    component={SeoInfoMetadataContainer}
-                    name="metaTags"
-                    formId={formId}
-                    langIdx={i}
-                    languages={languages}
-                    readOnly={readOnly}
-                  />
-                </FormSection>
+                <div className="form-group SeoInfo__metadata--itemgroup">
+                  <Col sm={2}>
+                    <div className="text-right SeoInfo__metadata--itemgroup">
+                      <ControlLabel htmlFor={`seoData.seoDataByLang.${lang.code}.keywords`}>
+                        <FormLabel helpId="app.pages.friendlyCodeHelp" labelId="pages.pageForm.seoFriendlyCode" />
+                      </ControlLabel>
+                    </div>
+                  </Col>
+                  <Col sm={lang.isDefault ? 9 : 6}>
+                    <Field
+                      component={RenderTextInput}
+                      key={`seoData.seoDataByLang.${lang.code}.friendlyCode`}
+                      name={`seoData.seoDataByLang.${lang.code}.friendlyCode`}
+                      disabled={readOnly}
+                      inputSize={12}
+                      validate={validateFriendlyCode}
+                      labelSize={0}
+                    />
+                  </Col>
+                </div>
+                <FieldArray
+                  render={() => (
+                    <SeoInfoMetadata
+                      value={((((formik.values || {}).seoData || {})
+                      .seoDataByLang || {})[lang.code] || {}).metaTags || []}
+                      lang={lang}
+                      readOnly={readOnly}
+                      langIdx={i}
+                      languages={languages}
+                    />
+                  )}
+                  name={`seoData.seoDataByLang.${lang.code}.metaTags`}
+                  readOnly={readOnly}
+                />
               </div>
             </div>
           </Tab>
@@ -179,14 +198,15 @@ const SeoInfo = ({
 
 SeoInfo.propTypes = {
   languages: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  onChangeDefaultTitle: PropTypes.func,
   readOnly: PropTypes.bool,
-  formId: PropTypes.string.isRequired,
+  isAddMode: PropTypes.bool,
+  isCloneMode: PropTypes.bool,
 };
 
 SeoInfo.defaultProps = {
-  onChangeDefaultTitle: null,
   readOnly: false,
+  isAddMode: false,
+  isCloneMode: false,
 };
 
 export default SeoInfo;
diff --git a/src/ui/pages/common/SeoInfoMetadata.js b/src/ui/pages/common/SeoInfoMetadata.js
index 180cb5b39..d39120830 100644
--- a/src/ui/pages/common/SeoInfoMetadata.js
+++ b/src/ui/pages/common/SeoInfoMetadata.js
@@ -1,89 +1,123 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Col, Button, Icon, ControlLabel } from 'patternfly-react';
-import { Field, fieldArrayFieldsPropTypes } from 'redux-form';
+import { Field, useFormikContext } from 'formik';
 
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
+import SwitchRenderer from 'ui/common/formik-field/SwitchInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import SeoMetadataForm from 'ui/pages/common/SeoMetadataForm';
 import { METATAG_TYPE_OPTIONS } from 'ui/pages/common/const';
 
 const SeoInfoMetadata = ({
-  fields,
+  value,
   langIdx,
-  onPushMetadata,
-  onRemoveMetadata,
   readOnly,
+  lang,
+  languages,
 }) => {
-  const fieldTables = fields.map((name, idx) => {
-    const metas = fields.get(idx);
-    return (
-      <div key={name} className="form-group SeoInfo__metadata--itemgroup">
-        <Col sm={2}>
-          <div className="text-right SeoInfo__metadata--itemgroup">
-            <ControlLabel htmlFor={`${name}.type`}>
-              <span>{metas.key}</span>
-            </ControlLabel>
-          </div>
-        </Col>
-        <Col sm={langIdx ? 3 : 4}>
-          <Field
-            component={RenderSelectInput}
-            options={METATAG_TYPE_OPTIONS}
-            name={`${name}.type`}
-            labelSize={0}
-            inputSize={12}
-            disabled={metas.useDefaultLang || readOnly}
-            hasLabel={false}
-          />
-        </Col>
-        <Col sm={langIdx ? 3 : 4}>
+  const formik = useFormikContext();
+  const onPushMetadata = (metadata) => {
+    const { metakey, metatype, metavalue } = metadata;
+    const newMetadata = {
+      key: metakey,
+      type: metatype,
+      value: metavalue,
+      useDefaultLang: false,
+    };
+    languages.forEach((language) => {
+      formik.setFieldValue(`seoData.seoDataByLang.${language.code}.metaTags`, [
+        ...value,
+        newMetadata,
+      ]);
+    });
+  };
+
+  const onRemoveMetadata = (idx) => {
+    languages.forEach((language) => {
+      formik.setFieldValue(`seoData.seoDataByLang.${language.code}.metaTags`, [
+        ...value.slice(0, idx),
+        ...value.slice(idx + 1),
+      ]);
+    });
+  };
+
+
+  const fieldTables = value.map((metas, idx) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <div key={`${metas.key}-${idx}`} className="form-group SeoInfo__metadata--itemgroup">
+      <Col sm={2}>
+        <div className="text-right SeoInfo__metadata--itemgroup">
+          <ControlLabel htmlFor={`seoData.seoDataByLang.${lang.code}.metaTags.${idx}.type`}>
+            <span>{metas.key}</span>
+          </ControlLabel>
+        </div>
+      </Col>
+      <Col sm={langIdx ? 3 : 4}>
+        <Field
+          component={RenderSelectInput}
+          options={METATAG_TYPE_OPTIONS}
+          name={`seoData.seoDataByLang.${lang.code}.metaTags.${idx}.type`}
+          labelSize={0}
+          inputSize={12}
+          disabled={metas.useDefaultLang || readOnly}
+          hasLabel={false}
+        />
+      </Col>
+      <Col sm={langIdx ? 3 : 4}>
+        <Field
+          component={RenderTextInput}
+          name={`seoData.seoDataByLang.${lang.code}.metaTags.${idx}.value`}
+          labelSize={0}
+          inputSize={12}
+          disabled={metas.useDefaultLang || readOnly}
+        />
+      </Col>
+      <Col sm={langIdx ? 3 : 1} className="text-right">
+        {langIdx > 0 ? (
           <Field
-            component={RenderTextInput}
-            name={`${name}.value`}
-            labelSize={0}
-            inputSize={12}
-            disabled={metas.useDefaultLang || readOnly}
+            component={SwitchRenderer}
+            name={`seoData.seoDataByLang.${lang.code}.metaTags.${idx}.useDefaultLang`}
+            label={<FormLabel labelId="app.seo.inheritLangLabel" />}
+            labelSize={7}
+            disabled={readOnly}
           />
-        </Col>
-        <Col sm={langIdx ? 3 : 1} className="text-right">
-          {langIdx > 0 ? (
-            <Field
-              component={SwitchRenderer}
-              name={`${name}.useDefaultLang`}
-              label={<FormLabel labelId="app.seo.inheritLangLabel" />}
-              labelSize={7}
-              disabled={readOnly}
-            />
-          ) : (
-            <Button bsStyle="danger" onClick={() => onRemoveMetadata(idx)} disabled={readOnly}>
-              <Icon name="trash" />
-            </Button>
-          )}
-        </Col>
-      </div>
-    );
-  });
+      ) : (
+        <Button bsStyle="danger" onClick={() => onRemoveMetadata(idx)} disabled={readOnly}>
+          <Icon name="trash" />
+        </Button>
+      )}
+      </Col>
+    </div>
+  ));
 
   return (
     <Fragment>
       {fieldTables}
-      {langIdx === 0 && <SeoMetadataForm onSubmit={onPushMetadata} readOnly={readOnly} />}
+      {langIdx === 0 ? <SeoMetadataForm
+        key={value ? value.length : 0}
+        onSubmit={onPushMetadata}
+        readOnly={readOnly}
+      /> : null}
     </Fragment>
   );
 };
 
 SeoInfoMetadata.propTypes = {
-  fields: PropTypes.shape(fieldArrayFieldsPropTypes).isRequired,
+  value: PropTypes.arrayOf(PropTypes.shape({})),
   langIdx: PropTypes.number.isRequired,
-  onPushMetadata: PropTypes.func.isRequired,
-  onRemoveMetadata: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  lang: PropTypes.shape({
+    code: PropTypes.string.isRequired,
+  }).isRequired,
+  languages: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string.isRequired,
+  })).isRequired,
 };
 
 SeoInfoMetadata.defaultProps = {
+  value: [],
   readOnly: false,
 };
 
diff --git a/src/ui/pages/common/SeoInfoMetadataContainer.js b/src/ui/pages/common/SeoInfoMetadataContainer.js
deleted file mode 100644
index 1591bba30..000000000
--- a/src/ui/pages/common/SeoInfoMetadataContainer.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { connect } from 'react-redux';
-import { reset, arrayPush, arraySplice } from 'redux-form';
-import SeoInfoMetadata from 'ui/pages/common/SeoInfoMetadata';
-
-export const mapDispatchToProps = (dispatch, { languages, formId }) => ({
-  onPushMetadata: ({ metakey, metatype, metavalue }) => {
-    const meta = {
-      key: metakey,
-      type: metatype,
-      value: metavalue,
-      useDefaultLang: false,
-    };
-    languages.forEach((lang) => {
-      dispatch(arrayPush(
-        formId,
-        `seoData.seoDataByLang.${lang.code}.metaTags`,
-        { ...meta },
-      ));
-    });
-    dispatch(reset('SeoMetadataForm'));
-  },
-  onRemoveMetadata: idx => (
-    languages.forEach((lang) => {
-      dispatch(arraySplice(
-        formId,
-        `seoData.seoDataByLang.${lang.code}.metaTags`,
-        idx,
-        1,
-      ));
-    })
-  ),
-});
-
-export default connect(null, mapDispatchToProps, null, {
-  pure: false,
-})(SeoInfoMetadata);
diff --git a/src/ui/pages/common/SeoMetadataForm.js b/src/ui/pages/common/SeoMetadataForm.js
index 0d1338550..e6efc6b7d 100644
--- a/src/ui/pages/common/SeoMetadataForm.js
+++ b/src/ui/pages/common/SeoMetadataForm.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
-import { required } from '@entando/utils';
-import { Field, reduxForm } from 'redux-form';
+import { Field, withFormik } from 'formik';
 import { Row, Col, Button } from 'patternfly-react';
 import { FormattedMessage } from 'react-intl';
+import * as Yup from 'yup';
 
 import FormLabel from 'ui/common/form/FormLabel';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 import { METATAG_TYPE_OPTIONS } from 'ui/pages/common/const';
 
-const SeoMetadataFormBody = ({ handleSubmit, invalid, readOnly }) => (
+const SeoMetadataFormBody = ({ handleSubmit, isValid, readOnly }) => (
   <div className="SeoInfo__addmetadata">
     <legend className="SeoInfo__addmetadata--head">
       <FormLabel helpId="app.seo.addMetatagHelp" labelId="app.seo.addMetatag" />
@@ -23,7 +23,6 @@ const SeoMetadataFormBody = ({ handleSubmit, invalid, readOnly }) => (
             component={RenderTextInput}
             name="metakey"
             label={<FormLabel labelId="app.seo.addMetatagKey" />}
-            validate={[required]}
             disabled={readOnly}
           />
         </Col>
@@ -33,7 +32,6 @@ const SeoMetadataFormBody = ({ handleSubmit, invalid, readOnly }) => (
             options={METATAG_TYPE_OPTIONS}
             name="metatype"
             label={<FormLabel labelId="app.seo.addMetatagType" />}
-            validate={[required]}
             disabled={readOnly}
           />
         </Col>
@@ -42,7 +40,6 @@ const SeoMetadataFormBody = ({ handleSubmit, invalid, readOnly }) => (
             component={RenderTextInput}
             name="metavalue"
             label={<FormLabel labelId="app.seo.addMetatagValue" />}
-            validate={[required]}
             disabled={readOnly}
           />
         </Col>
@@ -51,7 +48,7 @@ const SeoMetadataFormBody = ({ handleSubmit, invalid, readOnly }) => (
             className="pull-right"
             type="submit"
             bsStyle="primary"
-            disabled={invalid || readOnly}
+            disabled={!isValid || readOnly}
             onClick={handleSubmit}
           >
             <FormattedMessage id="app.add" />
@@ -64,20 +61,35 @@ const SeoMetadataFormBody = ({ handleSubmit, invalid, readOnly }) => (
 
 SeoMetadataFormBody.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
+  isValid: PropTypes.bool,
   readOnly: PropTypes.bool,
 };
 
 SeoMetadataFormBody.defaultProps = {
-  invalid: false,
+  isValid: false,
   readOnly: false,
 };
 
-const SeoMetadataForm = reduxForm({
-  form: 'SeoMetadataForm',
-  initialValues: {
-    metatype: get(METATAG_TYPE_OPTIONS, '0.value', ''),
+const SeoMetadataForm = withFormik({
+  mapPropsToValues: ({ initialValues }) => ({
+    ...initialValues, metatype: get(METATAG_TYPE_OPTIONS, '0.value', ''), metakey: '', metavalue: '',
+  }),
+  validateOnMount: true,
+  validationSchema: () => (
+    Yup.object().shape({
+      metakey: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      metatype: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+      metavalue: Yup.string().required(<FormattedMessage id="validateForm.required" />),
+    })),
+  handleSubmit: (
+    values,
+    {
+      props: { onSubmit },
+    },
+  ) => {
+    onSubmit(values);
   },
+  displayName: 'SeoMetadataForm',
 })(SeoMetadataFormBody);
 
 export default SeoMetadataForm;
diff --git a/src/ui/pages/config/PageConfigPage.js b/src/ui/pages/config/PageConfigPage.js
index 1186e2b05..ebacdcd0b 100644
--- a/src/ui/pages/config/PageConfigPage.js
+++ b/src/ui/pages/config/PageConfigPage.js
@@ -50,6 +50,7 @@ class PageConfigPage extends Component {
     this.toggleEditingSettings = this.toggleEditingSettings.bind(this);
     this.openLinkPublishedPage = this.openLinkPublishedPage.bind(this);
     this.handleToggleToolbarCollapse = this.handleToggleToolbarCollapse.bind(this);
+    this.editPageFormRef = React.createRef();
   }
 
   componentDidMount() {
@@ -94,12 +95,11 @@ class PageConfigPage extends Component {
     });
   }
 
-  toggleEditingSettings() {
+  toggleEditingSettings(clearForm = false) {
     this.setState((state) => {
       const { editingSettings } = state;
-      if (editingSettings) {
-        const { onSettingsCancel } = this.props;
-        onSettingsCancel();
+      if (editingSettings && clearForm && this.editPageFormRef && this.editPageFormRef.current) {
+        this.editPageFormRef.current.resetForm();
       }
       return ({ editingSettings: !editingSettings });
     });
@@ -151,11 +151,16 @@ class PageConfigPage extends Component {
   renderActionBar(tab) {
     const {
       intl, pageDiffersFromPublished, restoreConfig, previewUri, pageStatus,
-      onClickSaveSettings, pageSettingsButtonInvalid, pageSettingsButtonSubmitting,
-      selectedPageForm,
     } = this.props;
 
     const { editingSettings } = this.state;
+
+    const onSaveSettings = () => {
+      if (this.editPageFormRef && this.editPageFormRef.current) {
+        this.editPageFormRef.current.submitForm();
+      }
+    };
+
     return (
       <Row className="PageConfigPage__toolbar-row PageConfigPage__btn-group--trans">
         <Col xs={12}>
@@ -188,7 +193,7 @@ class PageConfigPage extends Component {
                     'btn',
                     editingSettings ? '' : 'btn-primary',
                   ].join(' ')}
-                  onClick={this.toggleEditingSettings}
+                  onClick={() => this.toggleEditingSettings(true)}
                 >
                   <span>
                     <FormattedMessage id={`${editingSettings ? 'app.cancel' : 'app.edit'}`} />
@@ -202,8 +207,11 @@ class PageConfigPage extends Component {
                         'btn',
                         'btn-primary',
                       ].join(' ')}
-                      onClick={() => onClickSaveSettings(selectedPageForm)}
-                      disabled={pageSettingsButtonInvalid || pageSettingsButtonSubmitting}
+                      onClick={onSaveSettings}
+                      disabled={this.editPageFormRef && this.editPageFormRef.current ?
+                        (!this.editPageFormRef.current.isValid
+                        ||
+                        this.editPageFormRef.current.isSubmitting) : true}
                     >
                       <span>
                         <FormattedMessage id="app.save" />
@@ -272,7 +280,7 @@ class PageConfigPage extends Component {
       intl, pageIsOnTheFly, isOnTheFlyEnabled,
       setSelectedPageOnTheFly, pageIsPublished, publishPage, unpublishPage,
       applyDefaultConfig, pageConfigMatchesDefault, appTourProgress,
-      match,
+      match, onSaveSuccess,
     } = this.props;
     const { editingSettings, toolbarCollapsed } = this.state;
 
@@ -346,7 +354,9 @@ class PageConfigPage extends Component {
                       key={(match.params || {}).pageCode}
                       readOnly={!editingSettings}
                       stayOnSave
-                      onSave={this.toggleEditingSettings}
+                      onSaveSuccess={onSaveSuccess}
+                      innerRef={this.editPageFormRef}
+                      onSave={() => this.toggleEditingSettings(false)}
                     />
                   </div>
                 </Tab>
@@ -452,10 +462,7 @@ PageConfigPage.propTypes = {
   selectedPageForm: PropTypes.shape({}),
   loading: PropTypes.bool,
   appTourProgress: PropTypes.string,
-  onSettingsCancel: PropTypes.func.isRequired,
-  onClickSaveSettings: PropTypes.func.isRequired,
-  pageSettingsButtonSubmitting: PropTypes.bool,
-  pageSettingsButtonInvalid: PropTypes.bool,
+  onSaveSuccess: PropTypes.func.isRequired,
 };
 
 PageConfigPage.defaultProps = {
@@ -478,8 +485,6 @@ PageConfigPage.defaultProps = {
   selectedPageForm: {},
   loading: false,
   appTourProgress: '',
-  pageSettingsButtonSubmitting: false,
-  pageSettingsButtonInvalid: false,
 };
 
 export default injectIntl(PageConfigPage);
diff --git a/src/ui/pages/config/PageConfigPageContainer.js b/src/ui/pages/config/PageConfigPageContainer.js
index 10ab84bcd..1583c49c4 100644
--- a/src/ui/pages/config/PageConfigPageContainer.js
+++ b/src/ui/pages/config/PageConfigPageContainer.js
@@ -3,7 +3,7 @@ import PageConfigPage from 'ui/pages/config/PageConfigPage';
 import { clearErrors } from '@entando/messages';
 import { initConfigPage, setSelectedPageOnTheFly, restoreSelectedPageConfig, applyDefaultConfig } from 'state/page-config/actions';
 import { setSelectedPageTemplate } from 'state/page-templates/actions';
-import { publishSelectedPage, unpublishSelectedPage } from 'state/pages/actions';
+import { publishSelectedPage, setSelectedPage, unpublishSelectedPage } from 'state/pages/actions';
 import { getSelectedPageTemplateCanBeOnTheFly } from 'state/page-templates/selectors';
 import {
   makeGetPageIsOnTheFly,
@@ -19,8 +19,6 @@ import withPermissions from 'ui/auth/withPermissions';
 import { MANAGE_PAGES_PERMISSION } from 'state/permissions/const';
 import { setAppTourProgress, setPublishStatus } from 'state/app-tour/actions';
 import { getAppTourProgress } from 'state/app-tour/selectors';
-import { reset, submit, isInvalid, isSubmitting, getFormValues } from 'redux-form';
-import { FORM_ID } from 'ui/pages/edit/PagesEditFormContainer';
 import { APP_TOUR_CANCELLED } from 'state/app-tour/const';
 
 export const mapDispatchToProps = (dispatch, { match: { params } }) => ({
@@ -42,16 +40,7 @@ export const mapDispatchToProps = (dispatch, { match: { params } }) => ({
   },
   unpublishPage: () => dispatch(unpublishSelectedPage()),
   applyDefaultConfig: () => dispatch(applyDefaultConfig(params.pageCode)),
-  onSettingsCancel: () => {
-    dispatch(reset(FORM_ID));
-    dispatch(reset('SeoMetadataForm'));
-  },
-  onClickSaveSettings: async (page) => {
-    await dispatch(submit(FORM_ID));
-    dispatch(initConfigPage(page.code));
-    dispatch(reset(FORM_ID));
-    dispatch(reset('SeoMetadataForm'));
-  },
+  onSaveSuccess: page => dispatch(setSelectedPage(page)),
 });
 
 export const mapStateToProps = (state, { match: { params } }) => {
@@ -59,10 +48,8 @@ export const mapStateToProps = (state, { match: { params } }) => {
   if (!selectedPage) {
     return {};
   }
-  const selectedPageForm = getFormValues(FORM_ID)(state);
 
   return {
-    selectedPageForm,
     pageCode: selectedPage.code,
     pageName: getSelectedPageLocaleTitle(state),
     pageStatus: selectedPage.status,
@@ -75,8 +62,6 @@ export const mapStateToProps = (state, { match: { params } }) => {
     pageConfigMatchesDefault: makeGetSelectedPageConfigMatchesDefault(params.pageCode)(state),
     loading: getLoading(state).pageConfig,
     appTourProgress: getAppTourProgress(state),
-    pageSettingsButtonSubmitting: isSubmitting(FORM_ID)(state),
-    pageSettingsButtonInvalid: isInvalid(FORM_ID)(state),
   };
 };
 
diff --git a/src/ui/pages/edit/PagesEditFormContainer.js b/src/ui/pages/edit/PagesEditFormContainer.js
index b0b8d133b..4d0732656 100644
--- a/src/ui/pages/edit/PagesEditFormContainer.js
+++ b/src/ui/pages/edit/PagesEditFormContainer.js
@@ -6,7 +6,7 @@ import PageForm from 'ui/pages/common/PageForm';
 import { getActiveLanguages } from 'state/languages/selectors';
 import { getGroupEntries, getGroupsList, getMyGroupsList } from 'state/groups/selectors';
 import { getPageTemplatesList } from 'state/page-templates/selectors';
-import { getCharsets, getContentTypes, getPageTreePages } from 'state/pages/selectors';
+import { getCharsets, getContentTypes, getEditPage, getPageTreePages } from 'state/pages/selectors';
 import { ACTION_SAVE, ACTION_SAVE_AND_CONFIGURE, SEO_ENABLED } from 'state/pages/const';
 import { sendPutPage, fetchPageForm } from 'state/pages/actions';
 import { fetchAllGroupEntries, fetchMyGroups } from 'state/groups/actions';
@@ -14,9 +14,6 @@ import { fetchPageTemplates } from 'state/page-templates/actions';
 import { history, ROUTE_PAGE_TREE, ROUTE_PAGE_CONFIG, ROUTE_FORBIDDEN } from 'app-init/router';
 import { fetchLanguages } from 'state/languages/actions';
 import { setVisibleModal } from 'state/modal/actions';
-import { formValueSelector } from 'redux-form';
-
-export const FORM_ID = 'pageEdit';
 
 export const mapStateToProps = (state, { match: { params } }) => ({
   languages: getActiveLanguages(state),
@@ -30,11 +27,9 @@ export const mapStateToProps = (state, { match: { params } }) => ({
   seoMode: SEO_ENABLED,
   mode: 'edit',
   pageCode: params.pageCode,
-  form: FORM_ID,
   keepDirtyOnReinitialize: true,
   enableGroupAccessControl: true,
-  pageOwnerGroup: formValueSelector(FORM_ID)(state, 'ownerGroup'),
-  titles: formValueSelector(FORM_ID)(state, 'titles'),
+  initialValues: getEditPage(state),
 });
 
 
@@ -55,7 +50,7 @@ export const mapDispatchToProps = (dispatch, ownProps) => ({
           default: history.push(ROUTE_PAGE_TREE);
         }
       } else ownProps.onSave();
-    }).catch(() => {}),
+    }),
   onWillMount: ({ pageCode }) => {
     dispatch(fetchLanguages({ page: 1, pageSize: 0 }));
     dispatch(fetchMyGroups({ sort: 'name' }));
diff --git a/src/ui/pages/list/PageSearchForm.js b/src/ui/pages/list/PageSearchForm.js
index 992ace257..7f91bf45a 100644
--- a/src/ui/pages/list/PageSearchForm.js
+++ b/src/ui/pages/list/PageSearchForm.js
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Row, Col, FormGroup, Button, DropdownButton, MenuItem } from 'patternfly-react';
 
@@ -24,73 +24,64 @@ const selectOptions = [
   },
 ];
 
-const selectedTypeSearchParamMap = {
-  code: 'pageCodeToken',
-  name: 'title',
-};
-
-export const PageSearchFormBody = ({ intl, handleSubmit, onSubmit }) => {
-  const [searchType, setSearchType] = useState('code');
-  return (
-    <form
-      onSubmit={handleSubmit(values =>
-        onSubmit({ ...values, searchType: selectedTypeSearchParamMap[searchType] }))}
-      className="PageSearchForm form-horizontal well"
-    >
-      <h3><FormattedMessage id="pageTree.searchForm.searchPageBy" /></h3>
-      <FormGroup>
-        <Row>
-          <Col xs={12} sm={3} className="PageSearchForm__filter-searchby">
-            <DropdownButton
-              title={intl.formatMessage({ id: `pageTree.searchForm.${searchType}` })}
-              id="attribute"
-              onSelect={e => setSearchType(e)}
-              className="PageSearchForm__filter-searchby-dropdown"
-            >
-              {selectOptions.map(option => (
-                <MenuItem key={option.value} eventKey={option.value}>
-                  {intl.formatMessage({ id: option.label })}
-                </MenuItem>
-                ))}
-            </DropdownButton>
-          </Col>
-          <Col xs={12} sm={8}>
-            <Field
-              id="pagecode"
-              component="input"
-              className="form-control"
-              name="pageCodeToken"
-              placeholder={intl.formatMessage(msgs[searchType])}
-            />
-          </Col>
-        </Row>
-      </FormGroup>
-      <FormGroup>
-        <Row>
-          <Col xs={11}>
-            <Button
-              type="submit"
-              bsStyle="primary"
-              className="pull-right PageSearchForm__save"
-            >
-              <FormattedMessage id="app.search" />
-            </Button>
-          </Col>
-        </Row>
-      </FormGroup>
-    </form>
-
-  );
-};
+export const PageSearchFormBody = ({
+  intl, handleSubmit, handleChange, values,
+}) => (
+  <form
+    onSubmit={handleSubmit}
+    className="PageSearchForm form-horizontal well"
+  >
+    <h3><FormattedMessage id="pageTree.searchForm.searchPageBy" /></h3>
+    <FormGroup>
+      <Row>
+        <Col xs={12} sm={3} className="PageSearchForm__filter-searchby">
+          <DropdownButton
+            title={intl.formatMessage({ id: `pageTree.searchForm.${values.searchType}` })}
+            id="attribute"
+            onSelect={handleChange('searchType')}
+            className="PageSearchForm__filter-searchby-dropdown"
+          >
+            {selectOptions.map(option => (
+              <MenuItem key={option.value} eventKey={option.value}>
+                {intl.formatMessage({ id: option.label })}
+              </MenuItem>
+                  ))}
+          </DropdownButton>
+        </Col>
+        <Col xs={12} sm={8}>
+          <Field
+            id="pagecode"
+            type="input"
+            className="form-control"
+            name="pageCodeToken"
+            placeholder={intl.formatMessage(msgs[values.searchType])}
+          />
+        </Col>
+      </Row>
+    </FormGroup>
+    <FormGroup>
+      <Row>
+        <Col xs={11}>
+          <Button
+            type="submit"
+            bsStyle="primary"
+            className="pull-right PageSearchForm__save"
+          >
+            <FormattedMessage id="app.search" />
+          </Button>
+        </Col>
+      </Row>
+    </FormGroup>
+  </form>
+);
 
 PageSearchFormBody.propTypes = {
   intl: intlShape.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  values: PropTypes.shape({
+    searchType: PropTypes.string,
+  }).isRequired,
 };
 
-const PageSearchForm = reduxForm({
-  form: 'pageSearch',
-})(PageSearchFormBody);
-
-export default injectIntl(PageSearchForm);
+export default injectIntl(PageSearchFormBody);
diff --git a/src/ui/pages/list/PageTreePage.js b/src/ui/pages/list/PageTreePage.js
index 6204b2d07..d3cb4f7da 100644
--- a/src/ui/pages/list/PageTreePage.js
+++ b/src/ui/pages/list/PageTreePage.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Grid, Row, Col, Breadcrumb, Button } from 'patternfly-react';
 import { Link } from 'react-router-dom';
+import { Formik } from 'formik';
 
 import BreadcrumbItem from 'ui/common/BreadcrumbItem';
 import InternalPage from 'ui/internal-page/InternalPage';
@@ -14,15 +15,32 @@ import AppTourContainer from 'ui/app-tour/AppTourContainer';
 import { ROUTE_PAGE_ADD } from 'app-init/router';
 import { withPermissionValues } from 'ui/auth/withPermissions';
 
+const selectedTypeSearchParamMap = {
+  code: 'pageCodeToken',
+  name: 'title',
+};
+
+const initialValues = {
+  pageCodeToken: '',
+  searchType: 'code',
+};
+
 class PageTreePage extends Component {
   componentWillMount() {
     this.props.onWillMount(this.props);
   }
 
-  renderButton() {
+  renderButton(setFieldValue) {
     if (this.props.search) {
       return (
-        <Button bsStyle="default" className="pull-right PageTreePage__clear" onClick={this.props.onClear}>
+        <Button
+          bsStyle="default"
+          className="pull-right PageTreePage__clear"
+          onClick={() => {
+          this.props.onClear();
+          setFieldValue('pageCodeToken', '');
+        }}
+        >
           <FormattedMessage id="pageTree.action.clear" />
         </Button>
       );
@@ -31,74 +49,93 @@ class PageTreePage extends Component {
   }
 
   render() {
+    const onformSubmit = (values) => {
+      const searchType = selectedTypeSearchParamMap[values.searchType];
+      this.props.onSubmit({ ...values, searchType });
+    };
+
     return (
       <InternalPage className="PageTreePage">
-        <Grid fluid>
-          <Row>
-            <Col xs={12}>
-              <Breadcrumb>
-                <BreadcrumbItem active>
-                  <FormattedMessage id="menu.pageDesigner" />
-                </BreadcrumbItem>
-                <BreadcrumbItem active>
-                  <FormattedMessage id="menu.pageTree" />
-                </BreadcrumbItem>
-              </Breadcrumb>
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={12}>
-              <PageTitle titleId="menu.pageTree" helpId="pageTreePage.help" data-testid="page-tree" />
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={12}>
-              <ErrorsAlertContainer />
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={6} xsOffset={3}>
-              <PageSearchForm {...this.props} />
-            </Col>
-          </Row>
-          {this.props.search && (
-            <Row>
-              <Col xs={12}>
-                {this.renderButton()}
-              </Col>
-            </Row>
+        <Formik initialValues={initialValues} onSubmit={onformSubmit}>
+          {({
+            handleSubmit,
+            handleChange,
+            values,
+            setFieldValue,
+          }) => (
+            <Grid fluid>
+              <Row>
+                <Col xs={12}>
+                  <Breadcrumb>
+                    <BreadcrumbItem active>
+                      <FormattedMessage id="menu.pageDesigner" />
+                    </BreadcrumbItem>
+                    <BreadcrumbItem active>
+                      <FormattedMessage id="menu.pageTree" />
+                    </BreadcrumbItem>
+                  </Breadcrumb>
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <PageTitle titleId="menu.pageTree" helpId="pageTreePage.help" data-testid="page-tree" />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <ErrorsAlertContainer />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={6} xsOffset={3}>
+                  <PageSearchForm
+                    {...this.props}
+                    handleSubmit={handleSubmit}
+                    handleChange={handleChange}
+                    values={values}
+                  />
+                </Col>
+              </Row>
+              {this.props.search && (
+              <Row>
+                <Col xs={12}>
+                  {this.renderButton(setFieldValue)}
+                </Col>
+              </Row>
           )}
-          <Row>
-            <Col xs={12}>
-              <PageTreeContainer
-                loading={this.props.loading}
-                searchPageCodeToken={this.props.searchPageCodeToken}
-              />
-            </Col>
-          </Row>
-          {!this.props.search && (
-            <Row>
-              <Col xs={12}>
-                {this.renderButton()}
-              </Col>
-            </Row>
+              <Row>
+                <Col xs={12}>
+                  <PageTreeContainer
+                    loading={this.props.loading}
+                    searchPageCodeToken={values.pageCodeToken}
+                  />
+                </Col>
+              </Row>
+              {!this.props.search && (
+              <Row>
+                <Col xs={12}>
+                  {this.renderButton(setFieldValue)}
+                </Col>
+              </Row>
           )}
-          <Row>
-            <Col xs={12}>
-              <Link to={ROUTE_PAGE_ADD} className="pull-right PageTreePage__save" onClick={() => this.props.onNextStep(6)}>
-                <Button
-                  bsStyle="primary"
-                  className="app-tour-step-5"
-                  data-testid="button-step-5"
-                  onClick={() => this.props.onNextStep(6)}
-                >
-                  <FormattedMessage id="app.add" />
-                </Button>
-              </Link>
-            </Col>
-          </Row>
-          <AppTourContainer customOffset={100} />
-        </Grid>
+              <Row>
+                <Col xs={12}>
+                  <Link to={ROUTE_PAGE_ADD} className="pull-right PageTreePage__save" onClick={() => this.props.onNextStep(6)}>
+                    <Button
+                      bsStyle="primary"
+                      className="app-tour-step-5"
+                      data-testid="button-step-5"
+                      onClick={() => this.props.onNextStep(6)}
+                    >
+                      <FormattedMessage id="app.add" />
+                    </Button>
+                  </Link>
+                </Col>
+              </Row>
+              <AppTourContainer customOffset={100} />
+            </Grid>
+              )}
+        </Formik>
       </InternalPage>
     );
   }
@@ -107,6 +144,7 @@ class PageTreePage extends Component {
 PageTreePage.propTypes = {
   onWillMount: PropTypes.func.isRequired,
   onClear: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
   search: PropTypes.arrayOf(PropTypes.shape({})),
   loading: PropTypes.bool,
   onNextStep: PropTypes.func,
diff --git a/src/ui/profile-types/add/AddFormContainer.js b/src/ui/profile-types/add/AddFormContainer.js
index bda93ca25..6ca6b4fe9 100644
--- a/src/ui/profile-types/add/AddFormContainer.js
+++ b/src/ui/profile-types/add/AddFormContainer.js
@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { routeConverter } from '@entando/utils';
-import { formValueSelector, submit } from 'redux-form';
 import { withRouter } from 'react-router-dom';
 
 import { fetchProfileTypeAttributes, sendPostProfileType, setSelectedAttribute } from 'state/profile-types/actions';
@@ -14,7 +13,10 @@ import ProfileTypeForm from 'ui/profile-types/common/ProfileTypeForm';
 export const mapStateToProps = state => ({
   mode: 'add',
   attributesType: getProfileTypeAttributesIdList(state),
-  attributeCode: formValueSelector('ProfileType')(state, 'type'),
+  initialValues: {
+    code: '',
+    name: '',
+  },
 });
 
 export const mapDispatchToProps = (dispatch, { history }) => ({
@@ -28,7 +30,7 @@ export const mapDispatchToProps = (dispatch, { history }) => ({
       code: values.code && values.code.toUpperCase(),
     }));
   },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('ProfileType')); },
+  onSave: () => { dispatch(setVisibleModal('')); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_PROFILE_TYPE_LIST)); },
 });
diff --git a/src/ui/profile-types/attributes/AddFormContainer.js b/src/ui/profile-types/attributes/AddFormContainer.js
index 6a02936a7..12b8aac6c 100644
--- a/src/ui/profile-types/attributes/AddFormContainer.js
+++ b/src/ui/profile-types/attributes/AddFormContainer.js
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { injectIntl } from 'react-intl';
-import { formValueSelector, submit } from 'redux-form';
 import { clearErrors } from '@entando/messages';
 import { METHODS } from '@entando/apimanager';
 import { routeConverter } from '@entando/utils';
@@ -23,6 +22,8 @@ import {
   getProfileTypeSelectedAttributeRoleChoices,
   getSelectedCompositeAttributes,
   getActionModeProfileTypeSelectedAttribute,
+  getProfileTypeSelectedAttributeJoinRoles,
+  getSelectedAttributeNestedType,
 } from 'state/profile-types/selectors';
 import { ROUTE_PROFILE_TYPE_ATTRIBUTE_ADD, ROUTE_PROFILE_TYPE_EDIT } from 'app-init/router';
 import { TYPE_COMPOSITE, MODE_ADD } from 'state/profile-types/const';
@@ -33,7 +34,7 @@ import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal'
 import AttributeForm from 'ui/common/form/AttributeForm';
 
 export const mapStateToProps = (state, { match: { params } }) => {
-  const joinAllowedOptions = formValueSelector('addAttribute')(state, 'joinRoles') || [];
+  const joinAllowedOptions = getProfileTypeSelectedAttributeJoinRoles(state) || [];
   return {
     mode: getActionModeProfileTypeSelectedAttribute(state) || 'add',
     profileTypeAttributeCode: params.entityCode,
@@ -52,7 +53,7 @@ export const mapStateToProps = (state, { match: { params } }) => {
       compositeAttributeType: TYPE_COMPOSITE,
     },
     compositeAttributes: getSelectedCompositeAttributes(state),
-    nestedAttributeComposite: formValueSelector('addAttribute')(state, 'nestedAttribute.type') || '',
+    nestedAttributeComposite: getSelectedAttributeNestedType(state) || '',
   };
 };
 
@@ -61,7 +62,7 @@ export const mapDispatchToProps = (dispatch, { match: { params }, history }) =>
     dispatch(clearErrors());
     dispatch(fetchProfileTypeAttributes());
   },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('addAttribute')); },
+  onSave: () => { dispatch(setVisibleModal('')); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_PROFILE_TYPE_EDIT, { profiletypeCode: params.entityCode })); },
   onSubmit: (values, allowedRoles, mode) => {
@@ -80,16 +81,16 @@ export const mapDispatchToProps = (dispatch, { match: { params }, history }) =>
       attributeCode,
       entityCode,
       selectedAttributeType: { code },
+      values: { type },
     } = props;
     dispatch(setActionMode(MODE_ADD));
     dispatch(fetchProfileTypeAttribute(
       entityCode,
-      attributeCode,
+      attributeCode || type,
       () => history.push(routeConverter(ROUTE_PROFILE_TYPE_ATTRIBUTE_ADD, {
         entityCode: params.entityCode,
       })),
       code,
-      'addAttribute',
     ));
   },
   onClickDelete: (attributeCode) => {
diff --git a/src/ui/profile-types/attributes/EditFormContainer.js b/src/ui/profile-types/attributes/EditFormContainer.js
index e85e89637..0eb8fd5ae 100644
--- a/src/ui/profile-types/attributes/EditFormContainer.js
+++ b/src/ui/profile-types/attributes/EditFormContainer.js
@@ -2,7 +2,6 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { injectIntl } from 'react-intl';
 import { METHODS } from '@entando/apimanager';
-import { formValueSelector, submit } from 'redux-form';
 import { clearErrors } from '@entando/messages';
 import { routeConverter } from '@entando/utils';
 
@@ -27,6 +26,9 @@ import {
   getProfileTypeSelectedAttributeRoleChoices,
   getSelectedCompositeAttributes,
   getIsMonolistCompositeAttributeType,
+  getAttributeSelectFromProfileType,
+  getSelectedAttributeNestedType,
+  getProfileTypeSelectedAttributeJoinRoles,
 } from 'state/profile-types/selectors';
 import { MODE_EDIT_COMPOSITE, MODE_ADD_ATTRIBUTE_COMPOSITE } from 'state/profile-types/const';
 import {
@@ -38,7 +40,7 @@ import { setVisibleModal } from 'state/modal/actions';
 import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';
 
 export const mapStateToProps = (state, { match: { params } }) => {
-  const joinAllowedOptions = formValueSelector('attribute')(state, 'joinRoles') || [];
+  const joinAllowedOptions = getProfileTypeSelectedAttributeJoinRoles(state) || [];
   return {
     mode: getActionModeProfileTypeSelectedAttribute(state) || 'edit',
     attributeCode: params.attributeCode,
@@ -56,7 +58,8 @@ export const mapStateToProps = (state, { match: { params } }) => {
     isIndexable: getProfileTypeSelectedAttributeIndexable(state),
     compositeAttributes: getSelectedCompositeAttributes(state),
     isMonolistCompositeType: getIsMonolistCompositeAttributeType(state),
-    nestedAttributeComposite: formValueSelector('attribute')(state, 'nestedAttribute.type') || '',
+    nestedAttributeComposite: getSelectedAttributeNestedType(state),
+    initialValues: getAttributeSelectFromProfileType(state),
   };
 };
 
@@ -66,7 +69,7 @@ export const mapDispatchToProps = (dispatch, { match: { params }, history }) =>
     dispatch(fetchProfileTypeAttributes());
     dispatch(fetchAttributeFromProfileType('attribute', profileTypeAttributeCode, attributeCode));
   },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('attribute')); },
+  onSave: () => { dispatch(setVisibleModal('')); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: (mode) => {
     dispatch(setVisibleModal(''));
@@ -91,15 +94,16 @@ export const mapDispatchToProps = (dispatch, { match: { params }, history }) =>
     ));
   },
   onAddAttribute: (props) => {
-    const { attributeCode, profileTypeAttributeCode, selectedAttributeType } = props;
+    const {
+      attributeCode, profileTypeAttributeCode, selectedAttributeType, values: { type },
+    } = props;
     dispatch(fetchProfileTypeAttribute(
       profileTypeAttributeCode,
-      attributeCode,
+      type || attributeCode,
       () => history.push(routeConverter(ROUTE_PROFILE_TYPE_ATTRIBUTE_ADD, {
         entityCode: profileTypeAttributeCode,
       })),
       selectedAttributeType,
-      'attribute',
     ));
   },
   onClickDelete: (attributeCode, isMonolistCompositeType) => {
diff --git a/src/ui/profile-types/attributes/monolist/FormContainer.js b/src/ui/profile-types/attributes/monolist/FormContainer.js
index cb279ee48..79bbd3599 100644
--- a/src/ui/profile-types/attributes/monolist/FormContainer.js
+++ b/src/ui/profile-types/attributes/monolist/FormContainer.js
@@ -19,6 +19,8 @@ import {
   getProfileTypeSelectedAttribute,
   getProfileTypeAttributesIdList,
   getSelectedCompositeAttributes,
+  getSelectedAttributeNestedType,
+  getSelectedAttributeNestedIndexable,
 } from 'state/profile-types/selectors';
 import {
   TYPE_COMPOSITE,
@@ -37,13 +39,13 @@ export const mapStateToProps = (state, { match: { params } }) => ({
   mode: getActionModeProfileTypeSelectedAttribute(state),
   attributeCode: params.attributeCode,
   profileTypeCode: params.entityCode,
-  isIndexable: formValueSelector('attribute')(state, 'nestedAttribute.indexable'),
-  type: formValueSelector('attribute')(state, 'nestedAttribute.type'),
-  selectedAttribute: getAttributeSelectFromProfileType(state),
+  isIndexable: getSelectedAttributeNestedIndexable(state),
+  type: getSelectedAttributeNestedType(state),
   selectedAttributeTypeForAddComposite: getProfileTypeSelectedAttribute(state),
   selectedAttributeType: formValueSelector('attribute')(state, 'type'),
   attributesList: getProfileTypeAttributesIdList(state),
   compositeAttributes: getSelectedCompositeAttributes(state),
+  initialValues: getAttributeSelectFromProfileType(state),
 });
 
 export const mapDispatchToProps = (dispatch, { match: { params }, history }) => ({
@@ -62,7 +64,6 @@ export const mapDispatchToProps = (dispatch, { match: { params }, history }) =>
           }))
         ),
         '',
-        'attribute',
       ));
     } else {
       dispatch(fetchAttributeFromProfileType('attribute', profileTypeCode, attributeCode));
@@ -93,7 +94,6 @@ export const mapDispatchToProps = (dispatch, { match: { params }, history }) =>
         entityCode: profileTypeCode,
       })),
       type,
-      'addAttribute',
     ));
   },
   onClickDelete: (attributeCode) => {
diff --git a/src/ui/profile-types/attributes/monolist/MonolistProfilePageContainer.js b/src/ui/profile-types/attributes/monolist/MonolistProfilePageContainer.js
index 171f0e073..8ebe247f5 100644
--- a/src/ui/profile-types/attributes/monolist/MonolistProfilePageContainer.js
+++ b/src/ui/profile-types/attributes/monolist/MonolistProfilePageContainer.js
@@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { formValueSelector } from 'redux-form';
-
 import { fetchAttributeFromProfileType } from 'state/profile-types/actions';
-import { getActionModeProfileTypeSelectedAttribute } from 'state/profile-types/selectors';
+import {
+  getActionModeProfileTypeSelectedAttribute,
+  getSelectedAttributeNestedType,
+  getSelectedAttributeNestedIndexable,
+  getAttributeTypeSelectFromProfileType,
+} from 'state/profile-types/selectors';
 import { MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE } from 'state/profile-types/const';
 
 import MonolistPage from 'ui/profile-types/attributes/monolist/MonolistPage';
@@ -13,9 +16,9 @@ export const mapStateToProps = (state, { match: { params } }) => ({
   attributeCode: params.attributeCode,
   entityCode: params.entityCode,
   profileTypeCode: params.entityCode,
-  isIndexable: formValueSelector('attribute')(state, 'nestedAttribute.indexable'),
-  type: formValueSelector('attribute')(state, 'nestedAttribute.type'),
-  selectedAttribute: formValueSelector('attribute')(state, 'type'),
+  isIndexable: getSelectedAttributeNestedIndexable(state),
+  type: getSelectedAttributeNestedType(state),
+  selectedAttribute: getAttributeTypeSelectFromProfileType(state),
 });
 
 export const mapDispatchToProps = dispatch => ({
diff --git a/src/ui/profile-types/common/ProfileTypeForm.js b/src/ui/profile-types/common/ProfileTypeForm.js
index 6009f07dd..d9498ddd8 100644
--- a/src/ui/profile-types/common/ProfileTypeForm.js
+++ b/src/ui/profile-types/common/ProfileTypeForm.js
@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
+import { Field, withFormik } from 'formik';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { InputGroup, Button, Row, Col } from 'patternfly-react';
-
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 import { required, maxLength } from '@entando/utils';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import AttributeListTable from 'ui/common/attributes/AttributeListTable';
 import DeleteAttributeModalContainer from 'ui/profile-types/attributes/DeleteAttributeModalContainer';
@@ -26,15 +26,15 @@ export class ProfileTypeFormBody extends Component {
   render() {
     const {
       attributesType, mode, handleSubmit,
-      onAddAttribute, invalid, submitting,
-      profileTypeCode, attributeCode, intl,
-      dirty, onCancel, onDiscard, onSave,
+      onAddAttribute, isValid, isSubmitting,
+      profileTypeCode, values, intl,
+      isDirty, onCancel, onDiscard, onSave,
     } = this.props;
 
     const isEdit = mode === 'edit';
 
     const handleCancelClick = () => {
-      if (dirty) {
+      if (isDirty) {
         onCancel();
       } else {
         onDiscard();
@@ -84,7 +84,7 @@ export class ProfileTypeFormBody extends Component {
                   className="pull-right ProfileTypeForm__add"
                   bsStyle="primary"
                   onClick={() => onAddAttribute(this.props)}
-                  disabled={invalid || submitting || !attributeCode}
+                  disabled={!isValid || isSubmitting || !values.type}
                 >
                   <FormattedMessage
                     id="app.add"
@@ -116,7 +116,12 @@ export class ProfileTypeFormBody extends Component {
                 label={
                   <FormLabel labelId="app.code" helpId="app.add.attribute.code" required />
                 }
-                validate={[required, uppercaseThreeLetters]}
+                validate={value =>
+                  convertReduxValidationsToFormikValidations(
+                    value,
+                    [required, uppercaseThreeLetters],
+                  )
+                }
                 disabled={isEdit}
               />
               <Field
@@ -125,7 +130,12 @@ export class ProfileTypeFormBody extends Component {
                 label={
                   <FormLabel labelId="app.name" helpId="app.help.name" required />
                  }
-                validate={[required, maxLength50]}
+                validate={
+                  value => convertReduxValidationsToFormikValidations(
+                    value,
+                    [required, maxLength50],
+                  )
+                }
               />
               {renderSelectOption()}
               {renderAttributeTable()}
@@ -137,8 +147,8 @@ export class ProfileTypeFormBody extends Component {
           <Col xs={12}>
             <ConfirmCancelModalContainer
               contentText={intl.formatMessage({ id: 'app.confirmCancel' })}
-              invalid={invalid}
-              submitting={submitting}
+              invalid={!isValid}
+              submitting={isSubmitting}
               onSave={onSave}
               onDiscard={onDiscard}
             />
@@ -146,7 +156,7 @@ export class ProfileTypeFormBody extends Component {
               className="pull-right ProfileTypeForm__save-btn"
               type="submit"
               bsStyle="primary"
-              disabled={invalid || submitting}
+              disabled={!isValid || isSubmitting}
             >
               <FormattedMessage id="app.save" />
             </Button>
@@ -172,30 +182,43 @@ ProfileTypeFormBody.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   onAddAttribute: PropTypes.func,
   attributesType: PropTypes.arrayOf(PropTypes.string).isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   mode: PropTypes.string,
   profileTypeCode: PropTypes.string,
   attributeCode: PropTypes.string,
-  dirty: PropTypes.bool,
+  isDirty: PropTypes.bool,
   onSave: PropTypes.func.isRequired,
   onDiscard: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  values: PropTypes.shape({
+    type: PropTypes.shape({
+      code: PropTypes.string,
+    }),
+  }).isRequired,
 };
 
 ProfileTypeFormBody.defaultProps = {
   onWillMount: () => {},
   onAddAttribute: () => {},
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isSubmitting: false,
   mode: 'add',
   profileTypeCode: '',
   attributeCode: '',
-  dirty: false,
+  isDirty: false,
 };
 
-const ProfileTypeForm = injectIntl(reduxForm({
-  form: 'ProfileType',
+const ProfileTypeForm = injectIntl(withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => ({
+    ...initialValues,
+    code: (initialValues && initialValues.code) || '',
+    name: (initialValues && initialValues.name) || '',
+  }),
+  handleSubmit: (values, { props: { onSubmit } }) => {
+    onSubmit(values);
+  },
 })(ProfileTypeFormBody));
 
 export default ProfileTypeForm;
diff --git a/src/ui/profile-types/edit/EditFormContainer.js b/src/ui/profile-types/edit/EditFormContainer.js
index f1658e232..c4e5de156 100644
--- a/src/ui/profile-types/edit/EditFormContainer.js
+++ b/src/ui/profile-types/edit/EditFormContainer.js
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
-import { formValueSelector, submit } from 'redux-form';
 
 import {
   fetchProfileTypeAttributes, sendPutProfileType, fetchProfileType,
@@ -13,7 +12,7 @@ import {
 import {
   getSelectedProfileTypeAttributes,
   getProfileTypeAttributesIdList,
-
+  getSelectedProfileType,
 } from 'state/profile-types/selectors';
 import { setVisibleModal, setInfo } from 'state/modal/actions';
 import { MODAL_ID } from 'ui/profile-types/attributes/DeleteAttributeModal';
@@ -33,8 +32,8 @@ export const mapStateToProps = (state, { match: { params } }) => (
     profileTypeCode: params.profiletypeCode,
     attributes: getSelectedProfileTypeAttributes(state),
     attributesType: getProfileTypeAttributesIdList(state),
-    attributeCode: formValueSelector('ProfileType')(state, 'type'),
     routeToEdit: ROUTE_PROFILE_TYPE_ATTRIBUTE_EDIT,
+    initialValues: getSelectedProfileType(state),
   }
 );
 
@@ -44,8 +43,8 @@ export const mapDispatchToProps = dispatch => ({
     dispatch(fetchProfileType(profileTypeCode));
     dispatch(fetchProfileTypeAttributes());
   },
-  onAddAttribute: ({ attributeCode, profileTypeCode }) => {
-    dispatch(fetchProfileTypeAttribute(profileTypeCode, attributeCode, () => (
+  onAddAttribute: ({ values, profileTypeCode }) => {
+    dispatch(fetchProfileTypeAttribute(profileTypeCode, values.type, () => (
       history.push(routeConverter(
         ROUTE_PROFILE_TYPE_ATTRIBUTE_ADD,
         { entityCode: profileTypeCode },
@@ -65,7 +64,7 @@ export const mapDispatchToProps = dispatch => ({
   onSubmit: (values) => {
     dispatch(sendPutProfileType(values));
   },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('ProfileType')); },
+  onSave: () => { dispatch(setVisibleModal('')); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_PROFILE_TYPE_LIST)); },
 });
diff --git a/src/ui/roles/add/AddFormContainer.js b/src/ui/roles/add/AddFormContainer.js
index 58177bb0e..c8ec58e80 100644
--- a/src/ui/roles/add/AddFormContainer.js
+++ b/src/ui/roles/add/AddFormContainer.js
@@ -1,7 +1,8 @@
-import { connect } from 'react-redux';
-import { change, formValueSelector, submit } from 'redux-form';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+
 import { routeConverter } from '@entando/utils';
-import { withRouter } from 'react-router-dom';
 
 import { sendPostRole } from 'state/roles/actions';
 import { fetchPermissions } from 'state/permissions/actions';
@@ -13,36 +14,47 @@ import { ROUTE_ROLE_LIST } from 'app-init/router';
 
 import RoleForm from 'ui/roles/common/RoleForm';
 
+const AddFormContainer = () => {
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const permissions = useSelector(getPermissionsList);
+  const loading = useSelector(getLoading);
 
-export const mapStateToProps = state => ({
-  permissions: getPermissionsList(state),
-  loading: getLoading(state).permissions,
-  superuserToggled: formValueSelector('role')(state, 'permissions.superuser') || false,
-});
-
-export const mapDispatchToProps = (dispatch, { history }) => ({
-  onWillMount: () => {
+  const handleMount = useCallback(() => {
     dispatch(fetchPermissions());
-  },
-  onSubmit: values => dispatch(sendPostRole(values)),
-  onToggleSuperuser: ({ superuserToggled, permissions }) => {
-    if (superuserToggled) {
-      permissions.forEach((permission) => {
-        if (permission.code !== 'superuser') {
-          dispatch(change('role', `permissions.${permission.code}`, true));
-        }
-      });
-    }
-  },
-  onChangeName: name =>
-    dispatch(change('role', 'code', name.replace(/\W/g, '_').toLowerCase())),
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('role')); },
-  onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
-  onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_ROLE_LIST)); },
-});
-
-const AddFormContainer = connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(RoleForm);
-
-export default withRouter(AddFormContainer);
+  }, [dispatch]);
+
+  const handleSubmit = useCallback((values) => {
+    dispatch(setVisibleModal(''));
+    dispatch(sendPostRole(values));
+  }, [dispatch]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(setVisibleModal(ConfirmCancelModalID));
+  }, [dispatch]);
+
+  const handleDiscard = useCallback(() => {
+    dispatch(setVisibleModal(''));
+    history.push(routeConverter(ROUTE_ROLE_LIST));
+  }, [dispatch, history]);
+
+  const initialValues = useMemo(() => ({
+    code: '',
+    name: '',
+    permissions: permissions.reduce((acc, perm) => ({
+      [perm.code]: false,
+    }), {}),
+  }), [permissions]);
+
+  return (<RoleForm
+    onMount={handleMount}
+    onSubmit={handleSubmit}
+    onCancel={handleCancel}
+    onDiscard={handleDiscard}
+    permissions={permissions}
+    loading={loading.permissions}
+    initialValues={initialValues}
+  />);
+};
+
+export default AddFormContainer;
diff --git a/src/ui/roles/common/PermissionGrid.js b/src/ui/roles/common/PermissionGrid.js
index 731d69bed..cbce3afbc 100644
--- a/src/ui/roles/common/PermissionGrid.js
+++ b/src/ui/roles/common/PermissionGrid.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
 import { Col, Alert, Spinner } from 'patternfly-react';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import SwitchInput from 'ui/common/formik-field/SwitchInput';
 
 const PermissionGrid = ({
   permissions,
@@ -25,7 +25,7 @@ const PermissionGrid = ({
                 </label>
                 <Col xs={1}>
                   <Field
-                    component={SwitchRenderer}
+                    component={SwitchInput}
                     name={`permissions.${permission.code}`}
                     disabled={superuserToggled && !isSuperuser}
                     {...extraProps}
@@ -61,13 +61,14 @@ PermissionGrid.propTypes = {
     descr: PropTypes.string.isRequired,
   })),
   onToggleSuperuser: PropTypes.func.isRequired,
-  superuserToggled: PropTypes.bool.isRequired,
+  superuserToggled: PropTypes.bool,
   loading: PropTypes.bool,
 };
 
 PermissionGrid.defaultProps = {
   permissions: [],
   loading: false,
+  superuserToggled: false,
 };
 
 export default PermissionGrid;
diff --git a/src/ui/roles/common/RoleForm.js b/src/ui/roles/common/RoleForm.js
index 00789cdbc..87b6263e3 100644
--- a/src/ui/roles/common/RoleForm.js
+++ b/src/ui/roles/common/RoleForm.js
@@ -1,18 +1,16 @@
-import React, { Component } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
+import { withFormik, Form, Field } from 'formik';
+import * as Yup from 'yup';
 import { Button, Row, Col } from 'patternfly-react';
-import { required, maxLength, code } from '@entando/utils';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import { validateCodeField } from 'helpers/formikValidations';
 import FormLabel from 'ui/common/form/FormLabel';
 import PermissionGrid from 'ui/roles/common/PermissionGrid';
 import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 import { TEST_ID_ROLE_FORM } from 'ui/test-const/role-test-const';
 
-export const maxLength50 = maxLength(50);
-export const maxLength20 = maxLength(20);
-
 const EDIT_MODE = 'edit';
 const NEW_MODE = 'new';
 
@@ -27,154 +25,199 @@ const msgs = defineMessages({
   },
 });
 
-export class RoleFormBody extends Component {
-  constructor(props) {
-    super(props);
-    this.handleToggleSuperuser = this.handleToggleSuperuser.bind(this);
-  }
-  componentWillMount() {
-    this.props.onWillMount(this.props);
-  }
-
-  onSubmit = (ev) => {
-    ev.preventDefault();
-    this.props.handleSubmit();
-  };
+export const RoleFormBody = ({
+  onMount,
+  submitForm,
+  permissions,
+  onDiscard,
+  onCancel,
+  intl,
+  dirty,
+  isValid,
+  mode,
+  loading,
+  roleCode,
+  isSubmitting,
+  values,
+  setFieldValue,
+  handleChange,
+}) => {
+  const invalid = !isValid;
+  const isEdit = mode === EDIT_MODE;
+  const superuserToggled = values.permissions ? values.permissions.superuser : false;
 
-  handleToggleSuperuser(superuserToggled) {
-    const { onToggleSuperuser, permissions } = this.props;
-    onToggleSuperuser({ superuserToggled, permissions });
-  }
+  useEffect(() => {
+    onMount(roleCode);
+  }, [roleCode, onMount]);
 
-  render() {
-    const {
-      intl, invalid, submitting, mode, onChangeName, permissions, loading, superuserToggled,
-      dirty, onCancel, onDiscard, onSave,
-    } = this.props;
+  const handleCancelClick = () => {
+    if (dirty) {
+      onCancel();
+    } else {
+      onDiscard();
+    }
+  };
 
-    const isEdit = mode === EDIT_MODE;
+  const onToggleSuperuser = useCallback(() => {
+    if (!superuserToggled) {
+      permissions.forEach((permission) => {
+        if (permission.code !== 'superuser') {
+          setFieldValue(`permissions.${permission.code}`, false);
+        }
+      });
+    }
+  }, [superuserToggled, permissions, setFieldValue]);
 
-    const handleCancelClick = () => {
-      if (dirty) {
-        onCancel();
-      } else {
-        onDiscard();
-      }
-    };
+  const onChangeName = useCallback((e) => {
+    handleChange(e);
+    if (mode === NEW_MODE) {
+      setFieldValue('code', e.target.value.replace(/\W/g, '_').toLowerCase());
+    }
+  }, [handleChange, mode, setFieldValue]);
 
-    return (
-      <form onSubmit={this.onSubmit} className="RoleForm form-horizontal">
-        <Row>
-          <Col xs={12}>
-            <fieldset className="no-padding">
-              <legend>
-                <div className="RoleForm__required-fields text-right">
-                  * <FormattedMessage id="app.fieldsRequired" />
-                </div>
-              </legend>
-              <Field
-                component={RenderTextInput}
-                name="name"
-                label={<FormLabel labelId="app.name" helpId="role.name.help" required />}
-                placeholder={intl.formatMessage(msgs.appName)}
-                validate={[required, maxLength50]}
-                onChange={(ev) => { if (onChangeName) onChangeName(ev.currentTarget.value); }}
-              />
-              <Field
-                component={RenderTextInput}
-                name="code"
-                label={<FormLabel labelId="app.code" helpId="role.code.help" required />}
-                placeholder={intl.formatMessage(msgs.appCode)}
-                validate={[required, maxLength20, code]}
-                disabled={isEdit}
-              />
-            </fieldset>
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={12}>
-            <fieldset className="no-padding">
-              <legend>
-                <div className="RoleForm__permissions">
-                  <FormattedMessage id="app.permissions" />
-                </div>
-              </legend>
-              <PermissionGrid
-                permissions={permissions}
-                loading={loading}
-                onToggleSuperuser={this.handleToggleSuperuser}
-                superuserToggled={superuserToggled}
-              />
-            </fieldset>
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={12}>
-            <ConfirmCancelModalContainer
-              contentText={intl.formatMessage({ id: 'app.confirmCancel' })}
-              invalid={invalid}
-              submitting={submitting}
-              onSave={onSave}
-              onDiscard={onDiscard}
+  return (
+    <Form className="RoleForm form-horizontal">
+      <Row>
+        <Col xs={12}>
+          <fieldset className="no-padding">
+            <legend>
+              <div className="RoleForm__required-fields text-right">
+                * <FormattedMessage id="app.fieldsRequired" />
+              </div>
+            </legend>
+            <Field
+              component={RenderTextInput}
+              name="name"
+              label={<FormLabel labelId="app.name" helpId="role.name.help" required />}
+              placeholder={intl.formatMessage(msgs.appName)}
+              onKeyUp={onChangeName}
+              restProps={{
+                onChange: onChangeName,
+              }}
             />
-            <Button
-              className="pull-right"
-              type="submit"
-              bsStyle="primary"
-              data-testid={TEST_ID_ROLE_FORM.SAVE_BUTTON}
-              disabled={invalid || submitting}
-            >
-              <FormattedMessage id="app.save" />
-            </Button>
-            <Button
-              className="pull-right UserForm__action-button"
-              bsStyle="default"
-              data-testid={TEST_ID_ROLE_FORM.CANCEL_BUTTON}
-              onClick={handleCancelClick}
-            >
-              <FormattedMessage id="app.cancel" />
-            </Button>
-          </Col>
-        </Row>
-      </form>
-    );
-  }
-}
+            <Field
+              component={RenderTextInput}
+              name="code"
+              label={<FormLabel labelId="app.code" helpId="role.code.help" required />}
+              placeholder={intl.formatMessage(msgs.appCode)}
+              disabled={isEdit}
+            />
+          </fieldset>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <fieldset className="no-padding">
+            <legend>
+              <div className="RoleForm__permissions">
+                <FormattedMessage id="app.permissions" />
+              </div>
+            </legend>
+            <PermissionGrid
+              permissions={permissions}
+              loading={loading}
+              onToggleSuperuser={onToggleSuperuser}
+              superuserToggled={superuserToggled}
+            />
+          </fieldset>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <ConfirmCancelModalContainer
+            contentText={intl.formatMessage({ id: 'app.confirmCancel' })}
+            invalid={invalid}
+            submitting={isSubmitting}
+            onSave={submitForm}
+            onDiscard={onDiscard}
+          />
+          <Button
+            className="pull-right"
+            type="submit"
+            bsStyle="primary"
+            data-testid={TEST_ID_ROLE_FORM.SAVE_BUTTON}
+            disabled={invalid || isSubmitting}
+          >
+            <FormattedMessage id="app.save" />
+          </Button>
+          <Button
+            className="pull-right UserForm__action-button"
+            bsStyle="default"
+            data-testid={TEST_ID_ROLE_FORM.CANCEL_BUTTON}
+            onClick={handleCancelClick}
+          >
+            <FormattedMessage id="app.cancel" />
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
 
 RoleFormBody.propTypes = {
   intl: intlShape.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
+  submitForm: PropTypes.func.isRequired,
   mode: PropTypes.string,
-  onChangeName: PropTypes.func,
-  onWillMount: PropTypes.func,
-  onToggleSuperuser: PropTypes.func.isRequired,
-  superuserToggled: PropTypes.bool.isRequired,
+  onMount: PropTypes.func,
   permissions: PropTypes.arrayOf(PropTypes.shape({
     descr: PropTypes.string.isRequired,
     code: PropTypes.string.isRequired,
   })),
   loading: PropTypes.bool,
   dirty: PropTypes.bool,
-  onSave: PropTypes.func.isRequired,
   onDiscard: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  roleCode: PropTypes.string,
+  values: PropTypes.shape({
+    code: PropTypes.string,
+    name: PropTypes.string,
+    permissions: PropTypes.shape({
+      superuser: PropTypes.bool,
+    }),
+  }).isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  handleChange: PropTypes.func.isRequired,
 };
 
 RoleFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isSubmitting: false,
   mode: NEW_MODE,
-  onChangeName: null,
-  onWillMount: null,
+  onMount: null,
   permissions: [],
   loading: false,
   dirty: false,
+  roleCode: null,
 };
 
-const RoleForm = reduxForm({
-  form: 'role',
+const RoleForm = withFormik({
+  enableReinitialize: true,
+  validateOnMount: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  validationSchema: ({ intl }) => (
+    Yup.object().shape({
+      name: Yup.string()
+        .required(<FormattedMessage id="validateForm.required" />)
+        .max(50, <FormattedMessage id="validateForm.maxLength" values={{ max: 80 }} />),
+      code: Yup.string()
+        .required(<FormattedMessage id="validateForm.required" />)
+        .max(20, <FormattedMessage id="validateForm.maxLength" values={{ max: 20 }} />)
+        .test('validateCodeField', validateCodeField(intl)),
+    })),
+  handleSubmit: (
+    values,
+    {
+      props: { onSubmit },
+      setSubmitting,
+    },
+  ) => {
+    onSubmit(values).then(() => (
+      setSubmitting(false)
+    ));
+  },
+  displayName: 'role',
 })(RoleFormBody);
 
 export default injectIntl(RoleForm);
diff --git a/src/ui/roles/edit/EditFormContainer.js b/src/ui/roles/edit/EditFormContainer.js
index 33154156e..92834d415 100644
--- a/src/ui/roles/edit/EditFormContainer.js
+++ b/src/ui/roles/edit/EditFormContainer.js
@@ -1,7 +1,7 @@
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useRouteMatch } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
-import { change, formValueSelector, submit } from 'redux-form';
 import { sendPutRole, fetchRole } from 'state/roles/actions';
 import { fetchPermissions } from 'state/permissions/actions';
 import { getPermissionsList } from 'state/permissions/selectors';
@@ -11,37 +11,53 @@ import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal'
 import { ROUTE_ROLE_LIST } from 'app-init/router';
 
 import RoleForm from 'ui/roles/common/RoleForm';
+import { getSelectedRole } from 'state/roles/selectors';
 
 export const EDIT_MODE = 'edit';
 
-export const mapStateToProps = (state, { match: { params } }) => ({
-  mode: EDIT_MODE,
-  permissions: getPermissionsList(state),
-  roleCode: params.roleCode,
-  loading: getLoading(state).permissions,
-  superuserToggled: formValueSelector('role')(state, 'permissions.superuser') || false,
-});
+const EditFormContainer = () => {
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const permissions = useSelector(getPermissionsList);
+  const { params } = useRouteMatch();
+  const loading = useSelector(getLoading);
+  const selectedRole = useSelector(getSelectedRole);
 
-export const mapDispatchToProps = (dispatch, { history }) => ({
-  onWillMount: ({ roleCode }) => {
+  const handleMount = useCallback((roleCode) => {
     dispatch(fetchPermissions());
     dispatch(fetchRole(roleCode));
-  },
-  onToggleSuperuser: ({ superuserToggled, permissions }) => {
-    if (superuserToggled) {
-      permissions.forEach((permission) => {
-        if (permission.code !== 'superuser') {
-          dispatch(change('role', `permissions.${permission.code}`, true));
-        }
-      });
-    }
-  },
-  onSubmit: values => dispatch(sendPutRole(values)),
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('role')); },
-  onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
-  onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_ROLE_LIST)); },
-});
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(RoleForm));
+  }, [dispatch]);
+
+  const handleSubmit = useCallback((values) => {
+    dispatch(setVisibleModal(''));
+    dispatch(sendPutRole(values));
+  }, [dispatch]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(setVisibleModal(ConfirmCancelModalID));
+  }, [dispatch]);
+
+  const handleDiscard = useCallback(() => {
+    dispatch(setVisibleModal(''));
+    history.push(routeConverter(ROUTE_ROLE_LIST));
+  }, [dispatch, history]);
+
+  const initialValues = useMemo(() => ({
+    ...selectedRole,
+  }), [selectedRole]);
+
+
+  return (<RoleForm
+    onMount={handleMount}
+    onSubmit={handleSubmit}
+    onCancel={handleCancel}
+    onDiscard={handleDiscard}
+    mode={EDIT_MODE}
+    permissions={permissions}
+    roleCode={params.roleCode}
+    loading={loading.permissions}
+    initialValues={initialValues}
+  />);
+};
+
+export default EditFormContainer;
diff --git a/src/ui/user-profile/common/UserProfileField.js b/src/ui/user-profile/common/UserProfileField.js
index 136be2bdb..550a322a9 100644
--- a/src/ui/user-profile/common/UserProfileField.js
+++ b/src/ui/user-profile/common/UserProfileField.js
@@ -1,16 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { Row, Col } from 'patternfly-react';
 import { FormattedMessage, defineMessages, intlShape } from 'react-intl';
 import { required, minLength, maxLength, minValue, maxValue } from '@entando/utils';
 import Panel from 'react-bootstrap/lib/Panel';
-import { Field, FormSection } from 'redux-form';
+import { Field, FieldArray } from 'formik';
 import RegexParser from 'regex-parser';
-
 import { BOOLEAN_OPTIONS, THREE_STATE_OPTIONS, getTranslatedOptions } from 'ui/users/common/const';
 import { TYPE_BOOLEAN, TYPE_THREESTATE, TYPE_ENUMERATOR, TYPE_ENUMERATOR_MAP } from 'state/data-types/const';
-import { getComponentType } from 'helpers/entities';
+import { getComponentType } from 'helpers/formikEntities';
 import FormLabel from 'ui/common/form/FormLabel';
 
 const readOnlyFields = ['profilepicture'];
@@ -73,44 +72,58 @@ const getEnumeratorOptions = (component, items, separator, mandatory, intl) => {
   }
 };
 
-const userProfileValidators = {};
+export const generateValidatorFunc = (
+  value, validatorFuncName, validatorFunc,
+  validatorArray, parseValueFunc, customErrorId,
+) => {
+  const userProfileValidators = {};
+  if (value === null || value === undefined) {
+    return;
+  }
+  const parsedValue = parseValueFunc ? parseValueFunc(value) : value;
+  if (!userProfileValidators[validatorFuncName]) {
+    userProfileValidators[validatorFuncName] = {};
+  }
+  if (!userProfileValidators[validatorFuncName][value]) {
+    userProfileValidators[validatorFuncName] = {
+      ...userProfileValidators[validatorFuncName],
+      [value]: validatorFunc(parsedValue, customErrorId),
+    };
+  }
+  validatorArray.push(userProfileValidators[validatorFuncName][value]);
+};
 
-const UserProfileField = ({ attribute, intl }) => {
+export const UserProfileField = ({
+  attribute, intl, setFieldValue, disabled,
+}) => {
   const { validationRules } = attribute || {};
   const {
     minLength: textMinLen, maxLength: textMaxLen, regex, rangeEndNumber, rangeStartNumber,
   } = validationRules || {};
 
-  const generateValidatorFunc = (
-    value, validatorFuncName, validatorFunc,
-    validatorArray, parseValueFunc, customErrorId,
-  ) => {
-    if (value === null || value === undefined) {
-      return;
-    }
-    const parsedValue = parseValueFunc ? parseValueFunc(value) : value;
-    if (!userProfileValidators[validatorFuncName]) {
-      userProfileValidators[validatorFuncName] = {};
-    }
-    if (!userProfileValidators[validatorFuncName][value]) {
-      userProfileValidators[validatorFuncName] = {
-        ...userProfileValidators[validatorFuncName],
-        [value]: validatorFunc(parsedValue, customErrorId),
-      };
-    }
-    validatorArray.push(userProfileValidators[validatorFuncName][value]);
+  const vArray = useMemo(() => {
+    const validateArray = [...(attribute.mandatory ? [required] : [])];
+    generateValidatorFunc(textMinLen, 'minLength', minLength, validateArray);
+    generateValidatorFunc(textMaxLen, 'maxLength', maxLength, validateArray);
+    generateValidatorFunc(
+      regex, 'regex', matchRegex, validateArray, RegexParser,
+      attribute.type === 'Email' && 'validateForm.email',
+    );
+    generateValidatorFunc(rangeEndNumber, 'rangeEndNumber', maxValue, validateArray);
+    generateValidatorFunc(rangeStartNumber, 'rangeStartNumber', minValue, validateArray);
+    return validateArray;
+  }, [attribute.mandatory, attribute.type, rangeEndNumber, rangeStartNumber,
+    regex, textMaxLen, textMinLen]);
+
+  const validationFunc = (value, validationFuncList) => {
+    let validation = null;
+    validationFuncList.forEach((func) => {
+      const validate = func(value);
+      if (validate) validation = validate;
+    });
+    return validation;
   };
 
-  const validateArray = [...(attribute.mandatory ? [required] : [])];
-  generateValidatorFunc(textMinLen, 'minLength', minLength, validateArray);
-  generateValidatorFunc(textMaxLen, 'maxLength', maxLength, validateArray);
-  generateValidatorFunc(
-    regex, 'regex', matchRegex, validateArray, RegexParser,
-    attribute.type === 'Email' && 'validateForm.email',
-  );
-  generateValidatorFunc(rangeEndNumber, 'rangeEndNumber', maxValue, validateArray);
-  generateValidatorFunc(rangeStartNumber, 'rangeStartNumber', minValue, validateArray);
-
   return (<Field
     component={getComponentType(attribute.type)}
     name={attribute.code}
@@ -130,9 +143,11 @@ const UserProfileField = ({ attribute, intl }) => {
       helpText={getHelpMessage(attribute.validationRules, intl)}
       required={attribute.mandatory}
     />}
-    validate={validateArray}
+    validate={value => validationFunc(value, vArray)}
     readOnly={readOnlyFields.includes(attribute.code)}
     data-testid={`UserProfileForm__${attribute.code}Field`}
+    onPickDate={value => setFieldValue(attribute.code, value)}
+    disabled={disabled}
   />);
 };
 
@@ -154,6 +169,12 @@ const basicAttributeShape = PropTypes.shape({
 UserProfileField.propTypes = {
   attribute: basicAttributeShape.isRequired,
   intl: intlShape.isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+UserProfileField.defaultProps = {
+  disabled: false,
 };
 
 export const CompositeField = ({
@@ -179,11 +200,11 @@ export const CompositeField = ({
       )}
       <Col xs={noLabel ? 12 : 10}>
         {renderWithPanel((
-          <FormSection name={compositeFieldName}>
-            {attribute.compositeAttributes.map(attr => (
+          <FieldArray name={compositeFieldName}>
+            { attribute.compositeAttributes.map(attr => (
               <UserProfileField key={`${compositeFieldName}.${attr.code}`} attribute={attr} intl={intl} />
             ))}
-          </FormSection>
+          </FieldArray>
         ))}
       </Col>
     </Row>
@@ -221,5 +242,3 @@ CompositeField.defaultProps = {
   fieldName: '',
   noLabel: false,
 };
-
-export default UserProfileField;
diff --git a/src/ui/user-profile/common/UserProfileForm.js b/src/ui/user-profile/common/UserProfileForm.js
index d3d9d0289..8ba4d28f5 100644
--- a/src/ui/user-profile/common/UserProfileForm.js
+++ b/src/ui/user-profile/common/UserProfileForm.js
@@ -1,22 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { reduxForm, Field, FieldArray } from 'redux-form';
 import { Button, Row, Col, FormGroup } from 'patternfly-react';
 import { required } from '@entando/utils';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import UserProfileField, { CompositeField } from 'ui/user-profile/common/UserProfileField';
-
+import { UserProfileField, CompositeField } from 'ui/user-profile/common/UserProfileField';
 import FormLabel from 'ui/common/form/FormLabel';
-import RenderListField from 'ui/common/form/RenderListField';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderListField from 'ui/common/formik-field/RenderListField';
 import { BOOLEAN_OPTIONS, THREE_STATE_OPTIONS, getTranslatedOptions } from 'ui/users/common/const';
 import {
   TYPE_BOOLEAN, TYPE_THREESTATE, TYPE_ENUMERATOR, TYPE_ENUMERATOR_MAP, TYPE_MONOLIST, TYPE_LIST,
   TYPE_COMPOSITE,
 } from 'state/data-types/const';
 import { TEST_ID_USER_PROFILE_FORM } from 'ui/test-const/user-test-const';
+import { withFormik, Field, FieldArray } from 'formik';
+import SelectInput from 'ui/common/formik-field/SelectInput';
+import { RenderTextInputBody } from 'ui/common/formik-field/RenderTextInput';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
 export const matchRegex = (regex, customErrorId) => val => ((val && regex && !regex.test(val)) ?
   (<FormattedMessage id={customErrorId || 'validateForm.regex'} values={{ regex }} />) : undefined);
@@ -76,46 +76,45 @@ const getHelpMessage = (validationRules, intl) => {
   return null;
 };
 export class UserProfileFormBody extends Component {
-  componentWillMount() {
-    this.props.onWillMount(this.props);
-  }
-
-  componentWillUnmount() {
-    this.props.onWillUnmount();
+  componentDidMount() {
+    this.props.onDidMount(this.props);
   }
 
   render() {
     const {
-      onSubmit, handleSubmit, invalid, submitting, defaultLanguage, languages,
-      profileTypesAttributes, intl, profileTypes, onProfileTypeChange,
+      handleSubmit, isValid, isSubmitting, defaultLanguage, languages,
+      profileTypesAttributes, intl, profileTypes, onProfileTypeChange, setFieldValue,
     } = this.props;
-
-    const renderFieldArray = (attributeCode, attribute, component, language) => (<FieldArray
+    const renderFieldArray = (attributeCode, attribute, renderComponent, language) => (<FieldArray
       key={attributeCode}
-      component={component}
-      attributeType={attribute.nestedAttribute.type}
-      nestedAttribute={attribute.nestedAttribute}
       name={attributeCode}
       rows={3}
-      toggleElement={getComponentOptions(attribute.type, intl)}
-      options={getEnumeratorOptions(
+      render={arrayHelpers => renderComponent({
+          ...arrayHelpers,
+          attributeType: attribute.nestedAttribute.type,
+          nestedAttribute: attribute.nestedAttribute,
+          toggleElement: getComponentOptions(attribute.type, intl),
+          options: getEnumeratorOptions(
             attribute.nestedAttribute.type,
             attribute.nestedAttribute.enumeratorStaticItems,
             attribute.nestedAttribute.enumeratorStaticItemsSeparator,
             attribute.nestedAttribute.mandatory,
             intl,
-          )}
-      optionValue="value"
-      optionDisplayName="optionDisplayName"
-      label={<FormLabel
-        labelText={language ? `${attribute.name} (${language.name})` : attribute.name}
-        helpText={getHelpMessage(attribute.validationRules, intl)}
-        required={attribute.mandatory}
-      />}
-      defaultLanguage={defaultLanguage}
-      languages={languages}
-      intl={intl}
-      language={language && language.code}
+          ),
+          optionValue: 'value',
+          optionDisplayName: 'optionDisplayName',
+          label: <FormLabel
+            labelText={language ? `${attribute.name} (${language.name})` : attribute.name}
+            helpText={getHelpMessage(attribute.validationRules, intl)}
+            required={attribute.mandatory}
+          />,
+          defaultLanguage,
+          languages,
+          intl,
+          language: language && language.code,
+        })
+      }
+
     />);
 
     const showProfileFields = (
@@ -132,7 +131,7 @@ export class UserProfileFormBody extends Component {
         if (attribute.type === TYPE_LIST) {
           return languages.map(lang => (
             <div key={lang.code}>
-              {renderFieldArray(`${attribute.code}.${lang.code}`, attribute, RenderListField, lang)}
+              {renderFieldArray(`${attribute.code}.${lang.code}`, attribute, props => <RenderListField {...props} />, lang)}
             </div>
           ));
         }
@@ -140,12 +139,24 @@ export class UserProfileFormBody extends Component {
           return (
             <Row key={attribute.code}>
               <Col xs={12}>
-                {renderFieldArray(attribute.code, attribute, RenderListField)}
+                {
+                  renderFieldArray(
+                    attribute.code,
+                    attribute,
+                    props => <RenderListField {...props} />,
+                  )
+                }
               </Col>
             </Row>
           );
         }
-        return <UserProfileField key={attribute.name} attribute={attribute} intl={intl} />;
+        return (
+          <UserProfileField
+            key={attribute.name}
+            attribute={attribute}
+            intl={intl}
+            setFieldValue={setFieldValue}
+          />);
       })
     );
 
@@ -154,14 +165,13 @@ export class UserProfileFormBody extends Component {
         <Col xs={12}>
           <fieldset className="no-padding">
             <Field
-              component="input"
+              as="input"
               type="hidden"
               name="typeCode"
               disabled
               label={<FormLabel
                 labelId="userProfile.typeCode"
               />}
-              validate={[required]}
             />
           </fieldset>
         </Col>
@@ -174,7 +184,7 @@ export class UserProfileFormBody extends Component {
           <fieldset className="no-padding">
             <Field
               key="id"
-              component={RenderTextInput}
+              component={RenderTextInputBody}
               name="id"
               disabled
               label={<FormLabel
@@ -188,19 +198,19 @@ export class UserProfileFormBody extends Component {
     );
 
     return (
-      <form onSubmit={handleSubmit(onSubmit.bind(this))} className="UserForm form-horizontal">
+      <form onSubmit={handleSubmit} className="UserForm form-horizontal" data-testid="UserProfileForm">
         <Row>
           <Col xs={10}>
             <fieldset className="no-padding">
               <div>
                 <Field
-                  component={RenderSelectInput}
-                  onChange={e => onProfileTypeChange(e.target.value, profileTypes)}
+                  component={SelectInput}
+                  onChange={e => onProfileTypeChange(e.target.value, profileTypes, setFieldValue)}
                   options={profileTypes}
                   defaultOptionId="form.select.chooseOne"
                   label={<FormLabel labelId="user.profileType" required />}
                   name="typeCode"
-                  validate={[required]}
+                  validate={value => convertReduxValidationsToFormikValidations(value, [required])}
                 />
               </div>
               <hr />
@@ -217,7 +227,7 @@ export class UserProfileFormBody extends Component {
               className="pull-right"
               type="submit"
               bsStyle="primary"
-              disabled={invalid || submitting}
+              disabled={!isValid || isSubmitting}
               data-testid={TEST_ID_USER_PROFILE_FORM.SAVE_BUTTON}
             >
               <FormattedMessage id="app.save" />
@@ -231,11 +241,10 @@ export class UserProfileFormBody extends Component {
 
 UserProfileFormBody.propTypes = {
   intl: intlShape.isRequired,
-  onWillMount: PropTypes.func,
+  onDidMount: PropTypes.func,
   handleSubmit: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   defaultLanguage: PropTypes.string.isRequired,
   languages: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string,
@@ -268,22 +277,28 @@ UserProfileFormBody.propTypes = {
   })),
   profileTypes: PropTypes.arrayOf(PropTypes.shape({})),
   onProfileTypeChange: PropTypes.func,
-  onWillUnmount: PropTypes.func,
+  setFieldValue: PropTypes.func.isRequired,
+  errors: PropTypes.shape({}).isRequired,
+  values: PropTypes.shape({}).isRequired,
 };
 
 UserProfileFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
-  onWillMount: null,
+  isValid: false,
+  isSubmitting: false,
+  onDidMount: null,
   profileTypesAttributes: [],
   profileTypes: [],
   onProfileTypeChange: () => {},
-  onWillUnmount: () => {},
 };
 
 
-const UserForm = reduxForm({
+const UserForm = withFormik({
   form: 'UserProfile',
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  handleSubmit: (values, { props: { onSubmit } }) => {
+    onSubmit(values);
+  },
 })(UserProfileFormBody);
 
 export default injectIntl(UserForm);
diff --git a/src/ui/user-profile/edit/EditUserProfileFormContainer.js b/src/ui/user-profile/edit/EditUserProfileFormContainer.js
index e73c65037..dbe1c6c94 100644
--- a/src/ui/user-profile/edit/EditUserProfileFormContainer.js
+++ b/src/ui/user-profile/edit/EditUserProfileFormContainer.js
@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { change, formValueSelector, destroy } from 'redux-form';
 import { getUserProfile } from 'state/user-profile/selectors';
 import { fetchLanguages } from 'state/languages/actions';
-import { fetchProfileTypes, fetchProfileType } from 'state/profile-types/actions';
+import { fetchProfileTypes, fetchProfileType, setSelectedProfileType } from 'state/profile-types/actions';
 import { fetchUserProfile, updateUserProfile } from 'state/user-profile/actions';
-import { getSelectedProfileTypeAttributes, getProfileTypesOptions } from 'state/profile-types/selectors';
+import { getSelectedProfileTypeAttributes, getProfileTypesOptions, getSelectedProfileType } from 'state/profile-types/selectors';
 import { getDefaultLanguage, getActiveLanguages } from 'state/languages/selectors';
 import UserProfileForm from 'ui/user-profile/common/UserProfileForm';
+import { getPayloadForForm } from 'helpers/formikEntities';
 
 const EDIT_MODE = 'edit';
 
@@ -20,25 +20,40 @@ export const mapStateToProps = (state, { match: { params } }) => ({
   defaultLanguage: getDefaultLanguage(state),
   languages: getActiveLanguages(state),
   profileTypes: getProfileTypesOptions(state),
-  selectedProfileType: formValueSelector('UserProfile')(state, 'typeCode'),
+  initialValues: getPayloadForForm(
+    params.username, getUserProfile(state),
+    getSelectedProfileTypeAttributes(state),
+    getDefaultLanguage(state),
+    getActiveLanguages(state),
+    getSelectedProfileType(state),
+  ),
 });
 
 export const mapDispatchToProps = dispatch => ({
-  onWillMount: ({ username }) => {
+  onDidMount: ({ username }) => {
     dispatch(fetchProfileTypes({ page: 1, pageSize: 0 }));
     dispatch(fetchLanguages({ page: 1, pageSize: 0 }));
     dispatch(fetchUserProfile(username));
   },
-  onWillUnmount: () => {
-    dispatch(destroy('ProfileType'));
-  },
   onSubmit: (userprofile) => {
-    dispatch(updateUserProfile(userprofile));
+    if (userprofile.typeCode && userprofile.typeCode.length > 0) {
+      dispatch(updateUserProfile(userprofile));
+    }
   },
-  onProfileTypeChange: (newTypeCode, profileTypes) => {
+  onProfileTypeChange: (newTypeCode, profileTypes, setFieldValue) => {
     const profileType = profileTypes.filter(profile => profile.value === newTypeCode)[0] || {};
-    dispatch(change('UserProfile', 'typeDescription', profileType.text));
-    dispatch(fetchProfileType(newTypeCode));
+    if (profileType.value && profileType.value.length > 0) {
+      dispatch(fetchProfileType(profileType.value)).then(() => {
+        setFieldValue('typeCode', profileType.value);
+        setFieldValue('typeDescription', profileType.text);
+      });
+    } else {
+      setFieldValue('typeCode', '');
+      setFieldValue('typeDescription', '');
+      dispatch(setSelectedProfileType({
+        code: '', typeCode: '', typeDescription: '', attributes: [],
+      }));
+    }
   },
 });
 
diff --git a/src/ui/users/add/AddFormContainer.js b/src/ui/users/add/AddFormContainer.js
index 399588b95..95b83b728 100644
--- a/src/ui/users/add/AddFormContainer.js
+++ b/src/ui/users/add/AddFormContainer.js
@@ -1,6 +1,6 @@
-import { connect } from 'react-redux';
-import { destroy, submit } from 'redux-form';
-import { withRouter } from 'react-router-dom';
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
 
 import { fetchProfileTypes } from 'state/profile-types/actions';
@@ -12,26 +12,41 @@ import { ROUTE_USER_LIST } from 'app-init/router';
 
 import UserForm from 'ui/users/common/UserForm';
 
-export const mapStateToProps = state => ({
-  profileTypes: getProfileTypesOptions(state),
-});
-
-export const mapDispatchToProps = (dispatch, { history }) => ({
-  onSubmit: (user) => {
-    const { saveType } = user;
-    dispatch(sendPostUser(user, saveType === 'editProfile'));
-  },
-  onWillMount: () => {
-    dispatch(destroy('user'));
+const AddFormContainer = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const profileTypes = useSelector(getProfileTypesOptions);
+
+  const handleMount = useCallback(() => {
     dispatch(fetchProfileTypes({ page: 1, pageSize: 0 }));
-  },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('user')); },
-  onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
-  onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_USER_LIST)); },
-});
+  }, [dispatch]);
+
+  const handleSubmit = useCallback((user, submitType) =>
+    dispatch(sendPostUser(user, submitType === 'saveAndEditProfile')), [dispatch]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(setVisibleModal(ConfirmCancelModalID));
+  }, [dispatch]);
+
+  const handleDiscard = useCallback(() => {
+    dispatch(setVisibleModal(''));
+    history.push(routeConverter(ROUTE_USER_LIST));
+  }, [dispatch, history]);
+
+  const handleModalSave = useCallback(() => {
+    dispatch(setVisibleModal(''));
+  }, [dispatch]);
 
-const AddFormContainer = connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(UserForm);
+  return (
+    <UserForm
+      profileTypes={profileTypes}
+      onMount={handleMount}
+      onSubmit={handleSubmit}
+      onCancel={handleCancel}
+      onDiscard={handleDiscard}
+      onModalSave={handleModalSave}
+    />
+  );
+};
 
-export default withRouter(AddFormContainer);
+export default AddFormContainer;
diff --git a/src/ui/users/authority/UserAuthorityTable.js b/src/ui/users/authority/UserAuthorityTable.js
index d6075fd10..ed332d658 100644
--- a/src/ui/users/authority/UserAuthorityTable.js
+++ b/src/ui/users/authority/UserAuthorityTable.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Row, Col, Button, Alert } from 'patternfly-react';
@@ -13,42 +13,33 @@ const msgs = defineMessages({
   },
 });
 
-class UserAuthorityTable extends Component {
-  constructor(props) {
-    super(props);
-    this.onClickAdd = this.onClickAdd.bind(this);
-    this.group = null;
-    this.role = null;
-  }
+const UserAuthorityTable = ({
+  push, remove,
+  groupRolesCombo, onCloseModal,
+  intl, groups, roles, onAddNewClicked,
+  onNewAuthAdded,
+}) => {
+  const setGroupRef = useRef(null);
+  const setRoleRef = useRef(null);
 
-  onClickAdd() {
-    const { fields, groupRolesCombo, onCloseModal } = this.props;
+  const onClickAdd = () => {
+    const group = setGroupRef.current;
+    const role = setRoleRef.current;
     const isPresent = Boolean(groupRolesCombo
-      .find(item => (item.group.code === this.group.value ||
-        (!this.group.value && !item.group.code))
-        &&
-        (item.role.code === this.role.value ||
-          (!this.role.value && !item.role.code))));
-
-    if (!isPresent && (this.group.value || this.role.value)) {
-      fields.push({
-        group: this.group.value || null,
-        role: this.role.value || null,
+      .find(item => (group.value === '' || item.group.code === group.value) &&
+        (role.value === '' || item.role.code === role.value)));
+    if (!isPresent) {
+      push({
+        group: group.value || null,
+        role: role.value || null,
       });
+      onNewAuthAdded({ group: group.value, role: role.value });
     }
     onCloseModal();
-  }
-
-  setGroupRef = (group) => {
-    this.group = group;
-  }
+  };
 
-  setRoleRef = (role) => {
-    this.role = role;
-  }
-
-  renderTable(renderRow) {
-    if (this.props.groupRolesCombo.length === 0) {
+  const renderTable = (renderRow) => {
+    if (groupRolesCombo.length === 0) {
       return (
         <div>
           <Alert type="info">
@@ -78,65 +69,60 @@ class UserAuthorityTable extends Component {
         </tbody>
       </table>
     );
-  }
+  };
 
-  render() {
-    const {
-      intl, groupRolesCombo, groups, roles, fields, onAddNewClicked,
-    } = this.props;
-    const groupsWithEmpty =
-      [{ code: '', name: intl.formatMessage(msgs.chooseOption) }].concat(groups);
-    const rolesWithEmpty =
-      [{ code: '', name: intl.formatMessage(msgs.chooseOption) }].concat(roles);
-    const groupOptions =
+  const groupsWithEmpty =
+        [{ code: '', name: intl.formatMessage(msgs.chooseOption) }].concat(groups);
+  const rolesWithEmpty =
+        [{ code: '', name: intl.formatMessage(msgs.chooseOption) }].concat(roles);
+  const groupOptions =
       groupsWithEmpty.map(gr => (<option key={gr.name} value={gr.code}>{gr.name}</option>));
-    const rolesOptions =
+  const rolesOptions =
       rolesWithEmpty.map(rl => (<option key={rl.name} value={rl.code}>{rl.name}</option>));
 
-    const renderRow = groupRolesCombo.map((item, index) => (
-      <tr key={`groupRole-${parseInt(index, 10)}`}>
-        <td className="UserAuthorityTable__td">{item.group.name || <i className="fa fa-minus" />}</td>
-        <td className="UserAuthorityTable__td text-center">{item.role.name || <i className="fa fa-minus" />}</td>
-        <td className="UserAuthorityTable__td text-center">
+  const renderRow = groupRolesCombo.map((item, index) => (
+    <tr key={`groupRole-${parseInt(index, 10)}`}>
+      <td className="UserAuthorityTable__td">{item.group.name || <i className="fa fa-minus" />}</td>
+      <td className="UserAuthorityTable__td text-center">{item.role.name || <i className="fa fa-minus" />}</td>
+      <td className="UserAuthorityTable__td text-center">
+        <Button
+          bsStyle="link"
+          className="UserAuthorityTable__delete-tag-btn"
+          onClick={() => remove(index)}
+          data-testid={TEST_ID_USER_AUTHORITY_TABLE.DELETE_BUTTON}
+        >
+          <i className="fa fa-trash-o" />
+        </Button>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <div className="UserAuthorityTable" >
+      <Row>
+        <Col xs={12} style={{ paddingBottom: 15 }}>
           <Button
-            bsStyle="link"
-            className="UserAuthorityTable__delete-tag-btn"
-            onClick={() => fields.remove(index)}
-            data-testid={TEST_ID_USER_AUTHORITY_TABLE.DELETE_BUTTON}
+            type="button"
+            bsStyle="primary"
+            className="pull-right UserAuthorityTable__addNew"
+            onClick={onAddNewClicked}
+            data-testid={TEST_ID_USER_AUTHORITY_TABLE.ADD_BUTTON}
           >
-            <i className="fa fa-trash-o" />
+            <FormattedMessage id="user.authority.addNew" defaultMessage="New Authorization" />
           </Button>
-        </td>
-      </tr>
-    ));
-
-    return (
-      <div className="UserAuthorityTable" >
-        <Row>
-          <Col xs={12} style={{ paddingBottom: 15 }}>
-            <Button
-              type="button"
-              bsStyle="primary"
-              className="pull-right UserAuthorityTable__addNew"
-              onClick={onAddNewClicked}
-              data-testid={TEST_ID_USER_AUTHORITY_TABLE.ADD_BUTTON}
-            >
-              <FormattedMessage id="user.authority.addNew" />
-            </Button>
-          </Col>
-        </Row>
-        {this.renderTable(renderRow)}
-        <AddAuthorityModal
-          groupOptions={groupOptions}
-          rolesOptions={rolesOptions}
-          onClickAdd={this.onClickAdd}
-          setGroupRef={this.setGroupRef}
-          setRoleRef={this.setRoleRef}
-        />
-      </div>
-    );
-  }
-}
+        </Col>
+      </Row>
+      {renderTable(renderRow)}
+      <AddAuthorityModal
+        groupOptions={groupOptions}
+        rolesOptions={rolesOptions}
+        onClickAdd={onClickAdd}
+        setGroupRef={setGroupRef}
+        setRoleRef={setRoleRef}
+      />
+    </div>
+  );
+};
 
 UserAuthorityTable.propTypes = {
   intl: intlShape.isRequired,
@@ -148,16 +134,15 @@ UserAuthorityTable.propTypes = {
     name: PropTypes.string,
     code: PropTypes.string,
   })),
-  fields: PropTypes.shape({
-    push: PropTypes.func,
-    remove: PropTypes.func,
-  }).isRequired,
   groupRolesCombo: PropTypes.arrayOf(PropTypes.shape({
     group: PropTypes.shape({ code: PropTypes.string, name: PropTypes.string }),
     role: PropTypes.shape({ code: PropTypes.string, name: PropTypes.string }),
   })),
   onAddNewClicked: PropTypes.func.isRequired,
+  onNewAuthAdded: PropTypes.func.isRequired,
   onCloseModal: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
 };
 
 UserAuthorityTable.defaultProps = {
diff --git a/src/ui/users/common/UserAuthorityPageForm.js b/src/ui/users/common/UserAuthorityPageForm.js
index 9c02acf40..7d0d2ab30 100644
--- a/src/ui/users/common/UserAuthorityPageForm.js
+++ b/src/ui/users/common/UserAuthorityPageForm.js
@@ -1,77 +1,75 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Row, Col, Button, Spinner } from 'patternfly-react';
-import { reduxForm, FieldArray } from 'redux-form';
+import { withFormik, Form } from 'formik';
+import { MultiField } from 'helpers/formikUtils';
+import { makeGroupRolesCombo } from 'state/users/selectors';
+import * as Yup from 'yup';
 import { FormattedMessage } from 'react-intl';
-import { ACTION_SAVE, ACTION_UPDATE } from 'state/users/const';
+import { ACTION_SAVE } from 'state/users/const';
 import UserAuthorityTable from 'ui/users/authority/UserAuthorityTable';
 import { TEST_ID_USER_AUTHORITY_PAGE_FORM } from 'ui/test-const/user-test-const';
 
-export class UserAuthorityPageFormBody extends Component {
-  constructor(props) {
-    super(props);
-    this.group = null;
-    this.role = null;
-  }
+export const UserAuthorityPageFormBody = ({
+  groups, roles, values, loading,
+  groupsMap, rolesMap,
+  onDidMount, isValid, isSubmitting: submitting,
+  onAddNewClicked, onCloseModal, onNewAuthAdded,
+}) => {
+  useEffect(() => {
+    onDidMount();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  componentWillMount() {
-    this.props.onWillMount();
-  }
+  const invalid = !isValid;
+  const groupRolesCombo = makeGroupRolesCombo(values.groupRolesCombo, groupsMap, rolesMap);
 
-  render() {
-    const {
-      invalid, submitting, handleSubmit, onAddNewClicked, onCloseModal,
-    } = this.props;
-
-    return (
-      <Spinner loading={!!this.props.loading}>
-        <form
-          onSubmit={handleSubmit(values => this.props.onSubmit(values, this.props.actionOnSave))}
-          className="UserAuthorityPageForm form-horizontal"
-        >
+  return (
+    <Spinner loading={!!loading}>
+      <Form
+        className="UserAuthorityPageForm form-horizontal"
+      >
+        <Col xs={12}>
+          <Grid fluid>
+            <Row>
+              <Col xs={12}>
+                <MultiField
+                  name="groupRolesCombo"
+                  component={UserAuthorityTable}
+                  groups={groups}
+                  roles={roles}
+                  groupRolesCombo={groupRolesCombo}
+                  onAddNewClicked={onAddNewClicked}
+                  onNewAuthAdded={onNewAuthAdded}
+                  onCloseModal={onCloseModal}
+                />
+              </Col>
+            </Row>
+          </Grid>
           <Col xs={12}>
-            <Grid fluid>
-              <Row>
-                <Col xs={12}>
-                  <FieldArray
-                    name="groupRolesCombo"
-                    component={UserAuthorityTable}
-                    groups={this.props.groups}
-                    roles={this.props.roles}
-                    groupRolesCombo={this.props.groupRolesCombo}
-                    onAddNewClicked={onAddNewClicked}
-                    onCloseModal={onCloseModal}
-                  />
-                </Col>
-              </Row>
-            </Grid>
-            <Col xs={12}>
-              <Button
-                type="submit"
-                bsStyle="primary"
-                className="pull-right"
-                disabled={invalid || submitting}
-                data-testid={TEST_ID_USER_AUTHORITY_PAGE_FORM.SAVE_BUTTON}
-              >
-                <FormattedMessage id="app.save" />
-              </Button>
-            </Col>
+            <Button
+              type="submit"
+              bsStyle="primary"
+              className="pull-right"
+              disabled={invalid || submitting}
+              data-testid={TEST_ID_USER_AUTHORITY_PAGE_FORM.SAVE_BUTTON}
+            >
+              <FormattedMessage id="app.save" />
+            </Button>
           </Col>
-        </form>
-      </Spinner>
-    );
-  }
-}
+        </Col>
+      </Form>
+    </Spinner>
+  );
+};
 
 UserAuthorityPageFormBody.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onWillMount: PropTypes.func.isRequired,
+  onDidMount: PropTypes.func.isRequired,
   onAddNewClicked: PropTypes.func.isRequired,
+  onNewAuthAdded: PropTypes.func.isRequired,
   onCloseModal: PropTypes.func.isRequired,
-  actionOnSave: PropTypes.oneOf([ACTION_SAVE, ACTION_UPDATE]),
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   groups: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     code: PropTypes.string,
@@ -80,26 +78,52 @@ UserAuthorityPageFormBody.propTypes = {
     name: PropTypes.string,
     code: PropTypes.string,
   })),
-  groupRolesCombo: PropTypes.arrayOf(PropTypes.shape({
-    group: PropTypes.shape({ code: PropTypes.string, name: PropTypes.string }),
-    role: PropTypes.shape({ code: PropTypes.string, name: PropTypes.string }),
-  })),
+  groupsMap: PropTypes.shape({}),
+  rolesMap: PropTypes.shape({}),
+  values: PropTypes.shape({
+    groupRolesCombo: PropTypes.arrayOf(PropTypes.shape({
+      group: PropTypes.string,
+      role: PropTypes.string,
+    })),
+  }),
   loading: PropTypes.bool,
 
 };
 
 UserAuthorityPageFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isSubmitting: false,
   groups: [],
   roles: [],
-  groupRolesCombo: [],
-  actionOnSave: ACTION_SAVE,
+  groupsMap: {},
+  rolesMap: {},
+  values: {
+    groupRolesCombo: [],
+  },
   loading: false,
 };
 
-const UserAuthorityPageForm = reduxForm({
-  form: 'autorityForm',
+const UserAuthorityPageForm = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  validationSchema: Yup.object().shape({
+    groupRolesCombo: Yup.array().of(Yup.object().shape({
+      group: Yup.string(),
+      role: Yup.string(),
+    })),
+  }),
+  handleSubmit: (
+    values,
+    {
+      props: { onSubmit, actionOnSave },
+      setSubmitting,
+    },
+  ) => {
+    onSubmit(values, actionOnSave || ACTION_SAVE).then(() => (
+      setSubmitting(false)
+    ));
+  },
+  displayName: 'autorityForm',
 })(UserAuthorityPageFormBody);
 
 export default UserAuthorityPageForm;
diff --git a/src/ui/users/common/UserAuthorityPageFormContainer.js b/src/ui/users/common/UserAuthorityPageFormContainer.js
index a9eb73528..ac8e866f9 100644
--- a/src/ui/users/common/UserAuthorityPageFormContainer.js
+++ b/src/ui/users/common/UserAuthorityPageFormContainer.js
@@ -1,28 +1,30 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import { addToast, TOAST_SUCCESS } from '@entando/messages';
 import { fetchAllGroupEntries } from 'state/groups/actions';
 import { getLoading } from 'state/loading/selectors';
-import { getGroupsList } from 'state/groups/selectors';
-import { getRolesList } from 'state/roles/selectors';
+import { getGroupsList, getGroupsMap } from 'state/groups/selectors';
+import { getRolesList, getRolesMap } from 'state/roles/selectors';
 import { fetchRoles } from 'state/roles/actions';
 import UserAuthorityPageForm from 'ui/users/common/UserAuthorityPageForm';
 import { ACTION_UPDATE } from 'state/users/const';
 import { fetchUserAuthorities, sendPostUserAuthorities, sendPutUserAuthorities, sendDeleteUserAuthorities } from 'state/users/actions';
-import { getGroupRolesCombo, getSelectedUserActionAuthorities } from 'state/users/selectors';
+import { getSelectedUserActionAuthorities, getSelectedUserAuthoritiesList } from 'state/users/selectors';
 import { setVisibleModal } from 'state/modal/actions';
 
 
-export const mapStateToProps = state =>
-  ({
-    loading: getLoading(state).users,
-    groups: getGroupsList(state),
-    roles: getRolesList(state),
-    groupRolesCombo: getGroupRolesCombo(state),
-    actionOnSave: getSelectedUserActionAuthorities(state),
-  });
+export const mapStateToProps = state => ({
+  loading: getLoading(state).users,
+  groups: getGroupsList(state),
+  roles: getRolesList(state),
+  groupsMap: getGroupsMap(state),
+  rolesMap: getRolesMap(state),
+  initialValues: { groupRolesCombo: getSelectedUserAuthoritiesList(state) },
+  actionOnSave: getSelectedUserActionAuthorities(state),
+});
 
 export const mapDispatchToProps = (dispatch, { match: { params } }) => ({
-  onWillMount: () => {
+  onDidMount: () => {
     dispatch(fetchAllGroupEntries({ page: 1, pageSize: 0 }));
     dispatch(fetchRoles({ page: 1, pageSize: 0 }));
     dispatch(fetchUserAuthorities(params.username));
@@ -40,6 +42,12 @@ export const mapDispatchToProps = (dispatch, { match: { params } }) => ({
     }
   },
   onAddNewClicked: () => dispatch(setVisibleModal('AddAuthorityModal')),
+  onNewAuthAdded: ({ group, role }) => {
+    dispatch(addToast(
+      { id: 'user.authority.added', values: { groupname: group, rolename: role } },
+      TOAST_SUCCESS,
+    ));
+  },
   onCloseModal: () => dispatch(setVisibleModal('')),
 });
 
diff --git a/src/ui/users/common/UserForm.js b/src/ui/users/common/UserForm.js
index 9639157fc..b938478da 100644
--- a/src/ui/users/common/UserForm.js
+++ b/src/ui/users/common/UserForm.js
@@ -1,36 +1,36 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { Button, Row, Col, FormGroup } from 'patternfly-react';
-import {
-  required,
-  maxLength,
-  minLength,
-  matchPassword,
-  userFormText,
-  formatDate,
-} from '@entando/utils';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from 'yup';
+import { Button, Row, Col } from 'patternfly-react';
+import { formatDate } from '@entando/utils';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import SelectInput from 'ui/common/formik-field/SelectInput';
+import SwitchInput from 'ui/common/formik-field/SwitchInput';
+
 import FormLabel from 'ui/common/form/FormLabel';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
 import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 import { TEST_ID_USER_FORM } from 'ui/test-const/user-test-const';
+import { userPassCharsValid } from 'helpers/formikValidations';
 
-const EDIT_MODE = 'edit';
-const NEW_MODE = 'new';
-
-const minLength4 = minLength(4);
-const minLength8 = minLength(8);
-const maxLength20 = maxLength(20);
-const maxLength80 = maxLength(80);
+const msgs = defineMessages({
+  username: {
+    id: 'user.username',
+  },
+  password: {
+    id: 'user.password',
+  },
+  passwordConfirm: {
+    id: 'user.passwordConfirm',
+  },
+});
 
-export const renderStaticField = (field) => {
-  const { input, label, name } = field;
-  let fieldValue = input.value.title || input.value;
-  if (!input.value) {
+const renderStaticField = (fieldProps) => {
+  const { field, label, name } = fieldProps;
+  let fieldValue = field.value && (field.value.title || field.value);
+  if (!field.value) {
     fieldValue = <i className="icon fa fa-minus" />;
   } else if (!Number.isNaN(Date.parse(fieldValue))) {
     fieldValue = formatDate(fieldValue);
@@ -48,227 +48,225 @@ export const renderStaticField = (field) => {
   );
 };
 
-const msgs = defineMessages({
-  username: {
-    id: 'user.table.username',
-    defaultMessage: 'Username',
-  },
-  password: {
-    id: 'user.password',
-    defaultMessage: 'Password',
-  },
-  passwordConfirm: {
-    id: 'user.passwordConfirm',
-    defaultMessage: 'Confirm Password',
-  },
+const addFormSchema = Yup.object().shape({
+  username: Yup.string()
+    .required(<FormattedMessage id="validateForm.required" />)
+    .min(4, <FormattedMessage id="validateForm.minLength" values={{ min: 4 }} />)
+    .max(80, <FormattedMessage id="validateForm.maxLength" values={{ max: 80 }} />)
+    .test('usernameCharsValid', userPassCharsValid),
+  password: Yup.string()
+    .required(<FormattedMessage id="validateForm.required" />)
+    .min(8, <FormattedMessage id="validateForm.minLength" values={{ min: 8 }} />)
+    .max(20, <FormattedMessage id="validateForm.maxLength" values={{ max: 20 }} />)
+    .test('passwordCharsValid', userPassCharsValid),
+  passwordConfirm: Yup.string()
+    .required(<FormattedMessage id="validateForm.required" />)
+    .oneOf([Yup.ref('password')], <FormattedMessage id="validateForm.passwordNotMatch" />),
+  profileType: Yup.string()
+    .required(<FormattedMessage id="validateForm.required" />),
+  status: Yup.string(),
 });
 
-export class UserFormBody extends Component {
-  componentWillMount() {
-    this.props.onWillMount(this.props);
-  }
+const editFormSchema = Yup.object().shape({
+  username: Yup.string(),
+  password: Yup.string()
+    .min(8, <FormattedMessage id="validateForm.minLength" values={{ min: 8 }} />)
+    .max(20, <FormattedMessage id="validateForm.maxLength" values={{ max: 20 }} />)
+    .test('passwordCharsValid', userPassCharsValid),
+  passwordConfirm: Yup.string()
+    .when('password', (password, field) => (password ? (field
+      .required(<FormattedMessage id="validateForm.required" />)
+      .oneOf([Yup.ref('password')], <FormattedMessage id="validateForm.passwordNotMatch" />)
+    ) : field)),
+  registration: Yup.string().nullable(),
+  lastLogin: Yup.string().nullable(),
+  lastPasswordChange: Yup.string().nullable(),
+  reset: Yup.boolean(),
+  status: Yup.string(),
+});
 
-  render() {
-    const {
-      intl, onSubmit, handleSubmit, invalid, submitting, mode, profileTypes,
-      password, dirty, onCancel, onDiscard, onSave,
-    } = this.props;
+const getFormSchema = editing => (editing ? editFormSchema : addFormSchema);
 
-    const handleCancelClick = () => {
-      if (dirty) {
-        onCancel();
-      } else {
-        onDiscard();
-      }
-    };
+const UserForm = ({
+  intl, initialValues, profileTypes, onMount, onSubmit,
+  onCancel, onDiscard, onModalSave, editing,
+}) => {
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
 
-    const showUsername = (
-      <Field
-        component={RenderTextInput}
-        name="username"
-        label={<FormLabel labelId="user.table.username" helpId="user.username.help" required />}
-        placeholder={intl.formatMessage(msgs.username)}
-        validate={mode !== EDIT_MODE ?
-          [required, minLength4, maxLength80, userFormText] : undefined}
-        disabled={mode === EDIT_MODE}
-        disallowedInput={/[^0-9a-zA-Z_.]/g}
-        forceLowerCase
-      />
-    );
-    const showEdit = () => {
-      if (mode === NEW_MODE) {
-        return null;
-      }
-      return (
-        <div className="UserForm__content-edit" >
-          <Field
-            name="registration"
-            component={renderStaticField}
-            label={<FormattedMessage id="user.registration" />}
-          />
-          <Field
-            name="lastLogin"
-            component={renderStaticField}
-            label={<FormattedMessage id="user.lastLogin" />}
-          />
-          <Field
-            name="lastPasswordChange"
-            component={renderStaticField}
-            label={<FormattedMessage id="user.lastPasswordChange" />}
-          />
-          <FormGroup>
-            <label htmlFor="reset" className="col-xs-2 control-label">
-              <FormattedMessage id="user.reset" />&nbsp;
-            </label>
-            <Col xs={4}>
-              <Field
-                component={SwitchRenderer}
-                name="reset"
-              />
-            </Col>
-          </FormGroup>
-        </div>
-      );
-    };
+  const handleSubmit = ({ submitType, ...values }) => onSubmit(values, submitType);
 
-    const showProfileType = (
-      mode !== EDIT_MODE ?
-        (<Field
-          component={RenderSelectInput}
-          options={profileTypes}
-          defaultOptionId="form.select.chooseOne"
-          label={<FormLabel labelId="user.profileType" required />}
-          name="profileType"
-          validate={required}
-        />) : null
-    );
+  const handleCancelClick = ({ dirty }) => {
+    if (dirty) {
+      onCancel();
+    } else {
+      onDiscard();
+    }
+  };
 
-    return (
-      <form onSubmit={handleSubmit(onSubmit.bind(this))} className="UserForm form-horizontal">
-        <Row>
-          <Col xs={12}>
-            <fieldset className="no-padding">
-              <FormSectionTitle titleId="app.info" />
-              {showUsername}
-              <Field
-                component={RenderTextInput}
-                name="password"
-                type="password"
-                label={<FormLabel labelId="user.password" helpId="user.password.help" required={mode === NEW_MODE} />}
-                placeholder={intl.formatMessage(msgs.password)}
-                validate={[
-                  ...(mode === NEW_MODE ? [required] : []),
-                  ...(password ? [userFormText, minLength8, maxLength20] : []),
-                  ]}
-              />
-              <Field
-                component={RenderTextInput}
-                name="passwordConfirm"
-                type="password"
-                label={<FormLabel labelId="user.passwordConfirm" required={mode === NEW_MODE} />}
-                placeholder={intl.formatMessage(msgs.passwordConfirm)}
-                validate={[
-                  ...(mode === NEW_MODE ? [required] : []),
-                  ...(password ? [matchPassword] : []),
-                ]}
-              />
-              {/* Insert user info and reset button on EDIT */}
-              {showEdit()}
-              {showProfileType}
-              <FormGroup>
-                <label htmlFor="status" className="col-xs-2 control-label">
-                  <FormattedMessage id="user.status" />&nbsp;
-                </label>
-                <Col xs={4}>
+  const handleModalSave = ({ submitForm }) => {
+    onModalSave();
+    submitForm();
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={getFormSchema(editing)}
+      onSubmit={handleSubmit}
+      validateOnMount
+      enableReinitialize
+    >
+      {formik => (
+        <Form className="UserForm form-horizontal" aria-label="User Form">
+          <Row>
+            <Col xs={12}>
+              <fieldset className="no-padding">
+                <FormSectionTitle titleId="app.info" />
+                <Field
+                  component={RenderTextInput}
+                  name="username"
+                  label={<FormLabel labelId="user.username" helpId="user.username.help" required />}
+                  placeholder={intl.formatMessage(msgs.username)}
+                  disabled={editing}
+                />
+                <Field
+                  component={RenderTextInput}
+                  type="password"
+                  name="password"
+                  label={<FormLabel labelId="user.password" helpId="user.password.help" required={!editing} />}
+                  placeholder={intl.formatMessage(msgs.password)}
+                />
+                <Field
+                  component={RenderTextInput}
+                  type="password"
+                  name="passwordConfirm"
+                  label={<FormLabel labelId="user.passwordConfirm" required={!editing} />}
+                  placeholder={intl.formatMessage(msgs.passwordConfirm)}
+                />
+                {editing ? (
+                  <div className="UserForm__content-edit">
+                    <Field
+                      name="registration"
+                      component={renderStaticField}
+                      label={<FormattedMessage id="user.registration" />}
+                    />
+                    <Field
+                      name="lastLogin"
+                      component={renderStaticField}
+                      label={<FormattedMessage id="user.lastLogin" />}
+                    />
+                    <Field
+                      name="lastPasswordChange"
+                      component={renderStaticField}
+                      label={<FormattedMessage id="user.lastPasswordChange" />}
+                    />
+                    <Field
+                      component={SwitchInput}
+                      name="reset"
+                      label={<FormLabel labelId="user.reset" />}
+                    />
+                  </div>
+                ) : (
                   <Field
-                    component={SwitchRenderer}
-                    name="status"
-                    trueValue="active"
-                    falseValue="inactive"
+                    component={SelectInput}
+                    name="profileType"
+                    label={<FormLabel labelId="user.profileType" required />}
+                    options={profileTypes}
+                    defaultOptionId="form.select.chooseOne"
                   />
-                </Col>
-              </FormGroup>
-            </fieldset>
-          </Col>
-        </Row>
-        <br />
-        <Row>
-          <Col xs={12}>
-            <ConfirmCancelModalContainer
-              contentText={intl.formatMessage({ id: 'app.confirmCancel' })}
-              invalid={invalid}
-              submitting={submitting}
-              onSave={onSave}
-              onDiscard={onDiscard}
-            />
-            <Button
-              className="pull-right"
-              type="submit"
-              bsStyle="primary"
-              disabled={invalid || submitting}
-              data-testid={TEST_ID_USER_FORM.SAVE_BUTTON}
-            >
-              <FormattedMessage id="app.save" />
-            </Button>
-            {
-              mode !== EDIT_MODE && (
+                )}
+                <Field
+                  component={SwitchInput}
+                  name="status"
+                  label={<FormLabel labelId="user.status" />}
+                  trueValue="active"
+                  falseValue="inactive"
+                />
+              </fieldset>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={12}>
+              <ConfirmCancelModalContainer
+                contentText={intl.formatMessage({ id: 'app.confirmCancel' })}
+                invalid={!formik.isValid}
+                submitting={formik.isSubmitting}
+                onSave={() => handleModalSave(formik)}
+                onDiscard={onDiscard}
+              />
+              <Button
+                className="pull-right"
+                type="submit"
+                bsStyle="primary"
+                disabled={!formik.isValid || formik.isSubmitting}
+                data-testid={TEST_ID_USER_FORM.SAVE_BUTTON}
+                onClick={() => formik.setFieldValue('submitType', 'save')}
+              >
+                <FormattedMessage id="app.save" />
+              </Button>
+              {!editing && (
                 <Button
                   className="pull-right UserForm__action-button"
-                  disabled={invalid || submitting}
-                  onClick={handleSubmit(values => onSubmit({
-                  ...values,
-                  saveType: 'editProfile',
-                }))}
+                  type="submit"
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  onClick={() => formik.setFieldValue('submitType', 'saveAndEditProfile')}
                 >
                   <FormattedMessage id="app.saveAndEditProfile" defaultMessage="Save and edit profile" />
                 </Button>
-              )
-            }
-            <Button
-              className="pull-right UserForm__action-button"
-              bsStyle="default"
-              onClick={handleCancelClick}
-            >
-              <FormattedMessage id="app.cancel" />
-            </Button>
-          </Col>
-        </Row>
-      </form>
-    );
-  }
-}
+              )}
+              <Button
+                className="pull-right UserForm__action-button"
+                bsStyle="default"
+                onClick={() => handleCancelClick(formik)}
+              >
+                <FormattedMessage id="app.cancel" />
+              </Button>
+            </Col>
+          </Row>
+        </Form>
+      )}
+    </Formik>
+  );
+};
 
-UserFormBody.propTypes = {
+UserForm.propTypes = {
   intl: intlShape.isRequired,
-  onWillMount: PropTypes.func,
-  handleSubmit: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
-  mode: PropTypes.string,
+  initialValues: PropTypes.shape({
+    username: PropTypes.string,
+    password: PropTypes.string,
+    passwordConfirm: PropTypes.string,
+    profileType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    status: PropTypes.string,
+    registration: PropTypes.string,
+    lastLogin: PropTypes.string,
+    lastPasswordChange: PropTypes.string,
+    reset: PropTypes.bool,
+  }),
   profileTypes: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    text: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
   })),
-  password: PropTypes.string,
-  dirty: PropTypes.bool,
-  onSave: PropTypes.func.isRequired,
-  onDiscard: PropTypes.func.isRequired,
+  onMount: PropTypes.func,
+  onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  onDiscard: PropTypes.func.isRequired,
+  onModalSave: PropTypes.func.isRequired,
+  editing: PropTypes.bool,
 };
 
-UserFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
-  mode: NEW_MODE,
-  onWillMount: null,
+UserForm.defaultProps = {
+  initialValues: {
+    username: '',
+    password: '',
+    passwordConfirm: '',
+    profileType: '',
+    status: 'inactive',
+  },
   profileTypes: [],
-  password: '',
-  dirty: false,
+  onMount: () => {},
+  editing: false,
 };
 
-const UserForm = reduxForm({
-  form: 'user',
-})(UserFormBody);
-
 export default injectIntl(UserForm);
diff --git a/src/ui/users/edit/EditFormContainer.js b/src/ui/users/edit/EditFormContainer.js
index 9ecf17401..a44fb43e7 100644
--- a/src/ui/users/edit/EditFormContainer.js
+++ b/src/ui/users/edit/EditFormContainer.js
@@ -1,34 +1,68 @@
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import { formValueSelector, submit } from 'redux-form';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useParams } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
 
-import { fetchUserForm, sendPutUser } from 'state/users/actions';
+import { fetchCurrentPageUserDetail, sendPutUser } from 'state/users/actions';
 import { setVisibleModal } from 'state/modal/actions';
 import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';
 import { ROUTE_USER_LIST } from 'app-init/router';
 import UserForm from 'ui/users/common/UserForm';
+import { getSelectedUser } from 'state/users/selectors';
 
-const EDIT_MODE = 'edit';
-
-export const mapStateToProps = (state, { match: { params } }) => ({
-  mode: EDIT_MODE,
-  username: params.username,
-  password: formValueSelector('user')(state, 'password'),
-});
-
-export const mapDispatchToProps = (dispatch, { history }) => ({
-  onWillMount: ({ username }) => { dispatch(fetchUserForm(username)); },
-  onSubmit: (user) => {
-    const editUser = { ...user, profileType: (user.profileType || {}).typeCode || '' };
-    dispatch(sendPutUser(editUser));
-  },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('user')); },
-  onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
-  onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_USER_LIST)); },
-});
-
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(UserForm));
+
+const EditFormContainer = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const { username } = useParams();
+  const selectedUser = useSelector(getSelectedUser);
+
+  const initialValues = useMemo(() => ({
+    ...selectedUser,
+    username,
+    password: '',
+    passwordConfirm: '',
+    reset: false,
+  }), [selectedUser, username]);
+
+  const handleMount = useCallback(() => {
+    dispatch(fetchCurrentPageUserDetail(username));
+  }, [dispatch, username]);
+
+  const handleSubmit = useCallback((user) => {
+    const updatedUser = {
+      ...user,
+      profileType: (user.profileType || {}).typeCode || '',
+      password: user.password || undefined,
+      passwordConfirm: user.passwordConfirm || undefined,
+    };
+    dispatch(sendPutUser(updatedUser));
+  }, [dispatch]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(setVisibleModal(ConfirmCancelModalID));
+  }, [dispatch]);
+
+  const handleDiscard = useCallback(() => {
+    dispatch(setVisibleModal(''));
+    history.push(routeConverter(ROUTE_USER_LIST));
+  }, [dispatch, history]);
+
+  const handleModalSave = useCallback(() => {
+    dispatch(setVisibleModal(''));
+  }, [dispatch]);
+
+  return (
+    <UserForm
+      onMount={handleMount}
+      onSubmit={handleSubmit}
+      onCancel={handleCancel}
+      onDiscard={handleDiscard}
+      onModalSave={handleModalSave}
+      initialValues={initialValues}
+      editing
+    />
+  );
+};
+
+export default EditFormContainer;
diff --git a/src/ui/users/list/UserListTable.js b/src/ui/users/list/UserListTable.js
index 182800f32..2575e87be 100644
--- a/src/ui/users/list/UserListTable.js
+++ b/src/ui/users/list/UserListTable.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Col, Paginator, Alert, Spinner } from 'patternfly-react';
+import { convertToQueryString, FILTER_OPERATORS } from '@entando/utils';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import UserListMenuActions from 'ui/users/list/UserListMenuActions';
 import UserStatus from 'ui/users/common/UserStatus';
@@ -24,11 +25,21 @@ class UserListTable extends Component {
   }
 
   changePage(page) {
-    this.props.onWillMount({ page, pageSize: this.props.pageSize });
+    const { onWillMount, userSearchTerm, pageSize } = this.props;
+    const params = userSearchTerm ? convertToQueryString({
+      formValues: { username: userSearchTerm },
+      operators: { key: FILTER_OPERATORS.LIKE },
+    }) : '';
+    onWillMount({ page, pageSize }, params);
   }
 
   changePageSize(pageSize) {
-    this.props.onWillMount({ page: 1, pageSize });
+    const { onWillMount, userSearchTerm } = this.props;
+    const params = userSearchTerm ? convertToQueryString({
+      formValues: { username: userSearchTerm },
+      operators: { key: FILTER_OPERATORS.LIKE },
+    }) : '';
+    onWillMount({ page: 1, pageSize }, params);
   }
 
   renderTableRows() {
@@ -150,12 +161,14 @@ UserListTable.propTypes = {
   page: PropTypes.number.isRequired,
   pageSize: PropTypes.number.isRequired,
   totalItems: PropTypes.number.isRequired,
+  userSearchTerm: PropTypes.string,
 };
 
 UserListTable.defaultProps = {
   onWillMount: () => {},
   loading: false,
   users: [],
+  userSearchTerm: '',
 };
 
 export default injectIntl(UserListTable);
diff --git a/src/ui/users/list/UserListTableContainer.js b/src/ui/users/list/UserListTableContainer.js
index 6b5a29735..60927f1c7 100644
--- a/src/ui/users/list/UserListTableContainer.js
+++ b/src/ui/users/list/UserListTableContainer.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import { fetchUsers } from 'state/users/actions';
-import { getUserList } from 'state/users/selectors';
+import { getUserList, getUserSearchTerm } from 'state/users/selectors';
 import { getLoading } from 'state/loading/selectors';
 import { getCurrentPage, getTotalItems, getPageSize } from 'state/pagination/selectors';
 import UserListTable from 'ui/users/list/UserListTable';
@@ -15,11 +15,12 @@ export const mapStateToProps = state => ({
   totalItems: getTotalItems(state),
   pageSize: getPageSize(state),
   loading: getLoading(state).users,
+  userSearchTerm: getUserSearchTerm(state),
 });
 
 export const mapDispatchToProps = dispatch => ({
-  onWillMount: (page = { page: 1, pageSize: 10 }) => {
-    dispatch(fetchUsers(page));
+  onWillMount: (page = { page: 1, pageSize: 10 }, params) => {
+    dispatch(fetchUsers(page, params));
   },
   onClickDelete: (user) => {
     dispatch(setVisibleModal(MODAL_ID));
diff --git a/src/ui/users/list/UserSearchForm.js b/src/ui/users/list/UserSearchForm.js
index 8ed3c2d3b..b76c30599 100644
--- a/src/ui/users/list/UserSearchForm.js
+++ b/src/ui/users/list/UserSearchForm.js
@@ -1,9 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, Field } from 'redux-form';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Row, Col, FormGroup, Button } from 'patternfly-react';
+import { Form, Field, withFormik } from 'formik';
+import * as Yup from 'yup';
+
 import { TEST_ID_USER_SEARCH_FORM } from 'ui/test-const/user-test-const';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 
 export const renderSelectOptions = options => (
   options.map(option => (
@@ -24,14 +27,13 @@ const msgs = defineMessages({
 });
 
 export class UserSearchFormBody extends Component {
-  componentWillMount() {
-    this.props.onWillMount();
+  componentDidMount() {
+    this.props.onDidMount();
   }
 
-  onSubmit = (ev) => {
-    ev.preventDefault();
-    this.props.handleSubmit();
-  };
+  componentWillUnmount() {
+    this.props.onUnmount();
+  }
 
   handleClick(handler) {
     return (ev) => {
@@ -41,26 +43,28 @@ export class UserSearchFormBody extends Component {
   }
 
   render() {
-    const { intl } = this.props;
+    const { intl, isValid, isSubmitting } = this.props;
     return (
-      <form onSubmit={this.onSubmit} className="UserSearchForm form-horizontal well" data-testid={TEST_ID_USER_SEARCH_FORM.FORM}>
+      <Form className="UserSearchForm form-horizontal well" data-testid={TEST_ID_USER_SEARCH_FORM.FORM} aria-label="form">
         <h3><FormattedMessage id="app.search" /></h3>
         <FormGroup>
-          <Row>
+          <div>
             <label className="control-label col-sm-2" htmlFor="username">
               <FormattedMessage id="user.table.username" />
             </label>
             <Col sm={9}>
               <Field
                 id="username"
-                component="input"
+                inputSize={10}
+                labelSize={0}
+                component={RenderTextInput}
                 className="form-control UserSearchForm__username"
                 name="username"
                 placeholder={intl.formatMessage(msgs.username)}
                 data-testid={TEST_ID_USER_SEARCH_FORM.USERNAME_FIELD}
               />
             </Col>
-          </Row>
+          </div>
         </FormGroup>
         {/* Form for user profiletype search */}
         {/* insert Advanced Search component when available */}
@@ -73,25 +77,38 @@ export class UserSearchFormBody extends Component {
                 bsStyle="primary"
                 className="pull-right"
                 data-testid={TEST_ID_USER_SEARCH_FORM.SEARCH_BUTTON}
+                disabled={!isValid || isSubmitting}
               >
                 <FormattedMessage id="app.search" />
               </Button>
             </Col>
           </Row>
         </FormGroup>
-      </form>
+      </Form>
     );
   }
 }
 
 UserSearchFormBody.propTypes = {
   intl: intlShape.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  onWillMount: PropTypes.func.isRequired,
+  onDidMount: PropTypes.func.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+  onUnmount: PropTypes.func.isRequired,
 };
 
-const UserSearchForm = reduxForm({
-  form: 'userSearch',
+const UserSearchForm = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  validationSchema: () => (
+    Yup.object().shape({
+      username: Yup.string().nullable(true),
+    })
+  ),
+  handleSubmit: (values, { setSubmitting, props: { onSubmit } }) => {
+    onSubmit(values).then(() => setSubmitting(false));
+  },
+  displayName: 'userSearchFormFormik',
 })(UserSearchFormBody);
 
 export default injectIntl(UserSearchForm);
diff --git a/src/ui/users/list/UserSearchFormContainer.js b/src/ui/users/list/UserSearchFormContainer.js
index 7b499894f..dc3c26ba4 100644
--- a/src/ui/users/list/UserSearchFormContainer.js
+++ b/src/ui/users/list/UserSearchFormContainer.js
@@ -1,16 +1,17 @@
 import { connect } from 'react-redux';
-import { fetchUsers } from 'state/users/actions';
+import { fetchUsers, setUserSearchTerm } from 'state/users/actions';
 import { fetchProfileTypes } from 'state/profile-types/actions';
 import { getProfileTypesOptions } from 'state/profile-types/selectors';
 import UserSearchForm from 'ui/users/list/UserSearchForm';
 import { convertToQueryString, FILTER_OPERATORS } from '@entando/utils';
 import { PROFILE_FILTER_VALUE_MAP, PROFILE_FILTER_OPTIONS } from 'ui/users/common/const';
+import { getUserSearchTerm } from 'state/users/selectors';
 
 const FIELD_OPERATORS = {
   username: FILTER_OPERATORS.LIKE,
 };
 
-const generateQueryString = (values) => {
+export const generateQueryString = (values) => {
   const newValues = { ...values };
   delete newValues.withProfile;
   const withProfile = PROFILE_FILTER_VALUE_MAP[values.withProfile] !== null ?
@@ -28,15 +29,20 @@ export const mapStateToProps = state => ({
   profileTypes: getProfileTypesOptions(state),
   initialValues: {
     withProfile: PROFILE_FILTER_OPTIONS[0].id,
+    username: getUserSearchTerm(state) || '',
   },
 });
 
 export const mapDispatchToProps = dispatch => ({
-  onWillMount: () => {
+  onDidMount: () => {
     dispatch(fetchProfileTypes());
   },
   onSubmit: (values) => {
-    dispatch(fetchUsers({ page: 1, pageSize: 10 }, generateQueryString(values)));
+    dispatch(setUserSearchTerm(values.username));
+    return dispatch(fetchUsers({ page: 1, pageSize: 10 }, values.username ? generateQueryString(values) : ''));
+  },
+  onUnmount: () => {
+    dispatch(setUserSearchTerm(''));
   },
 });
 
diff --git a/src/ui/users/my-profile/AccountForm.js b/src/ui/users/my-profile/AccountForm.js
index 5ad182e3e..7f84981b6 100644
--- a/src/ui/users/my-profile/AccountForm.js
+++ b/src/ui/users/my-profile/AccountForm.js
@@ -1,110 +1,141 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
 import { Form, Button, Modal } from 'patternfly-react';
 import { FormattedMessage } from 'react-intl';
-import { required, matchElement } from '@entando/utils';
-
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import { required } from '@entando/utils';
+import { Field, withFormik, useFormikContext } from 'formik';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderReduxFormTextInput from 'ui/common/form/RenderTextInput';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
 import GenericModalContainer from 'ui/common/modal/GenericModalContainer';
 
 const FORM_ID = 'myprofile-account';
 
-export class AccountFormBody extends Component {
-  shouldComponentUpdate(nextProps) {
-    const { username, locale } = this.props;
-    if (nextProps.username === username && nextProps.locale === locale) {
-      return false;
-    }
-    return true;
-  }
+export const PasswordFormBody = () => (
+  // eslint-disable-next-line jsx-a11y/no-redundant-roles
+  <form role="form" horizontal className="MyProfileAccountForm" >
+    <Field
+      label={<FormattedMessage id="user.myProfile.oldPassword" />}
+      labelSize={4}
+      component={RenderTextInput}
+      name="oldPassword"
+      data-testid="oldPassword"
+      type="password"
+      help="*"
+    />
+    <Field
+      label={<FormattedMessage id="user.myProfile.newPassword" />}
+      labelSize={4}
+      component={RenderTextInput}
+      name="newPassword"
+      data-testid="newPassword"
+      type="password"
+      help="*"
+    />
+    <Field
+      label={<FormattedMessage id="user.myProfile.newPasswordConfirm" />}
+      labelSize={4}
+      component={RenderTextInput}
+      name="newPasswordConfirm"
+      data-testid="newPasswordConfirm"
+      type="password"
+      help="*"
+    />
+  </form>
+);
+
+
+export const PasswordChangeFormModal = () => {
+  const formikContext = useFormikContext() || {};
+
+  const modalTitle = (
+    <Modal.Title><FormattedMessage id="user.myProfile.passwordSection" /></Modal.Title>
+  );
 
-  render() {
-    const {
-      username, onEdit, onModalFormSubmit, onModalClose,
-    } = this.props;
+  const modalButtons = [
+    <Button
+      id="savebtn"
+      bsStyle="primary"
+      type="submit"
+      loading={formikContext.isSubmitting}
+      disabled={formikContext.isSubmitting || !formikContext.isValid}
+      onClick={
+      () => formikContext.submitForm()
+    }
+    >
+      <FormattedMessage id="app.save" />
+    </Button>,
+  ];
+  return (
+    <GenericModalContainer
+      modalId={FORM_ID}
+      modalClassName="MyProfileAccountForm__modal"
+      modalTitle={modalTitle}
+      buttons={modalButtons}
+      modalCloseCleanup={() => formikContext.resetForm()}
+    >
+      <PasswordFormBody />
+    </GenericModalContainer>
+  );
+};
 
-    const modalTitle = (
-      <Modal.Title><FormattedMessage id="user.myProfile.passwordSection" /></Modal.Title>
-    );
+const ModalFormContainer = withFormik({
 
-    const modalButtons = [
-      <Button
-        id="savebtn"
-        bsStyle="primary"
-        onClick={onModalFormSubmit}
-      >
-        <FormattedMessage id="app.save" />
-      </Button>,
-    ];
+  mapPropsToValues: () => ({
+    oldPassword: '',
+    newPassword: '',
+    newPasswordConfirm: '',
+  }),
+  validate: (values) => {
+    const errors = {};
+    if (required(values.oldPassword)) {
+      errors.oldPassword = <FormattedMessage id="validateForm.required" />;
+    }
+    if (required(values.newPassword)) {
+      errors.newPassword = <FormattedMessage id="validateForm.required" />;
+    }
+    if (values.newPassword !== values.newPasswordConfirm) {
+      errors.newPasswordConfirm = <FormattedMessage id="user.myProfile.passwordMismatch" />;
+    }
+    return errors;
+  },
+  handleSubmit: (values, { props, setSubmitting, resetForm }) => {
+    const { onSubmit } = props;
+    onSubmit(values).then(() => {
+      resetForm();
+      setSubmitting(false);
+    }).catch(() => {
+      setSubmitting(false);
+    });
+  },
+  displayName: 'AccountFormPasswordChangeModalForm', // helps with React DevTools
+})(PasswordChangeFormModal);
 
-    const formFields = (
-      <Fragment>
-        <Field
-          label={<FormattedMessage id="user.myProfile.oldPassword" />}
-          labelSize={4}
-          component={RenderTextInput}
-          name="oldPassword"
-          type="password"
-          validate={required}
-          help="*"
-        />
-        <Field
-          label={<FormattedMessage id="user.myProfile.newPassword" />}
-          labelSize={4}
-          component={RenderTextInput}
-          name="newPassword"
-          type="password"
-          validate={required}
-          help="*"
-        />
-        <Field
-          label={<FormattedMessage id="user.myProfile.newPasswordConfirm" />}
-          labelSize={4}
-          component={RenderTextInput}
-          name="newPasswordConfirm"
-          type="password"
-          validate={[required, matchElement('newPassword', 'user.myProfile.passwordMismatch')]}
-          help="*"
-        />
-      </Fragment>
-    );
+export function AccountFormBody(props) {
+  const { username, onEdit } = props;
 
-    return (
-      <Form
-        horizontal
-        className="MyProfileAccountForm"
-      >
-        <FormSectionTitle titleId="user.myProfile.accountSection" />
-        <RenderTextInput
-          label={<FormattedMessage id="user.username" />}
-          input={{ value: username }}
-          disabled
-        />
-        <RenderTextInput
-          label={<FormattedMessage id="user.password" />}
+  return (
+    <Form horizontal className="MyProfileAccountForm">
+      <FormSectionTitle titleId="user.myProfile.accountSection" />
+      <RenderReduxFormTextInput
+        label={<FormattedMessage id="user.username" />}
+        input={{ value: username }}
+        disabled
+      />
+      <RenderReduxFormTextInput
+        label={<FormattedMessage id="user.password" />}
           // Display fake password value
-          input={{ value: '**********' }}
-          type="password"
-          help="*"
-          disabled
-        />
-        <Button className="pull-right" bsStyle="primary" onClick={onEdit}>
-          <FormattedMessage id="user.myProfile.passwordSection" />
-        </Button>
-        <GenericModalContainer
-          modalId={FORM_ID}
-          modalClassName="MyProfileAccountForm__modal"
-          modalTitle={modalTitle}
-          buttons={modalButtons}
-          modalCloseCleanup={onModalClose}
-        >
-          {formFields}
-        </GenericModalContainer>
-      </Form>
-    );
-  }
+        input={{ value: '**********' }}
+        type="password"
+        help="*"
+        disabled
+      />
+      <Button className="pull-right" bsStyle="primary" onClick={onEdit}>
+        <FormattedMessage id="user.myProfile.passwordSection" />
+      </Button>
+      <ModalFormContainer {...props} />
+    </Form>
+  );
 }
 
 AccountFormBody.propTypes = {
@@ -112,12 +143,10 @@ AccountFormBody.propTypes = {
   onEdit: PropTypes.func.isRequired,
   onModalFormSubmit: PropTypes.func.isRequired,
   locale: PropTypes.string.isRequired,
-  onModalClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
 };
 
-const AccountForm = reduxForm({
-  form: FORM_ID,
-})(AccountFormBody);
+const AccountForm = AccountFormBody;
 
 AccountForm.FORM_ID = FORM_ID;
 
diff --git a/src/ui/users/my-profile/AccountFormContainer.js b/src/ui/users/my-profile/AccountFormContainer.js
index 47a36a661..1c510e09a 100644
--- a/src/ui/users/my-profile/AccountFormContainer.js
+++ b/src/ui/users/my-profile/AccountFormContainer.js
@@ -1,7 +1,5 @@
 import { connect } from 'react-redux';
 import { getUsername } from '@entando/apimanager';
-import { reset, submit } from 'redux-form';
-
 import { sendPostMyPassword } from 'state/users/actions';
 import AccountForm from 'ui/users/my-profile/AccountForm';
 import { setVisibleModal } from 'state/modal/actions';
@@ -13,18 +11,11 @@ export const mapStateToProps = state => ({
 });
 
 export const mapDispatchToProps = dispatch => ({
-  onSubmit: (data) => {
-    dispatch(sendPostMyPassword({ ...data, newPasswordConfirm: undefined }));
-  },
+  onSubmit: data =>
+    dispatch(sendPostMyPassword({ ...data, newPasswordConfirm: undefined })),
   onEdit: () => {
     dispatch(setVisibleModal(AccountForm.FORM_ID));
   },
-  onModalFormSubmit: () => {
-    dispatch(submit(AccountForm.FORM_ID));
-  },
-  onModalClose: () => {
-    dispatch(reset(AccountForm.FORM_ID));
-  },
 });
 
 export default connect(
@@ -36,7 +27,7 @@ export default connect(
     ...ownProps,
     onSubmit: (data) => {
       const { oldPassword, newPassword } = data;
-      dispatchProps.onSubmit({ oldPassword, newPassword });
+      return dispatchProps.onSubmit({ oldPassword, newPassword });
     },
   }),
   { pure: false },
diff --git a/src/ui/users/my-profile/AppSettingsForm.js b/src/ui/users/my-profile/AppSettingsForm.js
index fb7a61d3e..205a78d6c 100644
--- a/src/ui/users/my-profile/AppSettingsForm.js
+++ b/src/ui/users/my-profile/AppSettingsForm.js
@@ -1,14 +1,19 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm, FieldArray } from 'redux-form';
-import { Form, Button, FormGroup, Col } from 'patternfly-react';
+import {
+  Button,
+  FormGroup,
+  Col,
+  Form,
+} from 'patternfly-react';
 import { FormattedMessage } from 'react-intl';
 
 import FormLabel from 'ui/common/form/FormLabel';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
+import MultiSelectRenderer from 'ui/common/formik-field/MultiSelectRenderer';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
-import MultiSelectRenderer from 'ui/pages/common/MultiSelectRenderer';
+import { withFormik, Field, Form as FormikForm, FieldArray } from 'formik';
+import SelectInput from '../../common/formik-field/SelectInput';
+import SwitchInput from '../../common/formik-field/SwitchInput';
 
 export class AppSettingsFormBody extends Component {
   constructor(props) {
@@ -28,125 +33,161 @@ export class AppSettingsFormBody extends Component {
 
   render() {
     const {
-      selectGroups, defaultPageJoinGroups, defaultContentJoinGroups,
+      selectGroups,
     } = this.props;
 
     return (
-      <Form
-        onSubmit={this.props.handleSubmit(this.submit)}
-        horizontal
-        className="AppSettingsForm"
-        data-testid="appSettingsForm"
-      >
-        <FormSectionTitle titleId="user.myProfile.appSettingsSection" />
-        <Field
-          label={<FormLabel helpId="user.myProfile.wizardToggleHelp" labelId="user.myProfile.wizardToggle" />}
-          component={SwitchRenderer}
-          name="wizard"
-        />
-        <Field
-          label={<FormLabel labelId="user.myProfile.disableContentMenu" />}
-          component={SwitchRenderer}
-          name="disableContentMenu"
-        />
-        <Field
-          label={<FormLabel helpId="user.myProfile.translationWarningHelp" labelId="user.myProfile.translationWarning" />}
-          component={SwitchRenderer}
-          name="translationWarning"
-        />
-        <Field
-          label={<FormLabel helpId="user.myProfile.loadOnPageSelectHelp" labelId="user.myProfile.loadOnPageSelect" />}
-          component={SwitchRenderer}
-          name="loadOnPageSelect"
-        />
-        <Field
-          label={<FormLabel helpId="user.myProfile.defaultPageOwnerGroupHelp" labelId="user.myProfile.defaultPageOwnerGroup" />}
-          component={RenderSelectInput}
-          options={selectGroups}
-          name="defaultPageOwnerGroup"
-          defaultOptionId="app.chooseAnOption"
-        />
-        <FormGroup>
-          <Col xs={2} className="text-right">
-            <label htmlFor="defaultPageJoinGroups" className="control-label">
-              <FormLabel helpId="user.myProfile.defaultPageJoinGroupsHelp" labelId="user.myProfile.defaultPageJoinGroups" />
-            </label>
-          </Col>
-          <Col xs={10}>
-            <FieldArray
-              component={MultiSelectRenderer}
-              name="defaultPageJoinGroups"
-              options={selectGroups}
-              selectedValues={defaultPageJoinGroups}
-              labelKey="text"
-              valueKey="value"
-              emptyOptionTextId="app.chooseAnOption"
-            />
-          </Col>
-        </FormGroup>
-        <Field
-          label={<FormLabel helpId="user.myProfile.defaultContentOwnerGroupHelp" labelId="user.myProfile.defaultContentOwnerGroup" />}
-          component={RenderSelectInput}
-          options={selectGroups}
-          name="defaultContentOwnerGroup"
-          defaultOptionId="app.chooseAnOption"
-        />
-        <FormGroup>
-          <Col xs={2} className="text-right">
-            <label htmlFor="defaultContentJoinGroups" className="control-label">
-              <FormLabel helpId="user.myProfile.defaultContentJoinGroupsHelp" labelId="user.myProfile.defaultContentJoinGroups" />
-            </label>
-          </Col>
-          <Col xs={10}>
-            <FieldArray
-              component={MultiSelectRenderer}
-              name="defaultContentJoinGroups"
-              options={selectGroups}
-              selectedValues={defaultContentJoinGroups}
-              labelKey="text"
-              valueKey="value"
-              emptyOptionTextId="app.chooseAnOption"
-            />
-          </Col>
-        </FormGroup>
-        <Field
-          label={<FormLabel helpId="user.myProfile.defaultWidgetOwnerGroupHelp" labelId="user.myProfile.defaultWidgetOwnerGroup" />}
-          component={RenderSelectInput}
-          options={selectGroups}
-          name="defaultWidgetOwnerGroup"
-          defaultOptionId="app.chooseAnOption"
-        />
-        <Button
-          className="pull-right"
-          type="submit"
-          bsStyle="primary"
-          data-testid="settings_saveBtn"
+      <FormikForm>
+        <Form
+          horizontal
+          className="AppSettingsForm"
+          data-testid="appSettingsForm"
         >
-          <FormattedMessage id="app.save" />
-        </Button>
-      </Form>
+          <FormSectionTitle titleId="user.myProfile.appSettingsSection" />
+          <Field
+            label={
+              <FormLabel
+                helpId="user.myProfile.wizardToggleHelp"
+                labelId="user.myProfile.wizardToggle"
+              />
+            }
+            component={SwitchInput}
+            name="wizard"
+          />
+          <Field
+            label={
+              <FormLabel
+                helpId="user.myProfile.translationWarningHelp"
+                labelId="user.myProfile.translationWarning"
+              />
+            }
+            component={SwitchInput}
+            name="translationWarning"
+          />
+          <Field
+            label={
+              <FormLabel
+                helpId="user.myProfile.loadOnPageSelectHelp"
+                labelId="user.myProfile.loadOnPageSelect"
+              />
+            }
+            component={SwitchInput}
+            name="loadOnPageSelect"
+          />
+          <Field
+            label={
+              <FormLabel
+                helpId="user.myProfile.defaultPageOwnerGroupHelp"
+                labelId="user.myProfile.defaultPageOwnerGroup"
+              />
+            }
+            component={SelectInput}
+            options={selectGroups}
+            name="defaultPageOwnerGroup"
+            defaultOptionId="app.chooseAnOption"
+          />
+          <FormGroup>
+            <Col xs={2} className="text-right">
+              <label htmlFor="defaultPageJoinGroups" className="control-label">
+                <FormLabel
+                  helpId="user.myProfile.defaultPageJoinGroupsHelp"
+                  labelId="user.myProfile.defaultPageJoinGroups"
+                />
+              </label>
+            </Col>
+            <Col xs={10}>
+              <FieldArray
+                render={arrayHelpers => (<MultiSelectRenderer
+                  arrayHelpers={arrayHelpers}
+                  allOptions={selectGroups}
+                  selectedValues={[]}
+                  labelKey="text"
+                  valueKey="value"
+                  emptyOptionTextId="app.chooseAnOption"
+                  name="defaultPageJoinGroups"
+                />)}
+                name="defaultPageJoinGroups"
+              />
+            </Col>
+          </FormGroup>
+          <Field
+            label={
+              <FormLabel
+                helpId="user.myProfile.defaultContentOwnerGroupHelp"
+                labelId="user.myProfile.defaultContentOwnerGroup"
+              />
+            }
+            component={SelectInput}
+            options={selectGroups}
+            name="defaultContentOwnerGroup"
+            defaultOptionId="app.chooseAnOption"
+          />
+          <FormGroup>
+            <Col xs={2} className="text-right">
+              <label htmlFor="defaultContentJoinGroups" className="control-label">
+                <FormLabel
+                  helpId="user.myProfile.defaultContentJoinGroupsHelp"
+                  labelId="user.myProfile.defaultContentJoinGroups"
+                />
+              </label>
+            </Col>
+            <Col xs={10}>
+              <FieldArray
+                render={arrayHelpers => (<MultiSelectRenderer
+                  arrayHelpers={arrayHelpers}
+                  allOptions={selectGroups}
+                  selectedValues={[]}
+                  labelKey="text"
+                  valueKey="value"
+                  emptyOptionTextId="app.chooseAnOption"
+                  name="defaultContentJoinGroups"
+                />)}
+                name="defaultContentJoinGroups"
+                options={selectGroups}
+              />
+            </Col>
+          </FormGroup>
+          <Field
+            label={
+              <FormLabel
+                helpId="user.myProfile.defaultWidgetOwnerGroupHelp"
+                labelId="user.myProfile.defaultWidgetOwnerGroup"
+              />
+            }
+            component={SelectInput}
+            options={selectGroups}
+            name="defaultWidgetOwnerGroup"
+            defaultOptionId="app.chooseAnOption"
+          />
+          <Button
+            className="pull-right"
+            type="submit"
+            bsStyle="primary"
+            data-testid="settings_saveBtn"
+          >
+            <FormattedMessage id="app.save" />
+          </Button>
+        </Form>
+      </FormikForm>
     );
   }
 }
 
 AppSettingsFormBody.propTypes = {
   onDidMount: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   username: PropTypes.string.isRequired,
   selectGroups: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.string,
   })).isRequired,
-  defaultPageJoinGroups: PropTypes.arrayOf(PropTypes.string).isRequired,
-  defaultContentJoinGroups: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export default reduxForm({
-  form: 'userPreferences',
+export default withFormik({
+  displayName: 'userPreferences',
   enableReinitialize: true,
-  keepDirtyOnReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  handleSubmit: (values, { setSubmitting, props: { onSubmit, username } }) => {
+    onSubmit({ username, data: values }).then(() => setSubmitting(false));
+  },
 })(AppSettingsFormBody);
diff --git a/src/ui/users/my-profile/AppSettingsFormContainer.js b/src/ui/users/my-profile/AppSettingsFormContainer.js
index 292cd7cab..8ae7885d2 100644
--- a/src/ui/users/my-profile/AppSettingsFormContainer.js
+++ b/src/ui/users/my-profile/AppSettingsFormContainer.js
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { formValueSelector } from 'redux-form';
 import { getUsername } from '@entando/apimanager';
 
 import { updateUserPreferences } from 'state/user-preferences/actions';
@@ -17,8 +16,6 @@ export const mapStateToProps = state => ({
     value: code,
     text: name,
   })),
-  defaultPageJoinGroups: formValueSelector('userPreferences')(state, 'defaultPageJoinGroups') || [],
-  defaultContentJoinGroups: formValueSelector('userPreferences')(state, 'defaultContentJoinGroups') || [],
 });
 
 export const mapDispatchToProps = dispatch => ({
@@ -31,8 +28,6 @@ export const mapDispatchToProps = dispatch => ({
   },
 });
 
-
-export default connect(
-  mapStateToProps, mapDispatchToProps,
-  null, { pure: false },
-)(AppSettingsForm);
+export default connect(mapStateToProps, mapDispatchToProps, null, {
+  pure: false,
+})(AppSettingsForm);
diff --git a/src/ui/users/my-profile/AppSettingsFormContainer_bak.js b/src/ui/users/my-profile/AppSettingsFormContainer_bak.js
new file mode 100644
index 000000000..292cd7cab
--- /dev/null
+++ b/src/ui/users/my-profile/AppSettingsFormContainer_bak.js
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux';
+import { formValueSelector } from 'redux-form';
+import { getUsername } from '@entando/apimanager';
+
+import { updateUserPreferences } from 'state/user-preferences/actions';
+import { getUserPreferences } from 'state/user-preferences/selectors';
+import AppSettingsForm from 'ui/users/my-profile/AppSettingsForm';
+import { getGroupsList } from 'state/groups/selectors';
+import { fetchMyGroups } from 'state/groups/actions';
+
+export const mapStateToProps = state => ({
+  username: getUsername(state),
+  initialValues: {
+    ...getUserPreferences(state),
+  },
+  selectGroups: getGroupsList(state).map(({ code, name }) => ({
+    value: code,
+    text: name,
+  })),
+  defaultPageJoinGroups: formValueSelector('userPreferences')(state, 'defaultPageJoinGroups') || [],
+  defaultContentJoinGroups: formValueSelector('userPreferences')(state, 'defaultContentJoinGroups') || [],
+});
+
+export const mapDispatchToProps = dispatch => ({
+  onDidMount: () => {
+    dispatch(fetchMyGroups());
+  },
+  onSubmit: (values) => {
+    const { username, data } = values;
+    dispatch(updateUserPreferences(username, data));
+  },
+});
+
+
+export default connect(
+  mapStateToProps, mapDispatchToProps,
+  null, { pure: false },
+)(AppSettingsForm);
diff --git a/src/ui/users/my-profile/MyProfileEditForm.js b/src/ui/users/my-profile/MyProfileEditForm.js
index 899767e16..130e1aa3d 100644
--- a/src/ui/users/my-profile/MyProfileEditForm.js
+++ b/src/ui/users/my-profile/MyProfileEditForm.js
@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { reduxForm, Field, FieldArray, FormSection } from 'redux-form';
+import { withFormik, FieldArray } from 'formik';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import { Panel } from 'react-bootstrap';
 import { Form, Button, Row, Col } from 'patternfly-react';
-
-import RenderListField from 'ui/common/form/RenderListField';
+import { required, email } from '@entando/utils';
+import RenderListField from 'ui/common/formik-field/RenderListField';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
 import FormLabel from 'ui/common/form/FormLabel';
 import { BOOLEAN_OPTIONS, THREE_STATE_OPTIONS, getTranslatedOptions } from 'ui/users/common/const';
@@ -15,9 +15,7 @@ import {
   TYPE_BOOLEAN, TYPE_THREESTATE, TYPE_ENUMERATOR, TYPE_ENUMERATOR_MAP, TYPE_MONOLIST, TYPE_LIST,
   TYPE_COMPOSITE,
 } from 'state/data-types/const';
-import { getComponentType } from 'helpers/entities';
-
-const defaultAttrCodes = ['fullname', 'email'];
+import { UserProfileField } from 'ui/user-profile/common/UserProfileField';
 
 const getComponentOptions = (component, intl) => {
   const booleanOptions = getTranslatedOptions(intl, BOOLEAN_OPTIONS);
@@ -45,7 +43,8 @@ const getEnumeratorOptions = (component, items, separator, mandatory, intl) => {
   }
   switch (component) {
     case TYPE_ENUMERATOR:
-    { const itemsList = items.split(separator);
+    {
+      const itemsList = items.split(separator);
       itemsList.forEach((item) => {
         options.push({ optionDisplayName: item, value: item });
       });
@@ -74,43 +73,7 @@ const getHelpMessage = (validationRules, intl) => {
   return null;
 };
 
-const field = (intl, attribute, disabled) => {
-  const labelProp = defaultAttrCodes.includes(attribute.code) ? ({
-    labelId: `user.table.${attribute.code}`,
-  }) : ({
-    labelText: attribute.name,
-  });
-
-  return (
-    <Field
-      key={attribute.code}
-      component={getComponentType(attribute.type)}
-      name={attribute.code}
-      rows={3}
-      toggleElement={getComponentOptions(attribute.type, intl)}
-      options={getEnumeratorOptions(
-        attribute.type,
-        attribute.enumeratorStaticItems,
-        attribute.enumeratorStaticItemsSeparator,
-        attribute.mandatory,
-        intl,
-      )}
-      optionValue="value"
-      optionDisplayName="optionDisplayName"
-      label={<FormLabel
-        {...labelProp}
-        helpText={getHelpMessage(attribute.validationRules, intl)}
-        required={attribute.mandatory}
-      />}
-      disabled={disabled}
-    />
-  );
-};
-
-const renderCompositeAttribute = (intl, compositeAttributes, disabled) =>
-  compositeAttributes.map(attribute => field(intl, attribute, disabled));
-
-export class MyProfileEditFormBody extends Component {
+class MyProfileEditFormBody extends Component {
   constructor(props) {
     super(props);
 
@@ -118,22 +81,15 @@ export class MyProfileEditFormBody extends Component {
       editMode: false,
     };
 
-    this.submit = this.submit.bind(this);
     this.handleCancelClick = this.handleCancelClick.bind(this);
     this.handleEditClick = this.handleEditClick.bind(this);
+    this.changeMode = this.changeMode.bind(this);
   }
 
   componentDidMount() {
     this.props.onMount(this.props.username);
   }
 
-  submit(data) {
-    this.setState({
-      editMode: false,
-    });
-    this.props.onSubmit(data);
-  }
-
   handleCancelClick() {
     const { onCancel } = this.props;
     onCancel();
@@ -148,14 +104,32 @@ export class MyProfileEditFormBody extends Component {
     });
   }
 
+  changeMode() {
+    this.setState({
+      editMode: false,
+    });
+  }
+
   render() {
     const {
       profileTypesAttributes, defaultLanguage, languages, intl, userEmail, onChangeProfilePicture,
-      userProfileForm,
+      handleSubmit, setFieldValue, isValid, resetForm, values, isSubmitting,
     } = this.props;
 
     const { editMode } = this.state;
 
+    const field = (attribute, disabled) => (
+      <UserProfileField
+        key={attribute.code}
+        attribute={attribute}
+        intl={intl}
+        disabled={disabled}
+      />
+    );
+
+    const renderCompositeAttribute = (compositeAttributes, disabled) =>
+      compositeAttributes.map(attribute => field(attribute, disabled));
+
     const renderFieldArray = (attributeCode, attribute, component, language) => (<FieldArray
       key={attributeCode}
       component={component}
@@ -164,12 +138,12 @@ export class MyProfileEditFormBody extends Component {
       rows={3}
       toggleElement={getComponentOptions(attribute.type, intl)}
       options={getEnumeratorOptions(
-            attribute.nestedAttribute.type,
-            attribute.nestedAttribute.enumeratorStaticItems,
-            attribute.nestedAttribute.enumeratorStaticItemsSeparator,
-            attribute.nestedAttribute.mandatory,
-            intl,
-          )}
+        attribute.nestedAttribute.type,
+        attribute.nestedAttribute.enumeratorStaticItems,
+        attribute.nestedAttribute.enumeratorStaticItemsSeparator,
+        attribute.nestedAttribute.mandatory,
+        intl,
+      )}
       optionValue="value"
       optionDisplayName="optionDisplayName"
       label={<FormLabel
@@ -198,9 +172,9 @@ export class MyProfileEditFormBody extends Component {
               <Col xs={10}>
                 <Panel>
                   <Panel.Body>
-                    <FormSection name={attribute.code}>
-                      { renderCompositeAttribute(intl, attribute.compositeAttributes, !editMode)}
-                    </FormSection>
+                    <div name={attribute.code}>
+                      {renderCompositeAttribute(attribute.compositeAttributes, !editMode)}
+                    </div>
                   </Panel.Body>
                 </Panel>
               </Col>
@@ -223,17 +197,20 @@ export class MyProfileEditFormBody extends Component {
             </Row>
           );
         }
-        return field(intl, attribute, !editMode);
+        return field(attribute, !editMode);
       });
 
-    const { profilepicture } = userProfileForm;
+    const { profilepicture } = values;
+
     return (
-      <Form onSubmit={this.props.handleSubmit(this.submit)} horizontal className="MyProfileEditForm">
+      <Form horizontal className="MyProfileEditForm">
         <FormSectionTitle titleId="user.myProfile.uploadImage" requireFields={false} />
-        <input type="hidden" name="profilepicture" value={profilepicture} />
+        <input type="hidden" name="profilepicture" />
         <ProfileImageUploader
           image={profilepicture}
-          onChange={onChangeProfilePicture}
+          onChange={(e) => {
+            onChangeProfilePicture(setFieldValue, e);
+          }}
           gravatarEmail={userEmail}
           editable={editMode}
         />
@@ -249,13 +226,21 @@ export class MyProfileEditFormBody extends Component {
               className="pull-right"
               type="submit"
               bsStyle="primary"
+              disabled={!isValid || isSubmitting}
               data-testid="profile_saveBtn"
+              onClick={() => {
+                this.changeMode();
+                handleSubmit();
+              }}
             >
               <FormattedMessage id="app.save" />
             </Button>
             <Button
               className="pull-right"
-              onClick={this.handleCancelClick}
+              onClick={() => {
+                this.handleCancelClick();
+                resetForm();
+              }}
               style={{ marginRight: '12px' }}
               data-testid="profile_cancelBtn"
             >
@@ -280,9 +265,13 @@ export class MyProfileEditFormBody extends Component {
 MyProfileEditFormBody.propTypes = {
   onMount: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
+  resetForm: PropTypes.func.isRequired,
+  setFieldValue: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   username: PropTypes.string.isRequired,
+  values: PropTypes.shape({
+    profilepicture: PropTypes.string,
+  }),
   profileTypesAttributes: PropTypes.arrayOf(PropTypes.shape({
     type: PropTypes.string,
     code: PropTypes.string,
@@ -315,26 +304,38 @@ MyProfileEditFormBody.propTypes = {
   })).isRequired,
   intl: intlShape.isRequired,
   userEmail: PropTypes.string,
-  userProfileForm: PropTypes.shape({
-    email: PropTypes.string,
-    fullname: PropTypes.string,
-    id: PropTypes.string,
-    typeCode: PropTypes.string,
-    typeDescription: PropTypes.string,
-    profilepicture: PropTypes.string,
-  }),
   onChangeProfilePicture: PropTypes.func.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
 };
 
 MyProfileEditFormBody.defaultProps = {
   profileTypesAttributes: [],
   userEmail: undefined,
-  userProfileForm: {},
+  values: {},
 };
 
-const MyProfileEditForm = reduxForm({
-  form: 'UserProfile',
+const MyProfileEditForm = withFormik({
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  validate: (values) => {
+    const errors = {};
+    if (required(values.fullname)) {
+      errors.fullname = <FormattedMessage id="validateForm.required" />;
+    }
+    if (required(values.email)) {
+      errors.email = <FormattedMessage id="validateForm.required" />;
+    }
+    if (email(values.email)) {
+      errors.email = <FormattedMessage id="validateForm.email" />;
+    }
+    return errors;
+  },
   enableReinitialize: true,
-})(MyProfileEditFormBody);
+  handleSubmit(values, { props }) {
+    const { onSubmit } = props;
+    onSubmit(values);
+  },
+  optionDisplayName: 'optionDisplayName',
+})(injectIntl(MyProfileEditFormBody));
 
-export default injectIntl(MyProfileEditForm);
+export default MyProfileEditForm;
diff --git a/src/ui/users/my-profile/MyProfileEditFormContainer.js b/src/ui/users/my-profile/MyProfileEditFormContainer.js
index 588d66b98..9f7d51dae 100644
--- a/src/ui/users/my-profile/MyProfileEditFormContainer.js
+++ b/src/ui/users/my-profile/MyProfileEditFormContainer.js
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { reset, change } from 'redux-form';
 import { getUsername } from '@entando/apimanager';
 
 import { fetchMyUserProfile, updateMyUserProfile } from 'state/user-profile/actions';
@@ -9,7 +8,7 @@ import { getSelectedProfileTypeAttributes } from 'state/profile-types/selectors'
 import MyProfileEditForm from 'ui/users/my-profile/MyProfileEditForm';
 import { getPayloadForForm } from 'helpers/entities';
 import { getUserProfile, getUserEmail } from 'state/user-profile/selectors';
-import { getUserProfileForm } from 'state/forms/selectors';
+// import { getUserProfileForm } from 'state/forms/selectors';
 
 export const mapStateToProps = state => ({
   username: getUsername(state),
@@ -23,7 +22,6 @@ export const mapStateToProps = state => ({
     getActiveLanguages(state),
   ),
   userEmail: getUserEmail(state),
-  userProfileForm: getUserProfileForm(state),
 });
 
 export const mapDispatchToProps = dispatch => ({
@@ -35,9 +33,11 @@ export const mapDispatchToProps = dispatch => ({
     dispatch(updateMyUserProfile(userprofile, false));
   },
   onCancel: () => {
-    dispatch(reset('UserProfile'));
+    dispatch(fetchMyUserProfile('UserProfile'));
+  },
+  onChangeProfilePicture: (setFieldValue, picture) => {
+    setFieldValue('profilepicture', picture);
   },
-  onChangeProfilePicture: picture => dispatch(change('UserProfile', 'profilepicture', picture)),
 });
 
 export default connect(
diff --git a/src/ui/users/restrictions/RestrictionsForm.js b/src/ui/users/restrictions/RestrictionsForm.js
index a5fa7aa8f..5f20a7328 100644
--- a/src/ui/users/restrictions/RestrictionsForm.js
+++ b/src/ui/users/restrictions/RestrictionsForm.js
@@ -1,12 +1,13 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { Col, Form, FormGroup, Button, ControlLabel, Spinner } from 'patternfly-react';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from 'yup';
+import { Button, Spinner } from 'patternfly-react';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import { isNumber } from '@entando/utils';
 
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import FormLabel from 'ui/common/form/FormLabel';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import SwitchInput from 'ui/common/formik-field/SwitchInput';
 
 export const montshSinceLogin = (value, allValues) => (
   (value > allValues.maxMonthsPasswordValid) ?
@@ -21,99 +22,110 @@ const msgs = defineMessages({
   },
 });
 
-export class RestrictionsFormBody extends Component {
-  componentWillMount() {
-    this.props.onWillMount();
-  }
-
-  render() {
-    const { passwordActive: disabled, intl } = this.props;
+const formSchema = Yup.object().shape({
+  enableGravatarIntegration: Yup.bool(),
+  passwordAlwaysActive: Yup.bool(),
+  restrictionsActive: Yup.bool(),
+  maxMonthsPasswordValid: Yup.number()
+    .nullable()
+    .integer(<FormattedMessage id="validateForm.number" />),
+  lastAccessPasswordExpirationMonths: Yup.number()
+    .nullable()
+    .integer(<FormattedMessage id="validateForm.number" />)
+    .max(Yup.ref('maxMonthsPasswordValid'), <FormattedMessage id="user.restrictions.form.monthsSinceLastLogin.error" />),
+});
 
-    return (
-      <Spinner loading={!!this.props.loading}>
+const RestrictionsForm = ({
+  loading, onMount, intl, initialValues, onSubmit,
+}) => {
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
 
+  const handleSubmit = (values) => {
+    onSubmit(values);
+  };
 
-        <Form onSubmit={this.props.handleSubmit} horizontal className="UserRestrictionsForm">
-          <legend>
-            <FormattedMessage id="user.restrictions.passwordSection" />
-          </legend>
-          <FormGroup controlId="passwordAlwaysActive">
-            <Col xs={3}>
-              <ControlLabel>
-                <FormattedMessage id="user.restrictions.form.active" />
-              </ControlLabel>
-            </Col>
-            <Col xs={9}>
-              <Field
-                component={SwitchRenderer}
-                name="passwordAlwaysActive"
-              />
-            </Col>
-          </FormGroup>
-          <Field
-            label={<FormattedMessage id="user.restrictions.form.maxMonths" />}
-            labelSize={3}
-            component={RenderTextInput}
-            name="maxMonthsPasswordValid"
-            disabled={disabled}
-            validate={isNumber}
-            alignClass="text-left"
-            append={intl.formatMessage(msgs.months)}
-          />
-          <Field
-            label={<FormattedMessage id="user.restrictions.form.monthsSinceLastLogin" />}
-            labelSize={3}
-            component={RenderTextInput}
-            name="lastAccessPasswordExpirationMonths"
-            disabled={disabled}
-            validate={[isNumber, montshSinceLogin]}
-            alignClass="text-left"
-            append={intl.formatMessage(msgs.months)}
-          />
-          <legend>
-            <FormattedMessage id="user.restrictions.avatarSection" />
-          </legend>
-          <FormGroup controlId="enableGravatarIntegration" disabled={false}>
-            <Col xs={3}>
-              <ControlLabel>
-                <FormattedMessage id="user.restrictions.form.gravatar" />
-              </ControlLabel>
-            </Col>
-            <Col xs={9}>
-              <Field
-                component={SwitchRenderer}
-                name="enableGravatarIntegration"
-              />
-            </Col>
-          </FormGroup>
-          <Button
-            className="pull-right"
-            type="submit"
-            bsStyle="primary"
-          >
-            <FormattedMessage id="app.save" />
-          </Button>
-        </Form>
-      </Spinner>
-    );
-  }
-}
+  return (
+    <Spinner loading={!!loading}>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={formSchema}
+        onSubmit={handleSubmit}
+        validateOnMount
+        enableReinitialize
+      >
+        {formik => (
+          <Form className="UserRestrictionsForm form-horizontal" aria-label="User Restrictions Form">
+            <legend>
+              <FormattedMessage id="user.restrictions.passwordSection" />
+            </legend>
+            <Field
+              component={SwitchInput}
+              name="passwordAlwaysActive"
+              label={<FormLabel labelId="user.restrictions.form.active" />}
+              labelSize={3}
+              alignClass="text-left"
+            />
+            <Field
+              label={<FormattedMessage id="user.restrictions.form.maxMonths" />}
+              labelSize={3}
+              component={RenderTextInput}
+              name="maxMonthsPasswordValid"
+              disabled={formik.values.passwordAlwaysActive}
+              alignClass="text-left"
+              append={intl.formatMessage(msgs.months)}
+            />
+            <Field
+              label={<FormattedMessage id="user.restrictions.form.monthsSinceLastLogin" />}
+              labelSize={3}
+              component={RenderTextInput}
+              name="lastAccessPasswordExpirationMonths"
+              disabled={formik.values.passwordAlwaysActive}
+              alignClass="text-left"
+              append={intl.formatMessage(msgs.months)}
+            />
+            <legend>
+              <FormattedMessage id="user.restrictions.avatarSection" />
+            </legend>
+            <Field
+              component={SwitchInput}
+              name="enableGravatarIntegration"
+              label={<FormLabel labelId="user.restrictions.form.gravatar" />}
+              labelSize={3}
+              alignClass="text-left"
+            />
+            <Button
+              className="pull-right"
+              type="submit"
+              bsStyle="primary"
+              disabled={!formik.isValid}
+            >
+              <FormattedMessage id="app.save" />
+            </Button>
+          </Form>
+        )}
+      </Formik>
+    </Spinner>
+  );
+};
 
-RestrictionsFormBody.propTypes = {
+RestrictionsForm.propTypes = {
   intl: intlShape.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  onWillMount: PropTypes.func.isRequired,
-  passwordActive: PropTypes.bool,
+  onMount: PropTypes.func,
   loading: PropTypes.bool,
+  onSubmit: PropTypes.func.isRequired,
+  initialValues: PropTypes.shape({
+    enableGravatarIntegration: PropTypes.bool,
+    lastAccessPasswordExpirationMonths: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    maxMonthsPasswordValid: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    passwordAlwaysActive: PropTypes.bool,
+  }).isRequired,
 };
 
-RestrictionsFormBody.defaultProps = {
-  passwordActive: false,
+RestrictionsForm.defaultProps = {
+  onMount: () => {},
   loading: false,
 };
 
-const RestrictionsForm = reduxForm({
-  form: 'user-restrictions',
-})(RestrictionsFormBody);
-
 export default injectIntl(RestrictionsForm);
diff --git a/src/ui/users/restrictions/RestrictionsFormContainer.js b/src/ui/users/restrictions/RestrictionsFormContainer.js
index 0b85bc272..05ac8849f 100644
--- a/src/ui/users/restrictions/RestrictionsFormContainer.js
+++ b/src/ui/users/restrictions/RestrictionsFormContainer.js
@@ -1,29 +1,42 @@
-import { connect } from 'react-redux';
-import { injectIntl } from 'react-intl';
-import { formValueSelector } from 'redux-form';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { fetchUserSettings, updateUserSettings } from 'state/user-settings/actions';
 import RestrictionsForm from 'ui/users/restrictions/RestrictionsForm';
 import { getLoading } from 'state/loading/selectors';
+import { getUserSettings } from 'state/user-settings/selectors';
 
-export const mapStateToProps = state => ({
-  passwordActive: formValueSelector('user-restrictions')(state, 'passwordAlwaysActive'),
-  loading: getLoading(state).userSettings,
-});
+const RestrictionsFormContainer = () => {
+  const dispatch = useDispatch();
+  const loading = useSelector(getLoading).userSettings;
+  const userSettings = useSelector(getUserSettings);
 
-export const mapDispatchToProps = dispatch => ({
-  onWillMount: () => dispatch(fetchUserSettings()),
-  onSubmit: (settings) => {
-    dispatch(updateUserSettings({
-      ...settings,
-      restrictionsActive: !settings.passwordAlwaysActive,
-    }));
-  },
-});
+  const { maxMonthsPasswordValid, lastAccessPasswordExpirationMonths } = userSettings;
 
+  const initialValues = useMemo(() => ({
+    ...userSettings,
+    maxMonthsPasswordValid:
+      maxMonthsPasswordValid === null ? 0 : maxMonthsPasswordValid,
+    lastAccessPasswordExpirationMonths:
+      lastAccessPasswordExpirationMonths === null ? 0 : lastAccessPasswordExpirationMonths,
+  }), [userSettings, maxMonthsPasswordValid, lastAccessPasswordExpirationMonths]);
 
-const RestrictionsFormContainer = connect(mapStateToProps, mapDispatchToProps, null, {
-  pure: false,
-})(RestrictionsForm);
+  const handleMount = useCallback(() => {
+    dispatch(fetchUserSettings());
+  }, [dispatch]);
 
-export default injectIntl(RestrictionsFormContainer);
+  const handleSubmit = useCallback((values) => {
+    dispatch(updateUserSettings({ ...values, restrictionsActive: !values.passwordAlwaysActive }));
+  }, [dispatch]);
+
+  return (
+    <RestrictionsForm
+      loading={loading}
+      onMount={handleMount}
+      onSubmit={handleSubmit}
+      initialValues={initialValues}
+    />
+  );
+};
+
+export default RestrictionsFormContainer;
diff --git a/src/ui/widget-forms/ContentConfigFormBody.js b/src/ui/widget-forms/ContentConfigFormBody.js
index cfe44453e..bec30eaca 100644
--- a/src/ui/widget-forms/ContentConfigFormBody.js
+++ b/src/ui/widget-forms/ContentConfigFormBody.js
@@ -1,20 +1,21 @@
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'react-intl';
-import { reduxForm, FieldArray, Field } from 'redux-form';
+import { withFormik, FieldArray, Field } from 'formik';
 import { Button, Row, Col, Alert } from 'patternfly-react';
 import { Collapse } from 'react-collapse';
 import { isUndefined, get, uniq } from 'lodash';
 import { maxLength, required } from '@entando/utils';
 import ContentTableRenderer from 'ui/widget-forms/ContentTableRenderer';
 import SectionTitle from 'ui/common/SectionTitle';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 import NoDefaultWarningModal from 'ui/widget-forms/publish-single-content-config/NoDefaultWarningModal';
 import { MULTIPLE_CONTENTS_CONFIG } from 'ui/widget-forms/const';
 import WidgetConfigPortal from 'ui/widgets/config/WidgetConfigPortal';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
 const maxLength70 = maxLength(70);
 
@@ -30,7 +31,7 @@ export class ContentConfigFormBody extends PureComponent {
   }
 
   componentDidMount() {
-    const { onDidMount, cloneMode } = this.props;
+    const { onDidMount, cloneMode, setFieldValue } = this.props;
     if (cloneMode) {
       // eslint-disable-next-line react/no-did-mount-set-state
       this.setState({
@@ -38,12 +39,16 @@ export class ContentConfigFormBody extends PureComponent {
         publishingSettingsOpen: true,
       });
     }
-    onDidMount();
+    onDidMount(setFieldValue);
   }
 
   componentDidUpdate(prevProps) {
-    const { chosenContents: prevContents } = prevProps;
-    const { chosenContents, chosenContentTypes, pushContentTypeDetails } = this.props;
+    const { values: { contents: prevContents } } = prevProps;
+    const {
+      values: { contents: chosenContents, chosenContentTypes = [] },
+      setFieldValue,
+      pushContentTypeDetails,
+    } = this.props;
     if (chosenContents !== prevContents) {
       const chosenContentTypeIds = chosenContentTypes.map(({ code }) => code);
       const contentTypesToLoad = uniq(chosenContents.map((content) => {
@@ -51,7 +56,7 @@ export class ContentConfigFormBody extends PureComponent {
         const typeCodeSub = contentId ? contentId.substr(0, 3) : '';
         return get(content, 'typeCode', typeCodeSub);
       })).filter(code => !chosenContentTypeIds.includes(code));
-      pushContentTypeDetails(contentTypesToLoad);
+      pushContentTypeDetails(contentTypesToLoad, chosenContentTypes, setFieldValue);
     }
   }
 
@@ -77,29 +82,32 @@ export class ContentConfigFormBody extends PureComponent {
       contentTemplates,
       extFormName,
       putPrefixField,
-      invalid,
-      submitting,
+      isValid,
+      isSubmitting,
       languages,
       pages,
       intl,
       widgetCode,
-      chosenContents,
       dirty,
       onCancel,
       onDiscard,
       onSave,
-      ownerGroup,
-      joinGroups,
-      widgetConfigFormData,
       defaultLanguageCode,
+      values,
+      submitForm,
     } = this.props;
+    const {
+      ownerGroup,
+      joinGroups,
+      contents: chosenContents,
+    } = values;
     const { extraOptionsOpen, publishingSettingsOpen } = this.state;
     const multipleContentsMode = widgetCode === MULTIPLE_CONTENTS_CONFIG;
     const normalizedLanguages = languages.map(lang => lang.code);
     const normalizedPages = this.normalizeTitles(pages || []);
     const noContents = chosenContents.length === 0;
 
-    const defaultPageValue = widgetConfigFormData[putPrefixField('pageLink')];
+    const defaultPageValue = values[putPrefixField('pageLink')];
     const defaultLangLinkTextRequired = defaultPageValue !== null && defaultPageValue !== undefined && defaultPageValue !== '';
 
     const elementNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 50, 100, 500]
@@ -112,27 +120,31 @@ export class ContentConfigFormBody extends PureComponent {
           component={RenderTextInput}
           name={putPrefixField(`title_${langCode}`)}
           label={<FormLabel langLabelText={langCode} labelId="app.title" />}
-          validate={[maxLength70]}
+          validate={val => convertReduxValidationsToFormikValidations(val, [maxLength70])}
         />
       )) : null;
 
     const renderLinkTextFields = !isUndefined(normalizedLanguages) ? normalizedLanguages
-      .map(langCode => (
-        <Field
-          key={langCode}
-          component={RenderTextInput}
-          name={putPrefixField(`linkDescr_${langCode}`)}
-          label={(
-            <FormLabel
-              langLabelText={langCode}
-              labelId="widget.form.linkText"
-              required={langCode === defaultLanguageCode && defaultLangLinkTextRequired}
-            />
-)}
-          validate={langCode === defaultLanguageCode && defaultLangLinkTextRequired
-            ? [required, maxLength70] : [maxLength70]}
-        />
-      )) : null;
+      .map(langCode =>
+        (
+          <Field
+            key={langCode}
+            component={RenderTextInput}
+            name={putPrefixField(`linkDescr_${langCode}`)}
+            label={(
+              <FormLabel
+                langLabelText={langCode}
+                labelId="widget.form.linkText"
+                required={langCode === defaultLanguageCode && defaultLangLinkTextRequired}
+              />
+          )}
+            validate={val => convertReduxValidationsToFormikValidations(
+            val,
+            langCode === defaultLanguageCode && defaultLangLinkTextRequired
+            ? [required, maxLength70] : [maxLength70],
+          )}
+          />
+        )) : null;
 
     const handleCollapsePublishingSettings = () => this.collapseSection('publishingSettingsOpen');
     const handleCollapseExtraOptions = () => this.collapseSection('extraOptionsOpen');
@@ -147,7 +159,7 @@ export class ContentConfigFormBody extends PureComponent {
 
     const pageIsRequired = !isUndefined(normalizedLanguages)
       ? normalizedLanguages.some((langCode) => {
-        const descriptionValue = widgetConfigFormData[putPrefixField(`linkDescr_${langCode}`)];
+        const descriptionValue = values[putPrefixField(`linkDescr_${langCode}`)];
         return descriptionValue !== null && descriptionValue !== undefined && descriptionValue !== '';
       }) : false;
 
@@ -176,7 +188,9 @@ export class ContentConfigFormBody extends PureComponent {
                   label={
                     <FormLabel labelId="widget.form.page" required={!!pageIsRequired} />
             }
-                  validate={pageIsRequired ? [required] : []}
+                  validate={val =>
+                    convertReduxValidationsToFormikValidations(val, pageIsRequired ?
+                      [required] : [])}
                   options={normalizedPages}
                   optionValue="code"
                   optionDisplayName="name"
@@ -228,17 +242,19 @@ export class ContentConfigFormBody extends PureComponent {
         <Row>
           <Col xs={12}>
             <FieldArray
-              component={ContentTableRenderer}
-              contentTemplates={contentTemplates}
+              render={arrayHelpers => (
+                <ContentTableRenderer
+                  intl={intl}
+                  values={values[putPrefixField('contents')]}
+                  ownerGroup={ownerGroup}
+                  joinGroups={joinGroups}
+                  multipleContentsMode={multipleContentsMode}
+                  contentTemplates={contentTemplates}
+                  arrayHelpers={arrayHelpers}
+                  name={putPrefixField('contents')}
+                />
+              )}
               name={putPrefixField('contents')}
-              intl={intl}
-              ownerGroup={ownerGroup}
-              joinGroups={joinGroups}
-              multipleContentsMode={multipleContentsMode}
-            />
-            <FieldArray
-              name={putPrefixField('chosenContentTypes')}
-              component="span"
             />
           </Col>
         </Row>
@@ -252,8 +268,8 @@ export class ContentConfigFormBody extends PureComponent {
                   className="pull-right AddContentTypeFormBody__save--btn"
                   type="submit"
                   bsStyle="primary"
-                  disabled={invalid || submitting || noContents}
-                  onClick={onSave}
+                  disabled={!isValid || isSubmitting || noContents}
+                  onClick={() => onSave(submitForm)}
                 >
                   <FormattedMessage id="app.save" />
                 </Button>
@@ -267,9 +283,9 @@ export class ContentConfigFormBody extends PureComponent {
               </WidgetConfigPortal>
               <ConfirmCancelModalContainer
                 contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
-                invalid={invalid}
-                submitting={submitting}
-                onSave={onSave}
+                invalid={!isValid}
+                submitting={isSubmitting}
+                onClick={() => onSave(submitForm)}
                 onDiscard={onDiscard}
               />
               <NoDefaultWarningModal multipleMode />
@@ -312,46 +328,59 @@ ContentConfigFormBody.propTypes = {
   pages: PropTypes.arrayOf(PropTypes.shape({})),
   onDidMount: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   language: PropTypes.string.isRequired,
   widgetCode: PropTypes.string.isRequired,
-  chosenContents: PropTypes.arrayOf(PropTypes.shape({})),
   dirty: PropTypes.bool,
   onDiscard: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
   pushContentTypeDetails: PropTypes.func.isRequired,
-  chosenContentTypes: PropTypes.arrayOf(PropTypes.shape({})),
-  ownerGroup: PropTypes.string,
-  joinGroups: PropTypes.arrayOf(PropTypes.string),
   extFormName: PropTypes.string,
   putPrefixField: PropTypes.func,
   cloneMode: PropTypes.bool,
-  widgetConfigFormData: PropTypes.shape({}),
   defaultLanguageCode: PropTypes.string,
+  values: PropTypes.shape({
+    contents: PropTypes.arrayOf(PropTypes.shape({})),
+    chosenContentTypes: PropTypes.arrayOf(PropTypes.shape({})),
+    ownerGroup: PropTypes.string,
+    joinGroups: PropTypes.arrayOf(PropTypes.string),
+  }),
+  errors: PropTypes.shape({}),
+  submitForm: PropTypes.func,
+  setFieldValue: PropTypes.func,
 };
 
 ContentConfigFormBody.defaultProps = {
   languages: [],
   pages: [],
-  chosenContents: [],
-  chosenContentTypes: [],
   dirty: false,
-  ownerGroup: '',
-  joinGroups: null,
   extFormName: '',
-  invalid: false,
-  submitting: false,
+  isValid: true,
+  isSubmitting: false,
   handleSubmit: () => {},
   putPrefixField: name => name,
   cloneMode: false,
-  widgetConfigFormData: {},
   defaultLanguageCode: 'en',
+  values: {
+    contents: [],
+    chosenContentTypes: [],
+    ownerGroup: '',
+    joinGroups: [],
+  },
+  errors: {},
+  submitForm: () => {},
+  setFieldValue: () => {},
 };
 
-export default reduxForm({
-  form: MultipleContentsConfigContainerId,
-  keepDirtyOnReinitialize: true,
+export default withFormik({
+  displayName: MultipleContentsConfigContainerId,
   enableReinitialize: true,
+  validateOnChange: true,
+  validateOnBlur: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  handleSubmit: (values, { setSubmitting, props: { onSubmit } }) => {
+    onSubmit(values).then(() => setSubmitting(false));
+  },
 })(ContentConfigFormBody);
diff --git a/src/ui/widget-forms/ContentTableRenderer.js b/src/ui/widget-forms/ContentTableRenderer.js
index ad920534c..d0d6519e6 100644
--- a/src/ui/widget-forms/ContentTableRenderer.js
+++ b/src/ui/widget-forms/ContentTableRenderer.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import PropTypes from 'prop-types';
 import { Table } from 'react-bootstrap';
 import { FormattedMessage, intlShape } from 'react-intl';
@@ -7,19 +7,15 @@ import { Button, ButtonGroup } from 'patternfly-react';
 import ContentsFilterBrowserContainer from 'ui/widget-forms/contents-filter/ContentsFilterBrowserContainer';
 
 const ContentTableRenderer = ({
-  fields, contentTemplates, intl, multipleContentsMode, ownerGroup, joinGroups,
+  arrayHelpers, contentTemplates, intl, multipleContentsMode, ownerGroup, joinGroups, values, name,
 }) => {
-  const handlePickContent = content => fields.push({
+  const handlePickContent = content => arrayHelpers.push({
     ...content, contentId: content.id, modelId: null, contentDescription: content.description,
   });
 
-  const contentRowIds = fields.map((field, i) => {
-    const content = fields.get(i);
-    return content.id;
-  });
+  const contentRowIds = values.map(content => content.id);
 
-  const renderContentRows = fields.map((field, i) => {
-    const content = fields.get(i);
+  const renderContentRows = values.map((content, i) => {
     const contentTypeCode = content.typeCode || content.contentId.substr(0, 3);
     const filterByCode = contentTemplate => contentTemplate.contentType === contentTypeCode;
     const contentTemplatesByContentType = [{ id: 'default', descr: intl.formatMessage({ id: 'widget.form.default' }) },
@@ -35,8 +31,8 @@ const ContentTableRenderer = ({
       <tr key={`${content.contentId}-${i}`}>
         <td className="text-center" style={{ verticalAlign: 'middle' }}>
           <div
-            onClick={() => fields.remove(i)}
-            onKeyDown={() => fields.remove(i)}
+            onClick={() => arrayHelpers.remove(i)}
+            onKeyDown={() => arrayHelpers.remove(i)}
             tabIndex={0}
             role="button"
           >
@@ -46,18 +42,18 @@ const ContentTableRenderer = ({
         <td>
           {content.contentId} - {content.contentDescription}
           <Field
-            name={`${field}.contentId`}
+            name={`${name}[${i}].contentId`}
             component="span"
           />
           <Field
-            name={`${field}.contentDescription`}
+            name={`${name}[${i}].contentDescription`}
             component="span"
           />
         </td>
         <td>
           <Field
             component="select"
-            name={`${field}.modelId`}
+            name={`${name}[${i}].modelId`}
             className="form-control"
           >
             {contentTemplateOptions}
@@ -68,12 +64,12 @@ const ContentTableRenderer = ({
           <td className="text-center">
             <ButtonGroup bsSize="small">
               {i !== 0 && (
-              <Button onClick={() => fields.swap(i, i - 1)}>
+              <Button onClick={() => arrayHelpers.swap(i, i - 1)}>
                 <span className="icon fa fa-sort-asc" />
               </Button>
               )}
-              {i !== fields.length - 1 && (
-              <Button onClick={() => fields.swap(i, i + 1)}>
+              {i !== values.length - 1 && (
+              <Button onClick={() => arrayHelpers.swap(i, i + 1)}>
                 <span className="icon fa fa-sort-desc" />
               </Button>
               )}
@@ -125,22 +121,25 @@ const ContentTableRenderer = ({
 
 ContentTableRenderer.propTypes = {
   intl: intlShape.isRequired,
-  fields: PropTypes.shape({
-    push: PropTypes.func,
-    get: PropTypes.func,
-    remove: PropTypes.func,
-    swap: PropTypes.func,
-    map: PropTypes.func,
-    length: PropTypes.number,
-  }).isRequired,
   multipleContentsMode: PropTypes.bool,
   contentTemplates: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   ownerGroup: PropTypes.string.isRequired,
   joinGroups: PropTypes.arrayOf(PropTypes.string).isRequired,
+  name: PropTypes.string.isRequired,
+  arrayHelpers: PropTypes.shape({
+    push: PropTypes.func,
+    remove: PropTypes.func,
+    swap: PropTypes.func,
+    form: PropTypes.shape({
+      values: PropTypes.shape({}),
+    }),
+  }).isRequired,
+  values: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 ContentTableRenderer.defaultProps = {
   multipleContentsMode: true,
+  values: [],
 };
 
 export default ContentTableRenderer;
diff --git a/src/ui/widget-forms/ContentsQueryConfig.js b/src/ui/widget-forms/ContentsQueryConfig.js
index ca621eb30..b1e6984ea 100644
--- a/src/ui/widget-forms/ContentsQueryConfig.js
+++ b/src/ui/widget-forms/ContentsQueryConfig.js
@@ -1,23 +1,24 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { addToast, TOAST_SUCCESS } from '@entando/messages';
+import { ROUTE_APP_BUILDER_PAGE_CONFIG } from 'app-init/router';
 import { FormattedMessage, intlShape } from 'react-intl';
-import { Field, FieldArray, reduxForm } from 'redux-form';
+import { Field, FieldArray, withFormik, getIn } from 'formik';
 import { Collapse } from 'react-collapse';
 import { Button, Row, Col, FormGroup, Alert } from 'patternfly-react';
-import { required, maxLength } from '@entando/utils';
+import { routeConverter, required, maxLength } from '@entando/utils';
 import { isUndefined } from 'lodash';
-
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderSelectInput from 'ui/common/formik-field/SelectInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import SectionTitle from 'ui/common/SectionTitle';
-import MultiFilterSelectRenderer from 'ui/common/form/MultiFilterSelectRenderer';
-import FiltersSelectRenderer from 'ui/common/form/FiltersSelectRenderer';
+import MultiFilterSelectRenderer from 'ui/common/formik-field/MultiFilterSelectRenderer';
+import FiltersSelectRenderer from 'ui/common/formik-field/FiltersSelectRenderer';
 import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 import NoDefaultWarningModal from 'ui/widget-forms/publish-single-content-config/NoDefaultWarningModal';
-
 import { CONTENTS_QUERY_CONFIG } from 'ui/widget-forms/const';
 import WidgetConfigPortal from 'ui/widgets/config/WidgetConfigPortal';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
 export const ContentsQueryContainerId = `widgets.${CONTENTS_QUERY_CONFIG}`;
 
@@ -53,10 +54,18 @@ export class ContentsQueryFormBody extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { selectedContentType: prevContentType } = prevProps;
-    const { selectedContentType, onChangeContentType } = this.props;
-    if (selectedContentType !== prevContentType) {
-      onChangeContentType(selectedContentType);
+    const { values: prevValues } = prevProps;
+    const {
+      onChangeContentType, values: currentValues, setFieldValue, putPrefixField,
+      contentType, initialValues, setSelectedContentType, contentTypes,
+    } = this.props;
+    if (initialValues.contentType !== '' && !contentType.code) {
+      const selectedContentTypeFromForm = contentTypes
+        .find(ctype => ctype.code === initialValues.contentType);
+      if (selectedContentTypeFromForm) setSelectedContentType(selectedContentTypeFromForm);
+    }
+    if (getIn(prevValues, putPrefixField('contentType')) !== getIn(currentValues, putPrefixField('contentType'))) {
+      onChangeContentType(getIn(currentValues, putPrefixField('contentType')), setFieldValue);
     }
   }
 
@@ -81,11 +90,12 @@ export class ContentsQueryFormBody extends Component {
   renderFormFields() {
     const {
       contentTypes, contentType, contentTemplates, categories, pages,
-      onResetModelId, selectedContentType, selectedCategories,
+      onResetModelId,
       intl, onChangeFilterValue, onResetFilterOption, onChangeFilterAttribute,
-      languages, onToggleInclusiveOr, selectedInclusiveOr, extFormName,
-      invalid, submitting, dirty, onCancel, onDiscard, onSave, putPrefixField,
-      widgetConfigFormData, defaultLanguageCode,
+      languages, onToggleInclusiveOr, extFormName,
+      isValid, isDirty, isSubmitting, onCancel, onDiscard, putPrefixField,
+      widgetConfigFormData, defaultLanguageCode, values, setFieldValue, handleSubmit,
+      onSave, submitForm,
     } = this.props;
     const {
       publishingSettings, filters: filtersPanel,
@@ -99,7 +109,7 @@ export class ContentsQueryFormBody extends Component {
 
     const normalizedLanguages = languages.map(lang => lang.code);
 
-    const defaultPageValue = widgetConfigFormData[putPrefixField('pageLink')];
+    const defaultPageValue = getIn(values, putPrefixField('pageLink'));
     const defaultLangLinkTextRequired = defaultPageValue !== null && defaultPageValue !== undefined && defaultPageValue !== '';
 
     const renderTitleFields = !isUndefined(normalizedLanguages) ? normalizedLanguages
@@ -109,7 +119,7 @@ export class ContentsQueryFormBody extends Component {
           component={RenderTextInput}
           name={putPrefixField(`title_${langCode}`)}
           label={<FormLabel langLabelText={langCode} labelId="app.title" />}
-          validate={[maxLength70]}
+          validate={value => convertReduxValidationsToFormikValidations(value, [maxLength70])}
         />
       )) : null;
 
@@ -125,9 +135,15 @@ export class ContentsQueryFormBody extends Component {
               labelId="widget.form.linkText"
               required={langCode === defaultLanguageCode && defaultLangLinkTextRequired}
             />
-)}
-          validate={langCode === defaultLanguageCode && defaultLangLinkTextRequired
-            ? [required, maxLength70] : [maxLength70]}
+          )}
+          validate={value =>
+            convertReduxValidationsToFormikValidations(
+              value,
+              langCode === defaultLanguageCode
+              && defaultLangLinkTextRequired
+              ? [required, maxLength70] : [maxLength70],
+            )
+          }
         />
       )) : null;
 
@@ -139,7 +155,7 @@ export class ContentsQueryFormBody extends Component {
 
     const inclusiveOrOptions = [{ id: 'true', label: intl.formatMessage({ id: 'widget.form.inclusiveOr' }) }];
 
-    const renderCategories = selectedCategories;
+    const renderCategories = getIn(values, putPrefixField('categories'));
 
     const getListAttributeFilters = () => {
       if (!contentType.attributes) {
@@ -157,11 +173,15 @@ export class ContentsQueryFormBody extends Component {
       <Button
         bsStyle="default"
         type="button"
-        disabled={selectedCategories.length < 2 && selectedCategories.length !== 0}
-        active={Boolean(selectedInclusiveOr)}
-        onClick={() => onToggleInclusiveOr(selectedInclusiveOr)}
+        disabled={
+          !!getIn(values, putPrefixField('categories'))
+          && (getIn(values, putPrefixField('categories')).length < 2
+          && getIn(values, putPrefixField('categories')).length !== 0)
+        }
+        active={Boolean(getIn(values, putPrefixField('orClauseCategoryFilter')))}
+        onClick={() => onToggleInclusiveOr(getIn(values, putPrefixField('orClauseCategoryFilter')), setFieldValue)}
         className={`ContentsQueryForm__inclusiveOr
-    ${selectedInclusiveOr ? 'ContentsQueryForm__inclusiveOr--active' : ''}`}
+    ${getIn(values, putPrefixField('orClauseCategoryFilter')) ? 'ContentsQueryForm__inclusiveOr--active' : ''}`}
       >
         <FormattedMessage
           id="widget.form.inclusiveOr"
@@ -170,14 +190,14 @@ export class ContentsQueryFormBody extends Component {
       </Button>
     );
 
-    const renderSaveButton = selectedContentType
+    const renderSaveButton = getIn(values, putPrefixField('contentType'))
       && (
       <Button
         className="pull-right AddContentTypeFormBody__save--btn"
         type="submit"
         bsStyle="primary"
-        disabled={invalid || submitting}
-        onClick={onSave}
+        disabled={!isValid || isSubmitting}
+        onClick={() => { onSave(submitForm); handleSubmit(); }}
       >
         <FormattedMessage id="app.save" />
       </Button>
@@ -211,13 +231,13 @@ export class ContentsQueryFormBody extends Component {
       ...attributeFilters.map(({ code }) => ({ [code]: [] })),
     };
 
-    const handleContentTypeChange = () => onResetModelId();
+    const handleContentTypeChange = () => onResetModelId(setFieldValue);
     const handleCollapsePublishingSettings = () => this.collapseSection('publishingSettings');
     const handleCollapseFilters = () => this.collapseSection('filters');
     const handleCollapseExtraOptions = () => this.collapseSection('extraOptions');
     const handleCollapseFrontendFilters = () => this.collapseSection('frontendFilters');
     const handleCancelClick = () => {
-      if (dirty) {
+      if (isDirty) {
         onCancel();
       } else {
         onDiscard();
@@ -234,21 +254,23 @@ export class ContentsQueryFormBody extends Component {
                 noRequired
               />
               <Field
-                component={RenderSelectInput}
                 name={putPrefixField('contentType')}
                 label={
                   <FormLabel labelId="dataModel.type" />
-                  }
+                }
                 options={contentTypes}
                 optionValue="code"
                 optionDisplayName="name"
                 defaultOptionId="app.enumerator.none"
-                onChange={handleContentTypeChange}
+                component={RenderSelectInput}
+                onChange={() => {
+                  handleContentTypeChange();
+                }}
               />
             </fieldset>
           </Col>
         </Row>
-        <div className={selectedContentType ? 'visible' : 'hidden'}>
+        <div className={getIn(values, putPrefixField('contentType')) ? 'visible' : 'hidden'}>
           <Row className="InfoFormBody">
             <Col xs={12}>
               <fieldset className="no-padding">
@@ -320,19 +342,22 @@ export class ContentsQueryFormBody extends Component {
                     </label>
                     <Col xs={12} sm={10}>
                       <FieldArray
-                        component={MultiFilterSelectRenderer}
                         name={putPrefixField('categories')}
-                        options={allCategories}
-                        selectedValues={renderCategories}
-                        labelKey="name"
-                        valueKey="code"
-                        allMode
+                        render={formik => (<MultiFilterSelectRenderer
+                          {...formik}
+                          options={allCategories}
+                          selectedValues={renderCategories}
+                          labelKey="name"
+                          valueKey="code"
+                          allMode
+                        />)}
+
                       />
                       <div className="ContentsQueryForm__inclusiveOr">
                         <Field
                           component={ButtonComponent}
                           toggleElement={inclusiveOrOptions}
-                          name="orClauseCategoryFilter"
+                          name={putPrefixField('orClauseCategoryFilter')}
                         />
                         <span className="help-block">
                           <FormattedMessage id="widget.form.inclusiveOrTip" />
@@ -347,15 +372,25 @@ export class ContentsQueryFormBody extends Component {
                     </label>
                     <Col xs={12} sm={10}>
                       <FieldArray
-                        intl={intl}
-                        component={FiltersSelectRenderer}
                         name={putPrefixField('filters')}
-                        options={filters}
-                        onResetFilterOption={onResetFilterOption}
-                        onChangeFilterValue={onChangeFilterValue}
-                        onChangeFilterAttribute={onChangeFilterAttribute}
-                        filterName="filters"
-                        attributeFilterChoices={attributeFilters}
+                        render={formik => (<FiltersSelectRenderer
+                          {...formik}
+                          intl={intl}
+                          options={filters}
+                          onResetFilterOption={
+                            (name, i, value) => onResetFilterOption(name, i, value, setFieldValue)
+                          }
+                          onChangeFilterValue={
+                            (name, index, value) =>
+                             onChangeFilterValue(name, index, value, setFieldValue)
+                          }
+                          onChangeFilterAttribute={
+                            (name, index, attributeFilter) =>
+                             onChangeFilterAttribute(name, index, attributeFilter, setFieldValue)
+                          }
+                          filterName={putPrefixField('filters')}
+                          attributeFilterChoices={attributeFilters}
+                        />)}
                       />
                     </Col>
                   </FormGroup>
@@ -386,8 +421,13 @@ export class ContentsQueryFormBody extends Component {
                       name={putPrefixField('pageLink')}
                       label={
                         <FormLabel labelId="widget.form.page" required={!!pageIsRequired} />
-                    }
-                      validate={pageIsRequired ? [required] : []}
+                      }
+                      validate={value =>
+                        convertReduxValidationsToFormikValidations(
+                          value,
+                          pageIsRequired ? [required] : [],
+                          )
+                      }
                       options={normalizedPages}
                       optionValue="code"
                       optionDisplayName="name"
@@ -418,16 +458,27 @@ export class ContentsQueryFormBody extends Component {
                     </label>
                     <Col xs={12} sm={10}>
                       <FieldArray
-                        intl={intl}
-                        component={FiltersSelectRenderer}
                         name={putPrefixField('userFilters')}
-                        options={frontendFilters}
-                        suboptions={frontendFiltersSuboptions}
-                        onResetFilterOption={onResetFilterOption}
-                        onChangeFilterValue={onChangeFilterValue}
-                        onChangeFilterAttribute={onChangeFilterAttribute}
-                        filterName="frontendFilters"
-                        attributeFilterChoices={attributeFilters}
+                        render={formik => (<FiltersSelectRenderer
+                          {...formik}
+                          intl={intl}
+                          options={frontendFilters}
+                          suboptions={frontendFiltersSuboptions}
+                          onResetFilterOption={
+                            (name, i, value) => onResetFilterOption(name, i, value, setFieldValue)
+                          }
+                          onChangeFilterValue={
+                            (name, index, value) =>
+                             onChangeFilterValue(name, index, value, setFieldValue)
+                          }
+                          onChangeFilterAttribute={
+                            (name, index, attributeFilter) =>
+                             onChangeFilterAttribute(name, index, attributeFilter, setFieldValue)
+                          }
+                          filterName={putPrefixField('userFilters')}
+                          attributeFilterChoices={attributeFilters}
+                        />)}
+
                       />
                     </Col>
                   </FormGroup>
@@ -452,9 +503,9 @@ export class ContentsQueryFormBody extends Component {
               </WidgetConfigPortal>
               <ConfirmCancelModalContainer
                 contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
-                invalid={invalid}
-                submitting={submitting}
-                onSave={onSave}
+                submitting={isSubmitting}
+                invalid={!isValid}
+                onClick={() => { onSave(submitForm); handleSubmit(); }}
                 onDiscard={onDiscard}
               />
             </Col>
@@ -478,8 +529,10 @@ export class ContentsQueryFormBody extends Component {
     );
   }
 
+
   render() {
     const { extFormName } = this.props;
+
     const formFields = this.renderFormFields();
     return (
       <Fragment>
@@ -500,11 +553,12 @@ ContentsQueryFormBody.propTypes = {
   languages: PropTypes.arrayOf(PropTypes.shape({})),
   onDidMount: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  submitForm: PropTypes.func.isRequired,
+  setSelectedContentType: PropTypes.func.isRequired,
   contentTypes: PropTypes.arrayOf(PropTypes.shape({})),
   contentType: PropTypes.shape({
     attributes: PropTypes.arrayOf(PropTypes.shape({})),
+    code: PropTypes.string,
   }),
   contentTemplates: PropTypes.arrayOf(PropTypes.shape({})),
   pages: PropTypes.arrayOf(PropTypes.shape({})),
@@ -516,9 +570,10 @@ ContentsQueryFormBody.propTypes = {
   onChangeContentType: PropTypes.func.isRequired,
   onToggleInclusiveOr: PropTypes.func.isRequired,
   onResetModelId: PropTypes.func.isRequired,
-  selectedContentType: PropTypes.string,
-  selectedInclusiveOr: PropTypes.string,
-  dirty: PropTypes.bool,
+  setFieldValue: PropTypes.func.isRequired,
+  isValid: PropTypes.bool,
+  isDirty: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   onDiscard: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
@@ -527,11 +582,20 @@ ContentsQueryFormBody.propTypes = {
   cloneMode: PropTypes.bool,
   widgetConfigFormData: PropTypes.shape({}),
   defaultLanguageCode: PropTypes.string,
+  values: PropTypes.shape({
+    contentType: PropTypes.string,
+    categories: PropTypes.arrayOf(PropTypes.string),
+    orClauseCategoryFilter: PropTypes.string,
+  }),
+  initialValues: PropTypes.shape({
+    contentType: PropTypes.string,
+  }).isRequired,
 };
 
 ContentsQueryFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
+  isValid: false,
+  isDirty: false,
+  isSubmitting: false,
   languages: [],
   contentTypes: [],
   contentType: {},
@@ -539,18 +603,55 @@ ContentsQueryFormBody.defaultProps = {
   categories: [],
   pages: [],
   selectedCategories: [],
-  selectedContentType: '',
-  selectedInclusiveOr: '',
-  dirty: false,
   extFormName: '',
   putPrefixField: name => name,
   cloneMode: false,
   widgetConfigFormData: {},
   defaultLanguageCode: 'en',
+  values: {
+    contentType: '',
+    categories: [],
+    orClauseCategoryFilter: '',
+  },
 };
 
-const ContentsQueryConfig = reduxForm({
-  form: ContentsQueryContainerId,
+const ContentsQueryConfig = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues, languages, parentField }) => {
+    let formValues = {
+      ...initialValues,
+      ...languages.reduce((acc, item) => ({
+        ...acc,
+        [`title_${item.code}`]: initialValues[`title_${item.code}`] || '',
+        [`linkDescr_${item.code}`]: initialValues[`linkDescr_${item.code}`] || '',
+      }), {}),
+    };
+    if (parentField) {
+      formValues = {
+        [parentField]: formValues,
+      };
+    }
+
+    return formValues;
+  },
+  handleSubmit(values, {
+    setSubmitting,
+    props: {
+      onSubmit, history, intl, continueWithDispatch, pageCode,
+    },
+  }) {
+    onSubmit(values)
+      .then((res) => {
+        if (res) {
+          continueWithDispatch(addToast(
+            intl.formatMessage({ id: 'widget.update.success' }),
+            TOAST_SUCCESS,
+          ));
+          history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode }));
+        }
+      })
+      .finally(() => setSubmitting(false));
+  },
 })(ContentsQueryFormBody);
 
 export default ContentsQueryConfig;
diff --git a/src/ui/widget-forms/ContentsQueryConfigContainer.js b/src/ui/widget-forms/ContentsQueryConfigContainer.js
index b641452ea..6a8845867 100644
--- a/src/ui/widget-forms/ContentsQueryConfigContainer.js
+++ b/src/ui/widget-forms/ContentsQueryConfigContainer.js
@@ -1,8 +1,7 @@
 import { connect } from 'react-redux';
-import { clearErrors, addToast, TOAST_SUCCESS } from '@entando/messages';
+import { clearErrors } from '@entando/messages';
 import { get, isUndefined, isNull } from 'lodash';
 import { injectIntl } from 'react-intl';
-import { change, formValueSelector, submit, getFormValues } from 'redux-form';
 import { routeConverter } from '@entando/utils';
 import { ROUTE_APP_BUILDER_PAGE_CONFIG } from 'app-init/router';
 
@@ -10,12 +9,12 @@ import { sendPutWidgetConfig } from 'state/page-config/actions';
 import { fetchSearchPages } from 'state/pages/actions';
 import { fetchLanguages } from 'state/languages/actions';
 import { fetchCategoryTreeAll } from 'state/categories/actions';
-import { fetchContentTypeListPaged, fetchContentType } from 'state/content-type/actions';
+import { fetchContentTypeListPaged, fetchContentType, setSelectedContentType } from 'state/content-type/actions';
 import { fetchContentTemplatesByContentType } from 'state/content-template/actions';
 
 import { getContentTypeList, getSelectedContentType } from 'state/content-type/selectors';
 import { getCategoryTree } from 'state/categories/selectors';
-import ContentsQueryConfig, { ContentsQueryContainerId, ContentsQueryFormBody } from 'ui/widget-forms/ContentsQueryConfig';
+import ContentsQueryConfig, { ContentsQueryFormBody } from 'ui/widget-forms/ContentsQueryConfig';
 import { getContentTemplateList } from 'state/content-template/selectors';
 import { getLocale } from 'state/locale/selectors';
 import { getSearchPagesRaw } from 'state/pages/selectors';
@@ -27,11 +26,23 @@ import { NoDefaultWarningModalId } from 'ui/widget-forms/publish-single-content-
 const nopage = { page: 1, pageSize: 0 };
 
 export const mapStateToProps = (state, ownProps) => {
-  const formToUse = get(ownProps, 'extFormName', ContentsQueryContainerId);
-  const parentField = get(ownProps, 'input.name', '');
+  const parentField = get(ownProps, 'field.name', '');
   const putPrefixField = field => (parentField !== '' ? `${parentField}.${field}` : field);
+
+  const INITIAL_VALUES = {
+    [putPrefixField('contentType')]: '',
+    [putPrefixField('modelId')]: '',
+    [putPrefixField('maxElemForItem')]: '',
+    [putPrefixField('maxElements')]: '',
+    [putPrefixField('categories')]: [],
+    [putPrefixField('filters')]: [],
+    [putPrefixField('pageLink')]: '',
+    [putPrefixField('userFilters')]: [],
+    [putPrefixField('orClauseCategoryFilter')]: '',
+  };
+
   return {
-    initialValues: ownProps.widgetConfig,
+    initialValues: ownProps.widgetConfig || INITIAL_VALUES,
     language: getLocale(state),
     languages: getActiveLanguages(state),
     contentTypes: getContentTypeList(state),
@@ -39,17 +50,12 @@ export const mapStateToProps = (state, ownProps) => {
     pages: getSearchPagesRaw(state),
     categories: getCategoryTree(state),
     contentTemplates: getContentTemplateList(state),
-    selectedContentType: formValueSelector(formToUse)(state, putPrefixField('contentType')),
-    selectedCategories: formValueSelector(formToUse)(state, putPrefixField('categories')),
-    selectedInclusiveOr: formValueSelector(formToUse)(state, putPrefixField('orClauseCategoryFilter')),
-    widgetConfigFormData: getFormValues(formToUse)(state),
     defaultLanguageCode: getDefaultLanguage(state),
   };
 };
 
 export const mapDispatchToProps = (dispatch, ownProps) => {
-  const formToUse = get(ownProps, 'extFormName', ContentsQueryContainerId);
-  const parentField = get(ownProps, 'input.name', '');
+  const parentField = get(ownProps, 'field.name', '');
   const putPrefixField = field => (parentField !== '' ? `${parentField}.${field}` : field);
   return {
     onDidMount: () => {
@@ -59,9 +65,10 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
       dispatch(fetchSearchPages(nopage));
     },
     putPrefixField,
+    parentField,
     onSubmit: (values) => {
       const {
-        pageCode, frameId, widgetCode, history, intl,
+        pageCode, frameId, widgetCode,
       } = ownProps;
       const { contentTypeDetails, ...checkedValues } = values;
       if (values.modelId === '') delete checkedValues.modelId;
@@ -71,46 +78,50 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
       const configItem = Object.assign({ config: checkedValues }, { code: widgetCode });
       dispatch(clearErrors());
 
-      if ((isUndefined(values.modelId) || values.modelId === '') && isNull(contentTypeDetails.defaultContentModelList)) {
+      if ((isUndefined(values.modelId) || values.modelId === '')
+       && isNull(contentTypeDetails)
+      && isNull(contentTypeDetails.defaultContentModelList)) {
         dispatch(setVisibleModal(NoDefaultWarningModalId));
-      } else {
-        dispatch(sendPutWidgetConfig(pageCode, frameId, configItem)).then((res) => {
-          if (res) {
-            dispatch(addToast(
-              intl.formatMessage({ id: 'widget.update.success' }),
-              TOAST_SUCCESS,
-            ));
-            history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode }));
-          }
-        });
       }
-    },
-    onResetFilterOption: (name, i) => (
-      dispatch(change(formToUse, `${name}.[${i}].option`, ''))
-    ),
-    onChangeFilterAttribute: (name, i, value) => (
-      dispatch(change(formToUse, `${name}.[${i}].attributeFilter`, value))
-    ),
-    onChangeFilterValue: (name, i, value) => (
-      dispatch(change(formToUse, `${name}.[${i}]`, value))
-    ),
 
-    onChangeContentType: (contentType) => {
+      return dispatch(sendPutWidgetConfig(pageCode, frameId, configItem));
+    },
+    onResetFilterOption: (name, i, value, setFieldValue) => {
+      setFieldValue(`${name}.${i}.option`, '');
+      setFieldValue(`${name}.${i}.key`, value);
+    },
+    onChangeFilterAttribute: (name, i, value, setFieldValue) => {
+      setFieldValue(`${name}.${i}.attributeFilter`, value);
+    },
+    onChangeFilterValue: (name, i, value, setFieldValue) => {
+      setFieldValue(`${name}.${i}`, value);
+    },
+    setSelectedContentType: (contentType) => {
+      dispatch(fetchContentTemplatesByContentType(contentType.code));
+      dispatch(setSelectedContentType(contentType));
+    },
+    onChangeContentType: (contentType, setFieldValue) => {
       if (contentType) {
         dispatch(fetchContentTemplatesByContentType(contentType));
         dispatch(fetchContentType(contentType, false))
-          .then(ctype => dispatch(change(formToUse, putPrefixField('contentTypeDetails'), ctype)));
+          .then(ctype => setFieldValue(putPrefixField('contentTypeDetails'), ctype));
       }
     },
-    onResetModelId: () => dispatch(change(formToUse, putPrefixField('modelId'), '')),
-    onToggleInclusiveOr: value => dispatch(change(formToUse, putPrefixField('orClauseCategoryFilter'), value === 'true' ? '' : 'true')),
-    onSave: () => { dispatch(setVisibleModal('')); dispatch(submit(ContentsQueryContainerId)); },
+    onResetModelId: setFieldValue => setFieldValue(putPrefixField('modelId'), ''),
+    onToggleInclusiveOr: (value, setFieldValue) => setFieldValue(putPrefixField('orClauseCategoryFilter'), value === 'true' ? '' : 'true'),
+    onSave: (submitForm) => {
+      submitForm();
+      dispatch(setVisibleModal(''));
+    },
     onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
     onDiscard: () => {
       dispatch(setVisibleModal(''));
       const { history, pageCode } = ownProps;
       history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode }));
     },
+    continueWithDispatch: (dispatchValue) => {
+      dispatch(dispatchValue);
+    },
   };
 };
 
diff --git a/src/ui/widget-forms/MultipleContentsConfigContainer.js b/src/ui/widget-forms/MultipleContentsConfigContainer.js
index 0446e14d4..769bf0915 100644
--- a/src/ui/widget-forms/MultipleContentsConfigContainer.js
+++ b/src/ui/widget-forms/MultipleContentsConfigContainer.js
@@ -15,48 +15,44 @@ import { getSearchPagesRaw } from 'state/pages/selectors';
 import { getActiveLanguages, getDefaultLanguage } from 'state/languages/selectors';
 import { sendPutWidgetConfig } from 'state/page-config/actions';
 import { ROUTE_APP_BUILDER_PAGE_CONFIG } from 'app-init/router';
-import { formValueSelector, submit, change, arrayPush, getFormValues } from 'redux-form';
 import { setVisibleModal } from 'state/modal/actions';
 import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';
 import { PAGE_STATUS_DRAFT } from 'state/pages/const';
 
-export const mapStateToProps = (state, ownProps) => {
-  const formToUse = get(ownProps, 'extFormName', MultipleContentsConfigContainerId);
-  const parentField = get(ownProps, 'input.name', '');
-  const putPrefixField = field => (parentField !== '' ? `${parentField}.${field}` : field);
-  return {
-    contentTemplates: getContentTemplateList(state),
-    initialValues: ownProps.widgetConfig || {},
-    languages: getActiveLanguages(state),
-    pages: getSearchPagesRaw(state),
-    language: getLocale(state),
-    widgetCode: ownProps.widgetCode,
-    chosenContents: formValueSelector(formToUse)(state, putPrefixField('contents')),
-    chosenContentTypes: formValueSelector(formToUse)(state, putPrefixField('chosenContentTypes')),
-    ownerGroup: formValueSelector(formToUse)(state, putPrefixField('ownerGroup')),
-    joinGroups: formValueSelector(formToUse)(state, putPrefixField('joinGroups')),
-    widgetConfigFormData: getFormValues(formToUse)(state),
-    defaultLanguageCode: getDefaultLanguage(state),
-  };
+const EMPTY_INITIAL_VALUES = {
+  contents: [],
+  chosenContentTypes: [],
+  ownerGroup: '',
+  joinGroups: [],
+  widgetConfigFormData: {},
 };
 
+export const mapStateToProps = (state, ownProps) => ({
+  contentTemplates: getContentTemplateList(state),
+  initialValues: ownProps.widgetConfig || EMPTY_INITIAL_VALUES,
+  languages: getActiveLanguages(state),
+  pages: getSearchPagesRaw(state),
+  language: getLocale(state),
+  widgetCode: ownProps.widgetCode,
+  defaultLanguageCode: getDefaultLanguage(state),
+});
+
 export const mapDispatchToProps = (dispatch, ownProps) => {
-  const formToUse = get(ownProps, 'extFormName', MultipleContentsConfigContainerId);
-  const parentField = get(ownProps, 'input.name', '');
+  const parentField = get(ownProps, 'field.name', '');
   const putPrefixField = field => (parentField !== '' ? `${parentField}.${field}` : field);
   return {
-    onDidMount: () => {
+    onDidMount: (setFieldValue) => {
       dispatch(fetchContentTemplateList({ page: 1, pageSize: 0 }));
       dispatch(fetchLanguages({ page: 1, pageSize: 0 }));
       dispatch(fetchSearchPages({ page: 1, pageSize: 0 }));
       dispatch(fetchPage(ownProps.pageCode, PAGE_STATUS_DRAFT)).then((res) => {
         const { ownerGroup, joinGroups } = res.payload || {};
-        dispatch(change(formToUse, putPrefixField('ownerGroup'), ownerGroup));
-        dispatch(change(formToUse, putPrefixField('joinGroups'), joinGroups));
+        setFieldValue(putPrefixField('ownerGroup'), ownerGroup);
+        setFieldValue(putPrefixField('joinGroups'), joinGroups);
       });
     },
     putPrefixField,
-    onSubmit: ({ chosenContentTypes, ...values }) => {
+    onSubmit: ({ chosenContentTypes = [], ...values }) => {
       dispatch(clearErrors());
       const {
         pageCode, frameId, intl, history,
@@ -98,15 +94,16 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
         }
       });
     },
-    pushContentTypeDetails: contentTypeCodes => (
-      contentTypeCodes.forEach(contentTypeCode => (
-        dispatch(fetchContentType(contentTypeCode, false))
-          .then(ctype => (
-            dispatch(arrayPush(formToUse, putPrefixField('chosenContentTypes'), ctype))
-          ))
-      ))
-    ),
-    onSave: () => { dispatch(setVisibleModal('')); dispatch(submit(MultipleContentsConfigContainerId)); },
+    pushContentTypeDetails: (contentTypeCodes, currentContentTypes, setFieldValue) => {
+      const promises = contentTypeCodes.map(contentTypeCode =>
+        dispatch(fetchContentType(contentTypeCode, false)));
+      Promise.all(promises)
+        .then((contentTypes) => {
+          const newContentTypes = [...currentContentTypes, ...contentTypes];
+          setFieldValue(putPrefixField('chosenContentTypes'), newContentTypes);
+        });
+    },
+    onSave: (submitForm) => { dispatch(setVisibleModal('')); submitForm(MultipleContentsConfigContainerId); },
     onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
     onDiscard: () => {
       dispatch(setVisibleModal(''));
diff --git a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js
index 6a914dd0a..6d772cbc1 100644
--- a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js
+++ b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js
@@ -5,11 +5,10 @@ import { injectIntl } from 'react-intl';
 import { routeConverter } from '@entando/utils';
 import { getContentTemplateList } from 'state/content-template/selectors';
 import { adminConsoleUrl } from 'helpers/urlUtils';
-import SingleContentConfigForm, { SingleContentConfigFormBody, SingleContentConfigContainerId } from 'ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody';
+import SingleContentConfigForm, { SingleContentConfigFormBody } from 'ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody';
 import { fetchContentTemplateList } from 'state/content-template/actions';
 import { sendPutWidgetConfig } from 'state/page-config/actions';
 import { ROUTE_APP_BUILDER_PAGE_CONFIG } from 'app-init/router';
-import { formValueSelector, submit, change } from 'redux-form';
 import { setVisibleModal } from 'state/modal/actions';
 import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';
 import { NoDefaultWarningModalId } from 'ui/widget-forms/publish-single-content-config/NoDefaultWarningModal';
@@ -25,11 +24,17 @@ import { getAppTourProgress } from 'state/app-tour/selectors';
 import { APP_TOUR_STARTED } from 'state/app-tour/const';
 import { setAppTourLastStep } from 'state/app-tour/actions';
 
+const INITIAL_VALUES = {
+  chosenContent: {},
+  contentId: '',
+  chosenContentType: '',
+  modelId: '',
+  contentDescription: '',
+  joinGroups: [],
+  ownerGroup: '',
+};
+
 export const mapStateToProps = (state, ownProps) => {
-  const formToUse = get(ownProps, 'extFormName', SingleContentConfigContainerId);
-  const parentField = get(ownProps, 'input.name', '');
-  const putPrefixField = field => (parentField !== '' ? `${parentField}.${field}` : field);
-  const formSelect = formValueSelector(formToUse);
   let widgetConfig = null;
   if (ownProps.widgetConfig !== null && ownProps.widgetConfig !== undefined) {
     const { contents, ...rest } = ownProps.widgetConfig;
@@ -38,31 +43,29 @@ export const mapStateToProps = (state, ownProps) => {
   return {
     contentTemplates: getContentTemplateList(state),
     contentType: getSelectedContentType(state),
-    initialValues: widgetConfig || {},
+    initialValues: widgetConfig || INITIAL_VALUES,
     chosenContent: widgetConfig,
-    ownerGroup: formSelect(state, putPrefixField('ownerGroup')),
-    joinGroups: formSelect(state, putPrefixField('joinGroups')),
     contentTypes: getContentTypeList(state),
     appTourProgress: getAppTourProgress(state),
   };
 };
 
 export const mapDispatchToProps = (dispatch, ownProps) => {
-  const formToUse = get(ownProps, 'extFormName', SingleContentConfigContainerId);
-  const parentField = get(ownProps, 'input.name', '');
+  const parentField = get(ownProps, 'field.name', '');
   const putPrefixField = field => (parentField !== '' ? `${parentField}.${field}` : field);
   return {
-    onDidMount: () => {
+    onDidMount: (setFieldValue) => {
       dispatch(fetchContentTypeListPaged({ page: 1, pageSize: 0 }));
       dispatch(fetchContentTemplateList({ page: 1, pageSize: 0 }));
       dispatch(fetchPage(ownProps.pageCode, PAGE_STATUS_DRAFT)).then((res) => {
         const { ownerGroup, joinGroups } = res.payload || {};
-        dispatch(change(formToUse, putPrefixField('ownerGroup'), ownerGroup));
-        dispatch(change(formToUse, putPrefixField('joinGroups'), joinGroups));
+        setFieldValue(putPrefixField('ownerGroup'), ownerGroup);
+        setFieldValue(putPrefixField('joinGroups'), joinGroups);
       });
     },
+    parentField,
     putPrefixField,
-    onSubmit: (values) => {
+    onSubmit: (values, setSubmitting) => {
       dispatch(clearErrors());
       const {
         pageCode, frameId, intl, history, widgetCode,
@@ -77,9 +80,11 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
       };
 
       if ((isUndefined(values.modelId) || values.modelId === 'default') && isNull(chosenContentType.defaultContentModel)) {
+        setSubmitting(false);
         return dispatch(setVisibleModal(NoDefaultWarningModalId));
       }
       return dispatch(sendPutWidgetConfig(pageCode, frameId, configItem)).then((res) => {
+        setSubmitting(false);
         if (res) {
           dispatch(addToast(
             intl.formatMessage({ id: 'widget.update.success' }),
@@ -88,17 +93,18 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
           dispatch(setAppTourLastStep(22));
           history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode }));
         }
-      });
+      }).catch(() => setSubmitting(false));
     },
-    onSave: () => {
+    onSave: (submitForm) => {
       dispatch(setAppTourLastStep(22));
       dispatch(setVisibleModal(''));
-      dispatch(submit(SingleContentConfigContainerId));
+      submitForm();
     },
-    loadContentTypeDetails: contentTypeCode => dispatch(fetchContentType(contentTypeCode, false))
-      .then(ctype => (
-        dispatch(change(formToUse, putPrefixField('chosenContentType'), ctype))
-      )),
+    loadContentTypeDetails: (contentTypeCode, setFieldValue) =>
+      dispatch(fetchContentType(contentTypeCode))
+        .then((ctype) => {
+          setFieldValue(putPrefixField('chosenContentType'), ctype);
+        }),
     onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
     onDiscard: () => {
       dispatch(setVisibleModal(''));
@@ -111,9 +117,9 @@ export const mapDispatchToProps = (dispatch, ownProps) => {
       }
       dispatch(setVisibleModal(ContentsFilterModalID));
     },
-    onSelectContent: (selectContent, andCloseModal = true) => {
-      dispatch(change(formToUse, putPrefixField('contentId'), selectContent.id));
-      dispatch(change(formToUse, putPrefixField('contentDescription'), selectContent.description));
+    onSelectContent: (selectContent, andCloseModal = true, setFieldValue) => {
+      setFieldValue(putPrefixField('contentId'), selectContent.id);
+      setFieldValue(putPrefixField('contentDescription'), selectContent.description);
       if (andCloseModal) {
         dispatch(setVisibleModal(''));
         dispatch(setAppTourLastStep(21));
diff --git a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js
index 9d11647a8..d52490c78 100644
--- a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js
+++ b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js
@@ -1,7 +1,7 @@
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { intlShape, FormattedMessage } from 'react-intl';
-import { reduxForm, Field } from 'redux-form';
+import { withFormik, Field } from 'formik';
 import { get, isEmpty } from 'lodash';
 import { Button, Row, Col, DropdownButton, MenuItem } from 'patternfly-react';
 import SectionTitle from 'ui/common/SectionTitle';
@@ -10,13 +10,10 @@ import ContentsFilterModalContainer from 'ui/widget-forms/contents-filter/Conten
 import NoDefaultWarningModal from 'ui/widget-forms/publish-single-content-config/NoDefaultWarningModal';
 import { getContentById } from 'api/contents';
 
-import { SINGLE_CONTENT_CONFIG } from 'ui/widget-forms/const';
 import ContentTableRow from 'ui/widget-forms/publish-single-content-config/ContentTableRow';
 import { APP_TOUR_STARTED } from 'state/app-tour/const';
 import WidgetConfigPortal from 'ui/widgets/config/WidgetConfigPortal';
 
-export const SingleContentConfigContainerId = `widgets.${SINGLE_CONTENT_CONFIG}`;
-
 export class SingleContentConfigFormBody extends PureComponent {
   constructor(props) {
     super(props);
@@ -25,11 +22,12 @@ export class SingleContentConfigFormBody extends PureComponent {
       contentLoading: false,
     };
     this.handleContentSelect = this.handleContentSelect.bind(this);
+    this.renderFormFields = this.renderFormFields.bind(this);
   }
 
   componentDidMount() {
-    const { onDidMount } = this.props;
-    onDidMount();
+    const { onDidMount, setFieldValue } = this.props;
+    onDidMount(setFieldValue);
 
     // fetch content from URL params
     const queryString = window.location.search;
@@ -72,13 +70,20 @@ export class SingleContentConfigFormBody extends PureComponent {
   }
 
   handleContentSelect(selectedContent, closeModal = true) {
-    const { onSelectContent, loadContentTypeDetails } = this.props;
+    const {
+      onSelectContent, loadContentTypeDetails, setFieldValue, putPrefixField,
+    } = this.props;
     const contentId = get(selectedContent, 'contentId', get(selectedContent, 'id', ''));
     const typeCodeSub = contentId ? contentId.substr(0, 3) : '';
     const contentTypeCode = get(selectedContent, 'typeCode', typeCodeSub);
-    loadContentTypeDetails(contentTypeCode);
+    loadContentTypeDetails(contentTypeCode, setFieldValue);
     this.setState({ selectedContent });
-    onSelectContent(selectedContent, closeModal);
+    // if closeModal is true, it means we selected content from modal
+    // and now we need to reset contentModelId to default
+    if (closeModal) {
+      setFieldValue(putPrefixField('modelId'), 'default');
+    }
+    onSelectContent(selectedContent, closeModal, setFieldValue);
   }
 
   enclosedWithForm(fields) {
@@ -94,11 +99,12 @@ export class SingleContentConfigFormBody extends PureComponent {
     const {
       onCancel,
       onDiscard,
-      invalid,
+      isValid,
       dirty,
-      submitting,
+      isSubmitting,
       appTourProgress,
       onSave,
+      submitForm,
     } = this.props;
 
     const { selectedContent } = this.state;
@@ -120,8 +126,8 @@ export class SingleContentConfigFormBody extends PureComponent {
               className="pull-right AddContentTypeFormBody__save--btn app-tour-step-21"
               type="submit"
               bsStyle="primary"
-              disabled={invalid || submitting || !contentExists}
-              onClick={onSave}
+              disabled={!isValid || isSubmitting || !contentExists}
+              onClick={() => onSave(submitForm)}
             >
               <FormattedMessage id="app.save" />
             </Button>
@@ -141,18 +147,16 @@ export class SingleContentConfigFormBody extends PureComponent {
   renderFormFields() {
     const {
       contentTemplates,
-      invalid,
-      submitting,
+      isSubmitting,
       intl,
       showFilterModal,
       onDiscard,
-      ownerGroup,
-      joinGroups,
-      extFormName,
       putPrefixField,
       contentTypes,
       onClickAddContent,
       appTourProgress,
+      values,
+      parentField,
     } = this.props;
 
     const { selectedContent } = this.state;
@@ -262,14 +266,14 @@ export class SingleContentConfigFormBody extends PureComponent {
         </div>
         <ContentsFilterModalContainer
           modalTitleText={intl.formatMessage({ id: 'cms.contents.modal.filter.title' })}
-          invalid={invalid}
-          submitting={submitting}
+          invalid={false}
+          submitting={isSubmitting}
           onSave={this.handleContentSelect}
           onDiscard={onDiscard}
-          ownerGroup={ownerGroup}
-          joinGroups={joinGroups}
+          ownerGroup={values.ownerGroup}
+          joinGroups={values.joinGroups}
           compatibility={{
-            joinGroups, ownerGroup,
+            joinGroups: values.joinGroups, ownerGroup: values.ownerGroup,
           }}
         />
         <NoDefaultWarningModal />
@@ -287,20 +291,21 @@ export class SingleContentConfigFormBody extends PureComponent {
             </Col>
           </Row>
         )}
-        {!extFormName && this.renderActionButtons()}
+        {!parentField && this.renderActionButtons()}
       </div>
     );
   }
 
   render() {
     const {
-      extFormName,
-      invalid,
-      submitting,
+      isValid,
+      isSubmitting,
       intl,
       onSave,
       onDiscard,
       appTourProgress,
+      parentField,
+      submitForm,
     } = this.props;
 
     const formFields = this.renderFormFields();
@@ -309,15 +314,16 @@ export class SingleContentConfigFormBody extends PureComponent {
       <Fragment>
         <Row>
           <Col xs={12}>
-            {extFormName ? formFields : this.enclosedWithForm(formFields)}
+            {/* {putPrefixField ? formFields : this.enclosedWithForm(this.renderFormFields)} */}
+            {this.enclosedWithForm(formFields)}
           </Col>
         </Row>
-        {!extFormName && appTourProgress !== APP_TOUR_STARTED && (
+        {!parentField && appTourProgress !== APP_TOUR_STARTED && (
           <ConfirmCancelModalContainer
             contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
-            invalid={invalid}
-            submitting={submitting}
-            onSave={onSave}
+            invalid={!isValid}
+            submitting={isSubmitting}
+            onSave={() => onSave(submitForm)}
             onDiscard={onDiscard}
           />
         )}
@@ -331,8 +337,6 @@ SingleContentConfigFormBody.propTypes = {
   contentTemplates: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   onDidMount: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
   chosenContent: PropTypes.shape({
     id: PropTypes.string,
     contentId: PropTypes.string,
@@ -344,9 +348,6 @@ SingleContentConfigFormBody.propTypes = {
   showFilterModal: PropTypes.func.isRequired,
   onSelectContent: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
-  ownerGroup: PropTypes.string,
-  joinGroups: PropTypes.arrayOf(PropTypes.string),
-  extFormName: PropTypes.string,
   putPrefixField: PropTypes.func,
   onClickAddContent: PropTypes.func.isRequired,
   contentTypes: PropTypes.arrayOf(PropTypes.shape({
@@ -355,22 +356,38 @@ SingleContentConfigFormBody.propTypes = {
   })),
   appTourProgress: PropTypes.string,
   loadContentTypeDetails: PropTypes.func.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    ownerGroup: PropTypes.string,
+    joinGroups: PropTypes.arrayOf(PropTypes.string),
+  }),
+  setFieldValue: PropTypes.func.isRequired,
+  parentField: PropTypes.string,
+  submitForm: PropTypes.func.isRequired,
 };
 
 SingleContentConfigFormBody.defaultProps = {
   chosenContent: {},
   dirty: false,
-  ownerGroup: '',
-  joinGroups: [],
-  extFormName: '',
   handleSubmit: () => {},
-  invalid: false,
-  submitting: false,
   putPrefixField: name => name,
   contentTypes: {},
   appTourProgress: '',
+  values: {
+    ownerGroup: '',
+    joinGroups: [],
+  },
+  parentField: '',
 };
 
-export default reduxForm({
-  form: SingleContentConfigContainerId,
+const SingleContentConfigForm = withFormik({
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  enableReinitialize: true,
+  handleSubmit: (values, { setSubmitting, props: { onSubmit } }) => {
+    onSubmit(values, setSubmitting);
+  },
+  displayName: 'SingleContentConfigFormBodyFormik',
 })(SingleContentConfigFormBody);
+
+export default SingleContentConfigForm;
diff --git a/src/ui/widgets/clone/CloneWidgetFormContainer.js b/src/ui/widgets/clone/CloneWidgetFormContainer.js
index d91bed39e..858020a02 100644
--- a/src/ui/widgets/clone/CloneWidgetFormContainer.js
+++ b/src/ui/widgets/clone/CloneWidgetFormContainer.js
@@ -2,9 +2,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
 import { clearErrors } from '@entando/messages';
-import { submit, reduxForm } from 'redux-form';
-import { injectIntl } from 'react-intl';
-import { WidgetFormBody } from 'ui/widgets/common/WidgetForm';
+import WidgetForm from 'ui/widgets/common/WidgetForm';
 import { get } from 'lodash';
 import { fetchLanguages } from 'state/languages/actions';
 import { removePageWidget, updatePageWidget } from 'state/page-config/actions';
@@ -23,6 +21,9 @@ import { convertConfigObject, stringifyMultiContentsConfigArray } from 'helpers/
 import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';
 import { isMicrofrontendWidgetForm } from 'helpers/microfrontends';
 import { MULTIPLE_CONTENTS_CONFIG } from 'ui/widget-forms/const';
+import { getUserPreferences } from 'state/user-preferences/selectors';
+import { getMyGroupPermissions } from 'state/permissions/selectors';
+import { MANAGE_PAGES_PERMISSION, SUPERUSER_PERMISSION } from 'state/permissions/const';
 
 const CONFIG_SIMPLE_PARAMETER = 'configSimpleParameter';
 const MODE_CLONE = 'clone';
@@ -31,9 +32,17 @@ export const mapStateToProps = (state, { match: { params } }) => {
   const { pageCode, parentCode, frameId } = params;
   const pageConfig = getConfigMap(state) || {};
   const config = get(pageConfig, `${pageCode}.${frameId}.config`, {});
+  const userPreferences = getUserPreferences(state);
+  const groupWithPagePermission = getMyGroupPermissions(state)
+    .find(({ permissions }) => (
+      permissions.includes(SUPERUSER_PERMISSION) || permissions.includes(MANAGE_PAGES_PERMISSION)
+    ));
+  const defaultOwnerGroup = userPreferences.defaultPageOwnerGroup
+    || (groupWithPagePermission && groupWithPagePermission.group);
   const initialValues = {
     config,
     parentType: parentCode,
+    group: defaultOwnerGroup,
   };
   const widget = getSelectedWidget(state);
   return ({
@@ -65,7 +74,7 @@ export const mapDispatchToProps = (dispatch, { history, match: { params } }) =>
     } else {
       dispatch(initWidgetConfigPageWithConfigData(pageCode, parentCode, parseInt(frameId, 10)));
     }
-    dispatch(initNewUserWidget(parentCode, true));
+    dispatch(initNewUserWidget(parentCode));
   },
   onSubmit: (values, saveType) => {
     const { config: configFields, parentType } = values;
@@ -100,16 +109,13 @@ export const mapDispatchToProps = (dispatch, { history, match: { params } }) =>
       { pageCode, framePos: frameId, widgetCode: values.code },
     ));
   },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('widget')); },
+  onSave: (submitForm) => { dispatch(setVisibleModal('')); submitForm('widget'); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_WIDGET_LIST)); },
+  onChangeDefaultTitle: (title, setFieldValue) =>
+    setFieldValue('code', title.replace(/\W/g, '_').toLowerCase()),
 });
 
-const WidgetForm = injectIntl(reduxForm({
-  form: 'widget',
-  enableReinitialize: true,
-})(WidgetFormBody));
-
 export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, {
   pure: false,
 })(WidgetForm));
diff --git a/src/ui/widgets/common/WidgetForm.js b/src/ui/widgets/common/WidgetForm.js
index f03d96d51..ac11cbdbd 100644
--- a/src/ui/widgets/common/WidgetForm.js
+++ b/src/ui/widgets/common/WidgetForm.js
@@ -2,22 +2,23 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
-import { Field, reduxForm } from 'redux-form';
+import { Field, withFormik } from 'formik';
 import { Button, Tabs, Tab, Col, Alert, Spinner, ControlLabel, DropdownButton, MenuItem } from 'patternfly-react';
 import { Panel } from 'react-bootstrap';
 import { required, maxLength } from '@entando/utils';
 import { isUndefined } from 'lodash';
 
 import getAppBuilderWidgetForm from 'helpers/getAppBuilderWidgetForm';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderTextAreaInput from 'ui/common/form/RenderTextAreaInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
+import RenderTextAreaInput from 'ui/common/formik-field/RenderTextAreaInput';
 import FormLabel from 'ui/common/form/FormLabel';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
-import JsonCodeEditorRenderer from 'ui/common/form/JsonCodeEditorRenderer';
+import JsonCodeEditorRenderer from 'ui/common/formik-field/JsonCodeEditorRenderer';
 import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
-import IconUploader from 'ui/widgets/common/IconUploader';
-import RenderDropdownTypeaheadInput from 'ui/common/form/RenderDropdownTypeaheadInput';
+import IconUploader from 'ui/common/formik-field/IconUploader';
+import RenderDropdownTypeaheadInput from 'ui/common/formik-field/RenderDropdownTypeaheadInput';
 import { CONTINUE_SAVE_TYPE, REGULAR_SAVE_TYPE } from 'state/widgets/const';
+import { convertReduxValidationsToFormikValidations } from 'helpers/formikUtils';
 
 const MODE_NEW = 'new';
 const MODE_EDIT = 'edit';
@@ -85,6 +86,7 @@ export class WidgetFormBody extends Component {
     super();
     this.portalContainer = null;
     this.validateJson = this.validateJson.bind(this);
+    this.renderButtons = this.renderButtons.bind(this);
   }
 
   componentWillMount() {
@@ -121,7 +123,7 @@ export class WidgetFormBody extends Component {
   }
 
   renderTitleFields() {
-    const { intl, onChangeDefaultTitle } = this.props;
+    const { intl, onChangeDefaultTitle, setFieldValue } = this.props;
     const languages = ['en', 'it'];
     if (!isUndefined(languages)) {
       return languages
@@ -136,10 +138,11 @@ export class WidgetFormBody extends Component {
               name={`titles.${langCode}`}
               label={<FormLabel langLabelText={langCode} labelId="app.title" required />}
               placeholder={intl.formatMessage(msgTitle.label)}
-              validate={[required, maxLength70]}
+              validate={val =>
+                convertReduxValidationsToFormikValidations(val, [required, maxLength70])}
               onChange={(ev) => {
                 if (onChangeDefaultTitle && langCode === 'en') {
-                  onChangeDefaultTitle(ev.currentTarget.value);
+                  onChangeDefaultTitle(ev.currentTarget.value, setFieldValue);
                 }
               }}
             />
@@ -152,8 +155,8 @@ export class WidgetFormBody extends Component {
   renderButtons() {
     const {
       intl, dirty, onCancel, onDiscard,
-      invalid, submitting, mode,
-      onReplaceSubmit, onSubmit, handleSubmit,
+      isValid, isSubmitting, mode, values,
+      onReplaceSubmit, handleSubmit, setFieldValue,
     } = this.props;
 
     const handleCancelClick = () => {
@@ -172,8 +175,8 @@ export class WidgetFormBody extends Component {
             className="pull-right FragmentForm__save--btn"
             type="submit"
             bsStyle="primary"
-            disabled={invalid || submitting}
-            onClick={this.props.handleSubmit(values => onReplaceSubmit({ ...values }))}
+            disabled={!isValid || isSubmitting}
+            onClick={() => onReplaceSubmit({ ...values })}
           >
             <FormattedMessage id="app.saveAndReplace" />
           </Button>
@@ -188,20 +191,28 @@ export class WidgetFormBody extends Component {
             <MenuItem
               id="regularSaveButton"
               eventKey={REGULAR_SAVE_TYPE}
-              disabled={invalid || submitting}
-              onClick={handleSubmit(values => onSubmit({
-                ...values,
-              }, REGULAR_SAVE_TYPE))}
+              disabled={!isValid || isSubmitting}
+              onClick={async () => {
+                await setFieldValue('saveType', REGULAR_SAVE_TYPE);
+                handleSubmit({
+                  ...values,
+                  saveType: REGULAR_SAVE_TYPE,
+                });
+              }}
             >
               <FormattedMessage id="app.save" />
             </MenuItem>
             <MenuItem
               id="continueSaveButton"
               eventKey={CONTINUE_SAVE_TYPE}
-              disabled={invalid || submitting}
-              onClick={handleSubmit(values => onSubmit({
-                ...values,
-              }, CONTINUE_SAVE_TYPE))}
+              disabled={!isValid || isSubmitting}
+              onClick={async () => {
+                await setFieldValue('saveType', CONTINUE_SAVE_TYPE);
+                handleSubmit({
+                  ...values,
+                  saveType: CONTINUE_SAVE_TYPE,
+                });
+              }}
             >
               <FormattedMessage id="app.saveAndContinue" />
             </MenuItem>
@@ -219,9 +230,9 @@ export class WidgetFormBody extends Component {
 
   render() {
     const {
-      intl, onDiscard, onSave, invalid, submitting, loading, mode, config,
+      intl, onDiscard, onSave, isValid, isSubmitting, loading, mode, config,
       parentWidget, parentWidgetParameters, defaultUIField, match: { params },
-      groups, noPortal, widget, configUiRequired,
+      groups, noPortal, widget, configUiRequired, submitForm,
     } = this.props;
 
     let codeField = (
@@ -232,7 +243,10 @@ export class WidgetFormBody extends Component {
           <FormLabel labelId="widget.page.create.code" helpId="app.help.codeWithDash" required />
         }
         placeholder={intl.formatMessage(msgs.codePlaceholder)}
-        validate={[required, validateWidgetCode, maxLength30]}
+        validate={val => convertReduxValidationsToFormikValidations(
+          val,
+          [required, validateWidgetCode, maxLength30],
+        )}
       />
     );
 
@@ -265,6 +279,8 @@ export class WidgetFormBody extends Component {
       ? [this.validateJson, required]
       : [this.validateJson];
 
+    const buttons = this.renderButtons();
+
     return (
       <Spinner loading={!!loading}>
         <form className="form-horizontal">
@@ -281,7 +297,8 @@ export class WidgetFormBody extends Component {
                         cols={50}
                         rows={8}
                         className="form-control"
-                        validate={[required]}
+                        validate={val =>
+                          convertReduxValidationsToFormikValidations(val, [required])}
                       />
                     </Tab>
                   }
@@ -290,7 +307,8 @@ export class WidgetFormBody extends Component {
                     <Field
                       component={JsonCodeEditorRenderer}
                       name="configUi"
-                      validate={configUiValidationRules}
+                      validate={val =>
+                        convertReduxValidationsToFormikValidations(val, configUiValidationRules)}
                     />
                   </Tab>
 
@@ -308,6 +326,7 @@ export class WidgetFormBody extends Component {
                             pageCode={params.pageCode}
                             frameId={params.frameId}
                             mode={mode}
+                            {...this.props}
                           />
                         </fieldset>
                       </Tab>
@@ -348,7 +367,7 @@ export class WidgetFormBody extends Component {
                   labelKey="name"
                   valueKey="code"
                   placeholder={intl.formatMessage(msgs.chooseAnOption)}
-                  validate={[required]}
+                  validate={val => convertReduxValidationsToFormikValidations(val, [required])}
                 />
                 <Field
                   name="widgetCategory"
@@ -365,7 +384,7 @@ export class WidgetFormBody extends Component {
                       required
                     />
                   }
-                  validate={[required]}
+                  validate={val => convertReduxValidationsToFormikValidations(val, [required])}
                 />
 
                 {((mode === MODE_EDIT || mode === MODE_CLONE) && parentWidget) && (
@@ -385,15 +404,15 @@ export class WidgetFormBody extends Component {
           </div>
 
           {
-            noPortal ? this.renderButtons() : this.portalContainer
-              && ReactDOM.createPortal(this.renderButtons(), this.portalContainer)
+            noPortal ? buttons : this.portalContainer
+              && ReactDOM.createPortal(buttons, this.portalContainer)
           }
 
           <ConfirmCancelModalContainer
             contentText={intl.formatMessage({ id: 'app.confirmCancel' })}
-            invalid={invalid}
-            submitting={submitting}
-            onSave={onSave}
+            invalid={!isValid}
+            submitting={isSubmitting}
+            onSave={() => onSave(submitForm)}
             onDiscard={onDiscard}
           />
         </form>
@@ -406,9 +425,9 @@ WidgetFormBody.propTypes = {
   intl: intlShape.isRequired,
   onWillMount: PropTypes.func,
   onWillUnmount: PropTypes.func,
-  handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
+  handleSubmit: PropTypes.func,
+  isValid: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
   config: PropTypes.shape({}),
   groups: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
@@ -430,7 +449,6 @@ WidgetFormBody.propTypes = {
   onSave: PropTypes.func.isRequired,
   loading: PropTypes.bool,
   onReplaceSubmit: PropTypes.func,
-  onSubmit: PropTypes.func.isRequired,
   match: PropTypes.shape({
     params: PropTypes.shape({
       pageCode: PropTypes.string,
@@ -442,13 +460,17 @@ WidgetFormBody.propTypes = {
     typology: PropTypes.string,
   }),
   configUiRequired: PropTypes.bool,
+  submitForm: PropTypes.func.isRequired,
+  values: PropTypes.shape({}),
+  errors: PropTypes.shape({}),
+  setFieldValue: PropTypes.func,
 };
 
 WidgetFormBody.defaultProps = {
   onWillMount: null,
   onWillUnmount: null,
-  invalid: false,
-  submitting: false,
+  isValid: true,
+  isSubmitting: false,
   groups: [{
     name: '',
     code: '',
@@ -468,12 +490,21 @@ WidgetFormBody.defaultProps = {
   noPortal: false,
   widget: {},
   configUiRequired: false,
+  values: {},
+  errors: {},
+  setFieldValue: () => {},
+  handleSubmit: () => {},
 };
 
-const WidgetForm = reduxForm({
-  form: widgetFormName,
+const WidgetForm = withFormik({
+  mapPropsToValues: ({ initialValues }) => initialValues,
   enableReinitialize: true,
-  keepDirtyOnReinitialize: true,
+  handleSubmit: (values, { setSubmitting, props: { onSubmit } }) => {
+    onSubmit(values, values.saveType).finally(() => {
+      setSubmitting(false);
+    });
+  },
+  displayName: widgetFormName,
 })(WidgetFormBody);
 
 export default injectIntl(WidgetForm);
diff --git a/src/ui/widgets/common/WidgetFormContainer.js b/src/ui/widgets/common/WidgetFormContainer.js
index a5a276f90..98f9f6e04 100644
--- a/src/ui/widgets/common/WidgetFormContainer.js
+++ b/src/ui/widgets/common/WidgetFormContainer.js
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { change, initialize, submit } from 'redux-form';
 import { clearErrors } from '@entando/messages';
 import { withRouter } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
@@ -35,11 +34,10 @@ export const mapStateToProps = (state) => {
 };
 
 export const mapDispatchToProps = (dispatch, { history }) => ({
-  onWillMount: (props) => {
+  onWillMount: () => {
     dispatch(fetchMyGroupPermissions({ sort: 'group' }));
     dispatch(fetchLanguages({ page: 1, pageSize: 0 }));
     dispatch(fetchMyGroups({ sort: 'name' }));
-    dispatch(initialize('widget', { group: props.group || '' }));
   },
   onSubmit: (values, saveType) => {
     const jsonData = {
@@ -49,9 +47,9 @@ export const mapDispatchToProps = (dispatch, { history }) => ({
     dispatch(clearErrors());
     return dispatch(sendPostWidgets(jsonData, saveType));
   },
-  onChangeDefaultTitle: title =>
-    dispatch(change('widget', 'code', title.replace(/\W/g, '_').toLowerCase())),
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('widget')); },
+  onChangeDefaultTitle: (title, setFieldValue) =>
+    setFieldValue('code', title.replace(/\W/g, '_').toLowerCase()),
+  onSave: (submitForm) => { dispatch(setVisibleModal('')); submitForm(); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_WIDGET_LIST)); },
 });
diff --git a/src/ui/widgets/config/WidgetConfigPage.js b/src/ui/widgets/config/WidgetConfigPage.js
index e20c704e6..c9c4672a1 100644
--- a/src/ui/widgets/config/WidgetConfigPage.js
+++ b/src/ui/widgets/config/WidgetConfigPage.js
@@ -199,7 +199,7 @@ WidgetConfigPage.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
-  history: PropTypes.shape({}).isRequired,
+  history: PropTypes.shape({}),
 };
 
 WidgetConfigPage.defaultProps = {
@@ -207,6 +207,7 @@ WidgetConfigPage.defaultProps = {
   widgetConfig: null,
   onDidMount: null,
   onWillUnmount: null,
+  history: {},
 };
 
 export default WidgetConfigPage;
diff --git a/src/ui/widgets/config/WidgetConfigPanel.js b/src/ui/widgets/config/WidgetConfigPanel.js
index cb94a3d13..27ef673fe 100644
--- a/src/ui/widgets/config/WidgetConfigPanel.js
+++ b/src/ui/widgets/config/WidgetConfigPanel.js
@@ -82,7 +82,7 @@ WidgetConfigPanel.propTypes = {
   framePos: PropTypes.number.isRequired,
   frameName: PropTypes.string.isRequired,
   pageCode: PropTypes.string.isRequired,
-  history: PropTypes.shape({}).isRequired,
+  history: PropTypes.shape({}),
   children: PropTypes.node.isRequired,
   buttons: PropTypes.node,
 };
@@ -91,6 +91,7 @@ WidgetConfigPanel.defaultProps = {
   widget: null,
   widgetConfig: null,
   buttons: null,
+  history: {},
 };
 
 export default WidgetConfigPanel;
diff --git a/src/ui/widgets/config/forms/NavigationBarConfigForm.js b/src/ui/widgets/config/forms/NavigationBarConfigForm.js
index 1dc24bd4b..af10b0f20 100644
--- a/src/ui/widgets/config/forms/NavigationBarConfigForm.js
+++ b/src/ui/widgets/config/forms/NavigationBarConfigForm.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import lodash from 'lodash';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'react-intl';
-import { FieldArray } from 'redux-form';
+import { withFormik, FieldArray, Form } from 'formik';
 import { Button, Row, Col } from 'patternfly-react';
 import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
@@ -15,7 +15,7 @@ import { APP_TOUR_STARTED } from 'state/app-tour/const';
 import { MODE_CLONE } from 'ui/widgets/common/WidgetForm';
 import WidgetConfigPortal from 'ui/widgets/config/WidgetConfigPortal';
 
-export default class NavigationBarConfigForm extends PureComponent {
+class NavigationBarConfigFormBody extends PureComponent {
   componentDidMount() {
     const { onDidMount, initialValues, fetchExpressions } = this.props;
     onDidMount(this.props);
@@ -35,34 +35,38 @@ export default class NavigationBarConfigForm extends PureComponent {
   render() {
     const {
       handleSubmit,
-      invalid,
-      submitting,
+      isValid,
+      isSubmitting,
       intl,
-      dirty,
+      isDirty,
       onCancel,
       onDiscard,
       onSave,
       language,
       pages,
       onAddNewExpression,
-      addConfig,
-      expressions,
+      onRemoveExpression,
+      onSwapExpressions,
       loading,
       initialValues,
       onSpecificPageChoose,
       appTourProgress,
       mode,
+      values,
+      handleChange,
+      setFieldValue,
+      submitForm,
     } = this.props;
 
     const handleCancelClick = () => {
-      if (dirty && appTourProgress !== APP_TOUR_STARTED) {
+      if (isDirty && appTourProgress !== APP_TOUR_STARTED) {
         onCancel();
       } else {
         onDiscard();
       }
     };
 
-    const expressionsNotAvailable = !expressions || expressions.length === 0;
+    const expressionsNotAvailable = !values.expressions || values.expressions.length === 0;
 
     return (
       <div className="NavigationBarConfigForm">
@@ -71,7 +75,7 @@ export default class NavigationBarConfigForm extends PureComponent {
           {' '}
           <FormattedMessage id="widget.navigationBar.config.title" defaultMessage="Navigation - Bar" />
         </h5>
-        <form onSubmit={handleSubmit} className="form-horizontal">
+        <Form onSubmit={handleSubmit} className="form-horizontal">
           <Row>
             <Col xs={12}>
               <fieldset className="no-padding">
@@ -81,14 +85,20 @@ export default class NavigationBarConfigForm extends PureComponent {
                 />
                 <Col lg={6} md={10} smOffset={2} className="no-padding">
                   <FieldArray
-                    component={NavigationBarExpressionsList}
                     name="expressions"
-                    pages={pages}
-                    language={language}
-                    loading={loading}
-                    intl={intl}
-                    navSpec={initialValues.navSpec}
-                  />
+                  >
+                    {() => (<NavigationBarExpressionsList
+                      expressions={values.expressions}
+                      pages={pages}
+                      language={language}
+                      loading={loading}
+                      intl={intl}
+                      navSpec={initialValues.navSpec}
+                      remove={(index) => { onRemoveExpression(index, setFieldValue, values); }}
+                      swap={(indexA, indexB) =>
+                        onSwapExpressions(indexA, indexB, setFieldValue, values)}
+                    />)}
+                  </FieldArray>
                 </Col>
               </fieldset>
             </Col>
@@ -107,6 +117,7 @@ export default class NavigationBarConfigForm extends PureComponent {
                     language={language}
                     onSpecificPageChoose={onSpecificPageChoose}
                     appTourProgress={appTourProgress}
+                    handleChange={handleChange}
                   />
                 </Col>
               </fieldset>
@@ -121,8 +132,9 @@ export default class NavigationBarConfigForm extends PureComponent {
                 />
                 <Col lg={12} md={12} className="no-padding">
                   <NavigatorBarOperator
-                    addConfig={addConfig}
-                    onAddNewExpression={() => onAddNewExpression(addConfig, appTourProgress)}
+                    addConfig={values.addConfig}
+                    onAddNewExpression={() =>
+                      onAddNewExpression(values, appTourProgress, setFieldValue)}
                     appTourProgress={appTourProgress}
                   />
                 </Col>
@@ -137,8 +149,8 @@ export default class NavigationBarConfigForm extends PureComponent {
                     className="pull-right NavigationBarConfigForm__save-btn app-tour-step-16"
                     type="submit"
                     bsStyle="primary"
-                    disabled={invalid || submitting || expressionsNotAvailable}
-                    onClick={onSave}
+                    disabled={!isValid || isSubmitting || expressionsNotAvailable}
+                    onClick={() => onSave(submitForm)}
                   >
                     <FormattedMessage id="app.save" />
                   </Button>
@@ -154,8 +166,8 @@ export default class NavigationBarConfigForm extends PureComponent {
                   appTourProgress !== APP_TOUR_STARTED && (
                     <ConfirmCancelModalContainer
                       contentText={intl.formatMessage({ id: 'app.confirmCancel' })}
-                      invalid={invalid}
-                      submitting={submitting}
+                      invalid={!isValid}
+                      submitting={isSubmitting}
                       onSave={onSave}
                       onDiscard={onDiscard}
                     />
@@ -165,27 +177,27 @@ export default class NavigationBarConfigForm extends PureComponent {
               <AppTourContainer />
             </Row>
           }
-        </form>
+        </Form>
       </div>
     );
   }
 }
 
-NavigationBarConfigForm.propTypes = {
+NavigationBarConfigFormBody.propTypes = {
   intl: intlShape.isRequired,
   pages: PropTypes.arrayOf(PropTypes.shape({})),
   onDidMount: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool.isRequired,
-  submitting: PropTypes.bool.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
   language: PropTypes.string,
-  dirty: PropTypes.bool,
+  isDirty: PropTypes.bool.isRequired,
   onDiscard: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
   onAddNewExpression: PropTypes.func.isRequired,
-  addConfig: PropTypes.shape({}),
-  expressions: PropTypes.arrayOf(PropTypes.shape({})),
+  onRemoveExpression: PropTypes.func.isRequired,
+  onSwapExpressions: PropTypes.func.isRequired,
   initialValues: PropTypes.shape({
     navSpec: PropTypes.string,
   }).isRequired,
@@ -194,15 +206,36 @@ NavigationBarConfigForm.propTypes = {
   onSpecificPageChoose: PropTypes.func.isRequired,
   appTourProgress: PropTypes.string,
   mode: PropTypes.string,
+  values: PropTypes.shape({
+    addConfig: PropTypes.shape({}),
+    expressions: PropTypes.arrayOf(PropTypes.shape()),
+  }).isRequired,
+  handleChange: PropTypes.func.isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  submitForm: PropTypes.func.isRequired,
 };
 
-NavigationBarConfigForm.defaultProps = {
+NavigationBarConfigFormBody.defaultProps = {
   pages: [],
-  dirty: false,
   language: 'en',
-  addConfig: {},
-  expressions: [],
   loading: null,
   appTourProgress: '',
   mode: '',
 };
+
+const NavigationBarConfigForm = withFormik({
+  enableReinitialize: true,
+  keepDirtyOnReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => (
+    {
+      ...initialValues,
+      addConfig: initialValues.addConfig || {},
+      expressions: initialValues.expressions || [],
+    }
+  ),
+  handleSubmit: (values, { props: { onSubmit } }) => {
+    onSubmit(values);
+  },
+})(NavigationBarConfigFormBody);
+
+export default NavigationBarConfigForm;
diff --git a/src/ui/widgets/config/forms/NavigationBarConfigFormContainer.js b/src/ui/widgets/config/forms/NavigationBarConfigFormContainer.js
index 0926b43c1..6a91fe5bd 100644
--- a/src/ui/widgets/config/forms/NavigationBarConfigFormContainer.js
+++ b/src/ui/widgets/config/forms/NavigationBarConfigFormContainer.js
@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
-import { reduxForm, submit, formValueSelector, arrayPush, change } from 'redux-form';
 import { clearErrors, addToast, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages';
 import { routeConverter } from '@entando/utils';
 import NavigationBarConfigForm from 'ui/widgets/config/forms/NavigationBarConfigForm';
@@ -9,7 +8,6 @@ import { fetchLanguages } from 'state/languages/actions';
 import { getLocale } from 'state/locale/selectors';
 import { getSearchPages } from 'state/pages/selectors';
 import { updateConfiguredPageWidget } from 'state/widget-config/actions';
-
 import { setVisibleModal } from 'state/modal/actions';
 import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';
 import { ROUTE_PAGE_CONFIG } from 'app-init/router';
@@ -27,29 +25,26 @@ export const mapStateToProps = (state, ownProps) => ({
   pages: getSearchPages(state) || [],
   language: getLocale(state),
   widgetCode: ownProps.widgetCode,
-  addConfig: formValueSelector(NavigationBarWidgetID)(state, 'addConfig'),
-  expressions: formValueSelector(NavigationBarWidgetID)(state, 'expressions'),
   loading: getLoading(state).expressionList,
   appTourProgress: getAppTourProgress(state),
 });
 
 export const mapDispatchToProps = (dispatch, ownProps) => ({
-  onDidMount: ({ initialize, appTourProgress }) => {
+  onDidMount: ({ appTourProgress, setFieldValue }) => {
     if (appTourProgress === APP_TOUR_STARTED) {
-      dispatch(initialize({ addConfig: { spec: 'code', targetCode: HOMEPAGE_CODE } }));
+      setFieldValue('addConfig', { spec: 'code', targetCode: HOMEPAGE_CODE });
     }
     dispatch(fetchLanguages({ page: 1, pageSize: 0 }));
     dispatch(fetchSearchPages({ page: 1, pageSize: 0 }));
   },
-  fetchExpressions: (props) => {
+  fetchExpressions: ({ setFieldValue }) => {
     const { widgetConfig } = ownProps || {};
     const { navSpec } = widgetConfig || {};
-    const { initialize } = props;
     if (navSpec) {
       dispatch(sendGetNavigatorExpressionsFromNavspec(navSpec)).then((res) => {
         if (res) {
           const { expressions = [] } = res;
-          return dispatch(initialize({ expressions }));
+          return setFieldValue('expressions', expressions);
         }
         return dispatch(addToast(
           'Error',
@@ -88,10 +83,10 @@ export const mapDispatchToProps = (dispatch, ownProps) => ({
       ));
     });
   },
-  onSave: () => {
+  onSave: (submitForm) => {
     dispatch(setAppTourLastStep(17));
     dispatch(setVisibleModal(''));
-    dispatch(submit(NavigationBarWidgetID));
+    submitForm();
   },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => {
@@ -99,29 +94,39 @@ export const mapDispatchToProps = (dispatch, ownProps) => ({
     const { history, pageCode } = ownProps;
     history.push(routeConverter(ROUTE_PAGE_CONFIG, { pageCode }));
   },
-  onAddNewExpression: (config, appTourProgress) => {
-    const newExpression = { ...config };
-    newExpression.specSuperLevel = config.specSuperLevel || 1;
-    newExpression.specAbsLevel = config.specAbsLevel || 1;
-    newExpression.operatorSubtreeLevel = config.operatorSubtreeLevel || '1';
-    dispatch(arrayPush(NavigationBarWidgetID, 'expressions', newExpression));
+  onAddNewExpression: (values, appTourProgress, setFieldValue) => {
+    const newExpression = { ...values.addConfig };
+    newExpression.specSuperLevel = values.addConfig.specSuperLevel || 1;
+    newExpression.specAbsLevel = values.addConfig.specAbsLevel || 1;
+    newExpression.operatorSubtreeLevel = values.addConfig.operatorSubtreeLevel || '1';
+    setFieldValue('expressions', [...values.expressions, newExpression]);
     if (appTourProgress === APP_TOUR_STARTED) {
       dispatch(setAppTourLastStep(16));
     }
   },
-  onSpecificPageChoose: (chosenPage, appTourProgress) => {
+  onRemoveExpression: (index, setFieldValue, values) => {
+    const { expressions } = values;
+    const newExpressions = [...expressions];
+    newExpressions.splice(index, 1);
+    setFieldValue('expressions', newExpressions);
+  },
+  onSwapExpressions: (indexA, indexB, setFieldValue, values) => {
+    const { expressions } = values;
+    const newExpressions = [...expressions];
+    const temp = expressions[indexA];
+    newExpressions[indexA] = newExpressions[indexB];
+    newExpressions[indexB] = temp;
+    setFieldValue('expressions', newExpressions);
+  },
+  onSpecificPageChoose: (chosenPage, appTourProgress, setFieldValue) => {
     if (appTourProgress === APP_TOUR_STARTED && chosenPage) {
-      dispatch(change('navigationBarWidgetForm', 'addConfig.spec', 'code'));
+      setFieldValue('addConfig.spec', 'code');
       dispatch(setAppTourLastStep(15));
     }
   },
 });
 
-const NavigationBarConfigFormContainer = injectIntl(reduxForm({
-  form: NavigationBarWidgetID,
-  enableReinitialize: true,
-  keepDirtyOnReinitialize: true,
-})(NavigationBarConfigForm));
+const NavigationBarConfigFormContainer = injectIntl(NavigationBarConfigForm);
 
 export default connect(mapStateToProps, mapDispatchToProps, null, {
   pure: false,
diff --git a/src/ui/widgets/config/forms/NavigationBarExpressionsList.js b/src/ui/widgets/config/forms/NavigationBarExpressionsList.js
index 485526df2..f56c29241 100644
--- a/src/ui/widgets/config/forms/NavigationBarExpressionsList.js
+++ b/src/ui/widgets/config/forms/NavigationBarExpressionsList.js
@@ -1,8 +1,8 @@
-import React from 'react';
+import { Alert, Button, ButtonGroup, Col, Row, Spinner } from 'patternfly-react';
 import PropTypes from 'prop-types';
-import { v4 as uuidv4 } from 'uuid';
+import React from 'react';
 import { FormattedMessage, intlShape } from 'react-intl';
-import { Button, Row, Col, ButtonGroup, Alert, Spinner } from 'patternfly-react';
+import { v4 as uuidv4 } from 'uuid';
 
 const messages = {
   current: 'widget.navigationBar.config.this',
@@ -67,10 +67,17 @@ const generateListItemString = (expression, pages, language, intl) => {
 };
 
 const NavigationBarExpressionsList = ({
-  fields, pages, language, loading, intl, navSpec,
+  expressions,
+  pages,
+  language,
+  loading,
+  intl,
+  navSpec,
+  remove,
+  swap,
 }) => {
-  const renderList = fields.map((_, i) => {
-    const expression = fields.get(i) || {};
+  const renderList = expressions && expressions.map((_, i) => {
+    const expression = expressions[i] || {};
     return (
       <li className="list-group-item" key={uuidv4()}>
         <Row className="NavigationBarConfigForm__expression-row">
@@ -88,25 +95,25 @@ const NavigationBarExpressionsList = ({
                 {
                   i !== 0
                   && (
-                  <Button onClick={() => fields.swap(i, i - 1)}>
-                    <span className="icon fa fa-sort-asc" />
-                  </Button>
+                    <Button onClick={() => swap(i, i - 1)}>
+                      <span className="icon fa fa-sort-asc" />
+                    </Button>
                   )
                 }
                 {
-                  i !== fields.length - 1
+                  i !== expressions.length - 1
                   && (
-                  <Button onClick={() => fields.swap(i, i + 1)}>
-                    <span className="icon fa fa-sort-desc" />
-                  </Button>
+                    <Button onClick={() => swap(i, i + 1)}>
+                      <span className="icon fa fa-sort-desc" />
+                    </Button>
                   )
                 }
               </ButtonGroup>
               <Button
                 className="NavigationBarConfigForm__btn-remove"
                 title="Delete"
-                onClick={() => fields.remove(i)}
-                onKeyDown={() => fields.remove(i)}
+                onClick={() => remove(i)}
+                onKeyDown={() => remove(i)}
               >
                 <span className="fa fa-trash-o fa-lg" />
               </Button>
@@ -121,7 +128,7 @@ const NavigationBarExpressionsList = ({
   return (
     <Spinner loading={isLoading}>
       {
-        (!fields || !fields.length) ? (
+        (!expressions || !expressions.length) ? (
           <Alert type="info">
             <FormattedMessage id="widget.navigationBar.config.noExpressions" />
           </Alert>
@@ -139,19 +146,13 @@ const NavigationBarExpressionsList = ({
 
 NavigationBarExpressionsList.propTypes = {
   intl: intlShape.isRequired,
-  fields: PropTypes.shape({
-    name: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    push: PropTypes.func,
-    map: PropTypes.func,
-    get: PropTypes.func,
-    remove: PropTypes.func,
-    length: PropTypes.number,
-    swap: PropTypes.func,
-  }).isRequired,
+  expressions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   pages: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   language: PropTypes.string,
   navSpec: PropTypes.string,
   loading: PropTypes.bool,
+  remove: PropTypes.func.isRequired,
+  swap: PropTypes.func.isRequired,
 };
 
 NavigationBarExpressionsList.defaultProps = {
diff --git a/src/ui/widgets/config/forms/NavigationBarTargetPage.js b/src/ui/widgets/config/forms/NavigationBarTargetPage.js
index 5c5ca6864..9d2755009 100644
--- a/src/ui/widgets/config/forms/NavigationBarTargetPage.js
+++ b/src/ui/widgets/config/forms/NavigationBarTargetPage.js
@@ -1,30 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'react-intl';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { ToggleButton, ButtonToolbar } from 'react-bootstrap';
 
 import ToggleButtonGroupField from 'ui/widgets/config/forms/ToggleButtonGroupField';
 import { APP_TOUR_STARTED } from 'state/app-tour/const';
 
 const NavigationBarTargetPage = ({
-  intl, pages, language, onSpecificPageChoose, appTourProgress,
+  intl, pages, language, onSpecificPageChoose, appTourProgress, handleChange, setFieldValue,
 }) => (
   <div>
     <ButtonToolbar>
-      <Field name="addConfig.spec" component={ToggleButtonGroupField} onBlur={(e) => { e.preventDefault(); }}>
+      <Field name="addConfig.spec" component={ToggleButtonGroupField} onBlur={(e) => { e.preventDefault(); }} >
         <ToggleButton
           value="current"
+          onChange={handleChange}
         >
           <FormattedMessage id="widget.navigationBar.config.this" />
         </ToggleButton>
         <ToggleButton
           value="parent"
+          onChange={handleChange}
         >
           <FormattedMessage id="widget.navigationBar.config.parent" />
         </ToggleButton>
         <ToggleButton
           value="super"
+          onChange={handleChange}
         >
           <span><FormattedMessage id="widget.navigationBar.config.fromThis" /></span>
           <Field
@@ -38,6 +41,7 @@ const NavigationBarTargetPage = ({
         </ToggleButton>
         <ToggleButton
           value="abs"
+          onChange={handleChange}
         >
           <span><FormattedMessage id="widget.navigationBar.config.fromRoot" /></span>
           <Field
@@ -51,14 +55,18 @@ const NavigationBarTargetPage = ({
         </ToggleButton>
         <ToggleButton
           value="code"
+          onChange={handleChange}
           className="app-tour-step-14"
         >
           <span><FormattedMessage id="widget.navigationBar.config.specific" /></span>
           <Field
             name="addConfig.targetCode"
-            component="select"
+            as="select"
             disabled={appTourProgress === APP_TOUR_STARTED}
-            onChange={e => onSpecificPageChoose(e.target.value, appTourProgress)}
+            onChange={(e) => {
+              onSpecificPageChoose(e.target.value, appTourProgress, setFieldValue);
+              handleChange(e);
+            }}
           >
             <option key="chooseOption" value="">{intl.formatMessage({ id: 'app.chooseAnOption' })}</option>
             {pages.map(page => (
@@ -80,6 +88,8 @@ NavigationBarTargetPage.propTypes = {
   language: PropTypes.string.isRequired,
   onSpecificPageChoose: PropTypes.func.isRequired,
   appTourProgress: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  setFieldValue: PropTypes.func.isRequired,
 };
 
 export default NavigationBarTargetPage;
diff --git a/src/ui/widgets/config/forms/NavigatorBarOperator.js b/src/ui/widgets/config/forms/NavigatorBarOperator.js
index 864a3dd87..398a19d87 100644
--- a/src/ui/widgets/config/forms/NavigatorBarOperator.js
+++ b/src/ui/widgets/config/forms/NavigatorBarOperator.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { Col, Button } from 'patternfly-react';
 
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
 import FormLabel from 'ui/common/form/FormLabel';
+import SelectInput from 'ui/common/formik-field/SelectInput';
 
 const operatorTypeOptionIds = [
   { labelId: 'widget.navigationBar.config.none', code: '' },
@@ -20,7 +20,7 @@ const NavigatorBarOperator = ({
 }) => (
   <div>
     <Field
-      component={RenderSelectInput}
+      component={SelectInput}
       options={operatorTypeOptionIds.map(({ labelId, code }) => ({
         text: intl.formatMessage({ id: labelId }),
         value: code,
@@ -31,7 +31,7 @@ const NavigatorBarOperator = ({
       name="addConfig.operator"
     />
     <Field
-      component={RenderSelectInput}
+      component={SelectInput}
       options={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(v => ({ text: `${v}`, value: v }))}
       label={
         <FormLabel labelId="widget.navigationBar.config.subtreeDepth" />
diff --git a/src/ui/widgets/config/forms/SimpleWidgetConfigForm.js b/src/ui/widgets/config/forms/SimpleWidgetConfigForm.js
index d74313932..95ebc753f 100644
--- a/src/ui/widgets/config/forms/SimpleWidgetConfigForm.js
+++ b/src/ui/widgets/config/forms/SimpleWidgetConfigForm.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { reduxForm, Field } from 'redux-form';
+import { Field, withFormik } from 'formik';
 import { Row, Col, Button } from 'patternfly-react';
 import { FormattedMessage } from 'react-intl';
 import FormLabel from 'ui/common/form/FormLabel';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import RenderTextInput from 'ui/common/formik-field/RenderTextInput';
 import WidgetConfigPortal from 'ui/widgets/config/WidgetConfigPortal';
 
 export const SIMPLE_WIDGET_CONFIG_FORM_ID = 'simpleWidgetConfigFormId';
@@ -55,8 +55,13 @@ SimpleWidgetConfigForm.defaultProps = {
   parameters: [],
 };
 
-const SimpleWidgetConfig = reduxForm({
-  form: SIMPLE_WIDGET_CONFIG_FORM_ID,
+const SimpleWidgetConfig = withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ initialValues }) => initialValues,
+  handleSubmit: (values, { props: { onSubmit } }) => {
+    onSubmit(values);
+  },
+  displayName: SIMPLE_WIDGET_CONFIG_FORM_ID,
 })(SimpleWidgetConfigForm);
 
 export default SimpleWidgetConfig;
diff --git a/src/ui/widgets/config/forms/SimpleWidgetConfigFormContainer.js b/src/ui/widgets/config/forms/SimpleWidgetConfigFormContainer.js
index f495dc126..7fff08cb1 100644
--- a/src/ui/widgets/config/forms/SimpleWidgetConfigFormContainer.js
+++ b/src/ui/widgets/config/forms/SimpleWidgetConfigFormContainer.js
@@ -1,13 +1,10 @@
 import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
-import { reduxForm } from 'redux-form';
 import { clearErrors, addToast, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages';
 import SimpleWidgetConfigForm from 'ui/widgets/config/forms/SimpleWidgetConfigForm';
 import { updateConfiguredPageWidget } from 'state/widget-config/actions';
 import { initConfigPage } from 'state/page-config/actions';
 
-export const ID = 'navigationBarWidgetForm';
-
 export const mapStateToProps = (state, ownProps) => ({
   initialValues: ownProps.widgetConfig || {},
 });
@@ -35,11 +32,7 @@ export const mapDispatchToProps = (dispatch, ownProps) => ({
   },
 });
 
-const SimpleWidgetConfigFormContainer = injectIntl(reduxForm({
-  form: ID,
-  enableReinitialize: true,
-  keepDirtyOnReinitialize: true,
-})(SimpleWidgetConfigForm));
+const SimpleWidgetConfigFormContainer = injectIntl(SimpleWidgetConfigForm);
 
 export default connect(mapStateToProps, mapDispatchToProps, null, {
   pure: false,
diff --git a/src/ui/widgets/config/forms/ToggleButtonGroupField.js b/src/ui/widgets/config/forms/ToggleButtonGroupField.js
index 6a57f4e47..799fda928 100644
--- a/src/ui/widgets/config/forms/ToggleButtonGroupField.js
+++ b/src/ui/widgets/config/forms/ToggleButtonGroupField.js
@@ -2,16 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ToggleButtonGroup } from 'react-bootstrap';
 
-const ToggleButtonGroupField = ({ input, children }) => (
-  <ToggleButtonGroup {...input} value={input.value} type="radio">
-    {children}
+const ToggleButtonGroupField = props => (
+  <ToggleButtonGroup type="radio" name={props.field.name} {...props.field} value={props.field.value} onChange={props.field.onChange} >
+    {props.children}
   </ToggleButtonGroup>
 );
-
 ToggleButtonGroupField.propTypes = {
   input: PropTypes.shape({
     value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
   }).isRequired,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }).isRequired,
   children: PropTypes.node.isRequired,
 };
 
diff --git a/src/ui/widgets/edit/EditWidgetFormContainer.js b/src/ui/widgets/edit/EditWidgetFormContainer.js
index 4e1d3409f..b1763b6d3 100644
--- a/src/ui/widgets/edit/EditWidgetFormContainer.js
+++ b/src/ui/widgets/edit/EditWidgetFormContainer.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
-import { submit } from 'redux-form';
+import { get } from 'lodash';
 import WidgetForm from 'ui/widgets/common/WidgetForm';
 
 import { fetchLanguages } from 'state/languages/actions';
@@ -9,7 +9,7 @@ import { getActiveLanguages } from 'state/languages/selectors';
 import { fetchMyGroups } from 'state/groups/actions';
 import { getGroupsList } from 'state/groups/selectors';
 import { getSelectedWidgetDefaultUi, getSelectedParentWidget, getSelectedParentWidgetParameters, getSelectedWidget } from 'state/widgets/selectors';
-import { fetchWidget, sendPutWidgets, setSelectedWidget } from 'state/widgets/actions';
+import { FREE_ACCESS_GROUP_VALUE, fetchWidget, sendPutWidgets, setSelectedWidget } from 'state/widgets/actions';
 import { getLoading } from 'state/loading/selectors';
 
 import { setVisibleModal } from 'state/modal/actions';
@@ -20,7 +20,7 @@ import { isMicrofrontendWidgetForm } from 'helpers/microfrontends';
 const EDIT_MODE = 'edit';
 
 export const mapStateToProps = (state) => {
-  const widget = getSelectedWidget(state);
+  const widget = getSelectedWidget(state) || {};
   return ({
     mode: EDIT_MODE,
     groups: getGroupsList(state),
@@ -31,6 +31,12 @@ export const mapStateToProps = (state) => {
     loading: getLoading(state).fetchWidget,
     configUiRequired: !!isMicrofrontendWidgetForm(widget),
     widget,
+    initialValues: {
+      ...widget,
+      configUi: !widget.configUi ? '' : JSON.stringify(widget.configUi, null, 2),
+      group: widget.group || FREE_ACCESS_GROUP_VALUE,
+      customUi: get(widget, 'guiFragments[0].customUi'),
+    },
   });
 };
 
@@ -50,7 +56,7 @@ export const mapDispatchToProps = (dispatch, { history, match: { params } }) =>
     };
     return dispatch(sendPutWidgets(jsonData, saveType));
   },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('widget')); },
+  onSave: (submitForm) => { dispatch(setVisibleModal('')); submitForm(); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_WIDGET_LIST)); },
 });
diff --git a/src/ui/widgets/edit/EditWidgetPageContainer.js b/src/ui/widgets/edit/EditWidgetPageContainer.js
index 7c3484781..399c7c63d 100644
--- a/src/ui/widgets/edit/EditWidgetPageContainer.js
+++ b/src/ui/widgets/edit/EditWidgetPageContainer.js
@@ -3,14 +3,21 @@ import { connect } from 'react-redux';
 
 // import the Component to be connected
 import EditWidgetPage from 'ui/widgets/edit/EditWidgetPage';
-import { formValueSelector } from 'redux-form';
 import withPermissions from 'ui/auth/withPermissions';
 import { SUPERUSER_PERMISSION } from 'state/permissions/const';
+import { getSelectedWidget } from 'state/widgets/selectors';
+import { getDefaultLanguage } from 'state/languages/selectors';
+
+export const mapStateToProps = (state) => {
+  const selectedWidget = getSelectedWidget(state) || {
+    titles: {},
+  };
+  const defaultLang = getDefaultLanguage(state);
+  return {
+    widgetName: selectedWidget.titles ? selectedWidget.titles[defaultLang] : '',
+  };
+};
 
-export const mapStateToProps = state => (
-  {
-    widgetName: formValueSelector('widget')(state, 'name'),
-  });
 
 // connect the component
 const EditWidgetPageContainer = connect(mapStateToProps, null)(EditWidgetPage);
diff --git a/src/ui/widgets/list/WidgetListTable.js b/src/ui/widgets/list/WidgetListTable.js
index b29f068c3..303d638e4 100644
--- a/src/ui/widgets/list/WidgetListTable.js
+++ b/src/ui/widgets/list/WidgetListTable.js
@@ -77,7 +77,7 @@ export const WidgetListTableBody = ({
       className: 'text-center',
     },
     Cell: (cellinfo) => {
-      const { values: { code, locked, hasConfig } } = cellinfo;
+      const { values: { code }, original: { locked, hasConfig } } = cellinfo;
       return (
         <div data-testid={`${code}-actions`}>
           <DropdownKebab pullRight id={`WidgetListRow-dropown-${code}`}>
diff --git a/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js b/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js
index aef114bbd..e82ff1c2d 100644
--- a/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js
+++ b/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { routeConverter } from '@entando/utils';
-import { submit } from 'redux-form';
 import { clearErrors } from '@entando/messages';
+import { get } from 'lodash';
 import WidgetForm from 'ui/widgets/common/WidgetForm';
 
 import { fetchLanguages } from 'state/languages/actions';
@@ -20,15 +20,33 @@ import { getLoading } from 'state/loading/selectors';
 import { setVisibleModal } from 'state/modal/actions';
 import { ROUTE_WIDGET_LIST } from 'app-init/router';
 import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal';
+import { getUserPreferences } from 'state/user-preferences/selectors';
+import { getMyGroupPermissions } from 'state/permissions/selectors';
+import { MANAGE_PAGES_PERMISSION, SUPERUSER_PERMISSION } from 'state/permissions/const';
 
-export const mapStateToProps = state => ({
-  groups: getGroupsList(state),
-  parentWidget: getSelectedParentWidget(state),
-  parentWidgetParameters: getSelectedParentWidgetParameters(state),
-  defaultUIField: getSelectedWidgetDefaultUi(state),
-  languages: getActiveLanguages(state),
-  loading: getLoading(state).fetchWidget,
-});
+export const mapStateToProps = (state) => {
+  const selectedParentWidget = getSelectedParentWidget(state) || {};
+  const userPreferences = getUserPreferences(state);
+  const groupWithPagePermission = getMyGroupPermissions(state)
+    .find(({ permissions }) => (
+      permissions.includes(SUPERUSER_PERMISSION) || permissions.includes(MANAGE_PAGES_PERMISSION)
+    ));
+  const defaultOwnerGroup = userPreferences.defaultPageOwnerGroup
+    || (groupWithPagePermission && groupWithPagePermission.group);
+  return ({
+    groups: getGroupsList(state),
+    parentWidget: selectedParentWidget,
+    parentWidgetParameters: getSelectedParentWidgetParameters(state),
+    defaultUIField: getSelectedWidgetDefaultUi(state),
+    languages: getActiveLanguages(state),
+    loading: getLoading(state).fetchWidget,
+    initialValues: {
+      config: get(selectedParentWidget, 'parameters', []),
+      parentType: get(selectedParentWidget, 'code', ''),
+      group: defaultOwnerGroup,
+    },
+  });
+};
 
 export const mapDispatchToProps = (dispatch, { history, match: { params } }) => ({
   onWillMount: () => {
@@ -44,9 +62,11 @@ export const mapDispatchToProps = (dispatch, { history, match: { params } }) =>
     dispatch(clearErrors());
     return dispatch(sendPostWidgets(jsonData, saveType));
   },
-  onSave: () => { dispatch(setVisibleModal('')); dispatch(submit('widget')); },
+  onSave: (submitForm) => { dispatch(setVisibleModal('')); submitForm(); },
   onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)),
   onDiscard: () => { dispatch(setVisibleModal('')); history.push(routeConverter(ROUTE_WIDGET_LIST)); },
+  onChangeDefaultTitle: (title, setFieldValue) =>
+    setFieldValue('code', title.replace(/\W/g, '_').toLowerCase()),
 });
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, {
diff --git a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js
index e4dba6cea..d16b9d986 100644
--- a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js
+++ b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Grid, Row, Col, Breadcrumb } from 'patternfly-react';
+import { Row, Col, Breadcrumb } from 'patternfly-react';
 
 import BreadcrumbItem from 'ui/common/BreadcrumbItem';
 import PageTitle from 'ui/internal-page/PageTitle';
@@ -12,10 +12,10 @@ import withPermissions from 'ui/auth/withPermissions';
 import { SUPERUSER_PERMISSION } from 'state/permissions/const';
 
 export const NewUserWidgetPageBody = () => (
-  <InternalPage className="AddWidgetPage">
-    <Grid fluid>
-      <Row>
-        <Col xs={12}>
+  <InternalPage className="EditWidgetPage WidgetPage">
+    <div className="WidgetPage__header">
+      <div className="WidgetPage__top">
+        <div>
           <Breadcrumb>
             <BreadcrumbItem>
               <FormattedMessage id="menu.uxComponents" />
@@ -27,8 +27,11 @@ export const NewUserWidgetPageBody = () => (
               <FormattedMessage id="app.add" />
             </BreadcrumbItem>
           </Breadcrumb>
-        </Col>
-      </Row>
+        </div>
+        <div>
+          <div id="widget-button-holder" />
+        </div>
+      </div>
       <Row>
         <Col xs={12}>
           <PageTitle titleId="app.add" helpId="widget.help" />
@@ -40,7 +43,7 @@ export const NewUserWidgetPageBody = () => (
           <NewUserWidgetFormContainer />
         </Col>
       </Row>
-    </Grid>
+    </div>
   </InternalPage>
 );
 
diff --git a/test/state/component-repository/component-repositories/actions.test.js b/test/state/component-repository/component-repositories/actions.test.js
index 4578c1b8b..9c6d1c1c7 100644
--- a/test/state/component-repository/component-repositories/actions.test.js
+++ b/test/state/component-repository/component-repositories/actions.test.js
@@ -92,7 +92,8 @@ describe('state/component-repository/component-repositories/actions', () => {
 
   describe('fetchComponentRepositories', () => {
     beforeEach(() => {
-      getComponentRepositories.mockImplementation(mockApi({ payload: LIST_COMPONENT_REPOSITORIES_OK }));
+      getComponentRepositories
+        .mockImplementation(mockApi({ payload: LIST_COMPONENT_REPOSITORIES_OK }));
     });
 
     it('fetchComponentRepositories calls setComponentRepositories and setPage actions', (done) => {
@@ -147,13 +148,11 @@ describe('state/component-repository/component-repositories/actions', () => {
     });
 
     it('prepopulates the form if initForm is true', (done) => {
-      store.dispatch(fetchComponentRepository(12, true)).then(() => {
+      store.dispatch(fetchComponentRepository(12)).then(() => {
         expect(getComponentRepository).toHaveBeenCalledWith(12);
         const actions = store.getActions();
-        expect(actions).toHaveLength(2);
+        expect(actions).toHaveLength(1);
         expect(actions[0]).toHaveProperty('type', SET_SELECTED_COMPONENT_REPOSITORY);
-        expect(actions[1]).toHaveProperty('type', '@@redux-form/INITIALIZE');
-        expect(actions[1]).toHaveProperty('meta.form', 'ecrSettings');
         done();
       }).catch(done.fail);
     });
diff --git a/test/state/content-type/actions.test.js b/test/state/content-type/actions.test.js
index b6a221dd8..26e011dd6 100644
--- a/test/state/content-type/actions.test.js
+++ b/test/state/content-type/actions.test.js
@@ -498,7 +498,7 @@ describe('state/content-type/actions ', () => {
           .dispatch(fetchContentType('AAA'))
           .then(() => {
             const actions = store.getActions();
-            expect(actions).toHaveLength(2);
+            expect(actions).toHaveLength(1);
             expect(actions[0]).toHaveProperty('type', SET_SELECTED_CONTENT_TYPE);
             expect(actions[0]).toHaveProperty('payload');
             expect(actions[0].payload).toMatchObject({
@@ -596,9 +596,8 @@ describe('state/content-type/actions ', () => {
           .then(() => {
             expect(getAttributeFromContentType).toHaveBeenCalled();
             const actions = store.getActions();
-            expect(actions).toHaveLength(2);
-            expect(actions[0]).toHaveProperty('type', '@@redux-form/INITIALIZE');
-            expect(actions[1]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_CONTENTTYPE);
+            expect(actions).toHaveLength(1);
+            expect(actions[0]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_CONTENTTYPE);
             done();
           })
           .catch(done.fail);
@@ -638,10 +637,10 @@ describe('state/content-type/actions ', () => {
           .dispatch(fetchAttributeFromContentType('attribute', 'AAA', 'mlstc'))
           .then(() => {
             const actions = store.getActions();
-            expect(actions).toHaveLength(2);
-            expect(actions[1]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_CONTENTTYPE);
-            expect(actions[1].payload.attribute.type).toEqual('Date');
-            expect(actions[1].payload.attribute.code).toEqual('mlstc');
+            expect(actions).toHaveLength(1);
+            expect(actions[0]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_CONTENTTYPE);
+            expect(actions[0].payload.attribute.type).toEqual('Date');
+            expect(actions[0].payload.attribute.code).toEqual('mlstc');
             done();
           })
           .catch(done.fail);
@@ -893,9 +892,9 @@ describe('state/content-type/actions ', () => {
         store
           .dispatch(fetchContentTypeAttributeRef('AA1', 'TYPE_COMPOSITE', routeFunc, TYPE_COMPOSITE))
           .then(() => {
-            expect(getContentTypeAttribute).not.toHaveBeenCalled();
+            expect(getContentTypeAttribute).toHaveBeenCalled();
             const actions = store.getActions();
-            expect(actions).toHaveLength(2);
+            expect(actions).toHaveLength(3);
             expect(actions[0]).toHaveProperty('type', SET_ACTION_MODE);
             expect(actions[0]).toHaveProperty('payload', {
               actionMode: MODE_ADD_ATTRIBUTE_COMPOSITE,
@@ -919,9 +918,8 @@ describe('state/content-type/actions ', () => {
           .then(() => {
             const actions = store.getActions(MODE_ADD_ATTRIBUTE_COMPOSITE);
             expect(getContentTypeAttribute).toHaveBeenCalled();
-            expect(actions).toHaveLength(2);
+            expect(actions).toHaveLength(1);
             expect(actions[0]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE);
-            expect(actions[1]).toHaveProperty('type', '@@redux-form/INITIALIZE');
             done();
           })
           .catch(done.fail);
diff --git a/test/state/data-models/actions.test.js b/test/state/data-models/actions.test.js
index 07fbf5a4c..4105a4712 100644
--- a/test/state/data-models/actions.test.js
+++ b/test/state/data-models/actions.test.js
@@ -84,9 +84,6 @@ describe('state/data-models/actions', () => {
     it('fetchDataModel calls initialize ', (done) => {
       store.dispatch(fetchDataModel(1)).then(() => {
         expect(getDataModel).toHaveBeenCalledWith(1);
-        const actions = store.getActions();
-        expect(actions).toHaveLength(1);
-        expect(actions[0]).toHaveProperty('type', '@@redux-form/INITIALIZE');
         done();
       }).catch(done.fail);
     });
diff --git a/test/state/data-types/actions.test.js b/test/state/data-types/actions.test.js
index a97a2b245..a17daf7a5 100644
--- a/test/state/data-types/actions.test.js
+++ b/test/state/data-types/actions.test.js
@@ -403,7 +403,7 @@ describe('state/data-types/actions ', () => {
         getDataType.mockImplementationOnce(mockApi({ payload: DATA_TYPES }));
         store.dispatch(fetchDataType('AAA')).then(() => {
           const actions = store.getActions();
-          expect(actions).toHaveLength(2);
+          expect(actions).toHaveLength(1);
           expect(actions[0]).toHaveProperty('type', SET_SELECTED_DATA_TYPE);
           expect(actions[0]).toHaveProperty('payload');
           expect(actions[0].payload).toMatchObject({ dataType: DATA_TYPES });
@@ -470,9 +470,8 @@ describe('state/data-types/actions ', () => {
         store.dispatch(fetchAttributeFromDataType('attribute', 'AAA', 'Text')).then(() => {
           expect(getAttributeFromDataType).toHaveBeenCalled();
           const actions = store.getActions();
-          expect(actions).toHaveLength(2);
-          expect(actions[0]).toHaveProperty('type', '@@redux-form/INITIALIZE');
-          expect(actions[1]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_DATATYPE);
+          expect(actions).toHaveLength(1);
+          expect(actions[0]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_DATATYPE);
           done();
         }).catch(done.fail);
       });
@@ -655,9 +654,9 @@ describe('state/data-types/actions ', () => {
         getFormTypeValue.mockReturnValue(TYPE_COMPOSITE);
         getActionModeDataTypeSelectedAttribute.mockReturnValue(MODE_ADD_ATTRIBUTE_COMPOSITE);
         store.dispatch(fetchDataTypeAttribute('TYPE_COMPOSITE', ROUTE, TYPE_COMPOSITE)).then(() => {
-          expect(getDataTypeAttribute).not.toHaveBeenCalled();
+          expect(getDataTypeAttribute).toHaveBeenCalled();
           const actions = store.getActions();
-          expect(actions).toHaveLength(1);
+          expect(actions).toHaveLength(2);
           expect(actions[0]).toHaveProperty('type', SET_ACTION_MODE);
           expect(actions[0]).toHaveProperty('payload', { actionMode: MODE_ADD_ATTRIBUTE_COMPOSITE });
           done();
@@ -672,9 +671,8 @@ describe('state/data-types/actions ', () => {
         store.dispatch(fetchDataTypeAttribute('attribute_code', ROUTE)).then(() => {
           const actions = store.getActions(MODE_ADD_ATTRIBUTE_COMPOSITE);
           expect(getDataTypeAttribute).toHaveBeenCalled();
-          expect(actions).toHaveLength(2);
+          expect(actions).toHaveLength(1);
           expect(actions[0]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE);
-          expect(actions[1]).toHaveProperty('type', '@@redux-form/INITIALIZE');
           done();
         }).catch(done.fail);
       });
diff --git a/test/state/edit-content/actions.test.js b/test/state/edit-content/actions.test.js
index 80ce8e0d7..03e77cef7 100644
--- a/test/state/edit-content/actions.test.js
+++ b/test/state/edit-content/actions.test.js
@@ -213,7 +213,13 @@ describe('editContent thunks', () => {
       editContent: { workMode: WORK_MODE_ADD, contentType: { typeCode: 'NEWS', typeDescription: 'News' } },
       languages,
       currentUser: { username: 'admin' },
-      form: { editcontentform: { values: {} } },
+      contentType: {
+        selected: {
+          type: 'List',
+          compositeAttributes: {},
+          attributes: [{ type: 'Boolean' }],
+        },
+      },
     });
     store
       .dispatch(saveContent({ attributes: [{ value: 'test' }] })).then(() => done());
diff --git a/test/state/email-config/actions.test.js b/test/state/email-config/actions.test.js
index 188cb2596..6e7ce15f8 100644
--- a/test/state/email-config/actions.test.js
+++ b/test/state/email-config/actions.test.js
@@ -1,6 +1,5 @@
 import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
-import { initialize } from 'redux-form';
 import { ADD_ERRORS, ADD_TOAST, TOAST_ERROR, TOAST_SUCCESS } from '@entando/messages';
 
 import {
@@ -14,6 +13,8 @@ import {
   addEmailSender,
   fetchEmailSender,
   updateEmailSender,
+  setSmtpServer,
+  setSelectedSender,
 } from 'state/email-config/actions';
 import {
   getSMTPServerSettings,
@@ -26,7 +27,7 @@ import {
   getEmailSender,
   putEmailSender,
 } from 'api/emailConfig';
-import { SET_EMAIL_SENDERS, REMOVE_EMAIL_SENDER } from 'state/email-config/types';
+import { SET_EMAIL_SENDERS, REMOVE_EMAIL_SENDER, SET_SELECTED_SENDER } from 'state/email-config/types';
 import { MOCK_SMTP_SERVER_SETTINGS, MOCK_EMAIL_SENDER_LIST, MOCK_EMAIL_SENDER } from 'test/mocks/emailConfig';
 import { mockApi } from 'test/testUtils';
 import { history } from 'app-init/router';
@@ -94,12 +95,21 @@ describe('state/email-config/actions', () => {
     });
   });
 
+  describe('setSelectedSender', () => {
+    it('should create the correct action object', () => {
+      expect(setSelectedSender(MOCK_EMAIL_SENDER)).toEqual({
+        type: SET_SELECTED_SENDER,
+        payload: MOCK_EMAIL_SENDER,
+      });
+    });
+  });
+
   describe('fetchSMTPServerSettings', () => {
     it('should initialize the email config form on success', (done) => {
       setupMockResponse(getSMTPServerSettings, MOCK_SMTP_SERVER_SETTINGS);
 
       const expectedActions = [
-        initialize('emailConfig', MOCK_SMTP_SERVER_SETTINGS),
+        setSmtpServer(MOCK_SMTP_SERVER_SETTINGS),
       ];
 
       dispatch(fetchSMTPServerSettings()).then(() => {
@@ -127,7 +137,6 @@ describe('state/email-config/actions', () => {
       setupMockResponseFromParams(putSMTPServerSettings);
 
       const expectedActions = [
-        initialize('emailConfig', MOCK_SMTP_SERVER_SETTINGS),
         { type: ADD_TOAST, payload: { message: { id: 'emailConfig.saveSuccessful' }, type: TOAST_SUCCESS } },
       ];
 
@@ -301,7 +310,7 @@ describe('state/email-config/actions', () => {
       setupMockResponse(getEmailSender, MOCK_EMAIL_SENDER);
 
       const expectedActions = [
-        initialize('emailSender', MOCK_EMAIL_SENDER),
+        { type: SET_SELECTED_SENDER, payload: MOCK_EMAIL_SENDER },
       ];
 
       dispatch(fetchEmailSender(MOCK_EMAIL_SENDER.code)).then(() => {
diff --git a/test/state/email-config/reducer.test.js b/test/state/email-config/reducer.test.js
index aedbe5770..617c83250 100644
--- a/test/state/email-config/reducer.test.js
+++ b/test/state/email-config/reducer.test.js
@@ -1,10 +1,12 @@
-import reducer from 'state/email-config/reducer';
-import { SET_EMAIL_SENDERS, REMOVE_EMAIL_SENDER } from 'state/email-config/types';
-import { MOCK_EMAIL_SENDER_LIST } from '../../test/mocks/emailConfig';
+import reducer, { initialState as smtpInitialState } from 'state/email-config/reducer';
+import { SET_EMAIL_SENDERS, REMOVE_EMAIL_SENDER, SET_SMTP_SERVER, SET_SELECTED_SENDER } from 'state/email-config/types';
+import { MOCK_EMAIL_SENDER_LIST, MOCK_SMTP_SERVER_SETTINGS } from '../../test/mocks/emailConfig';
 
 describe('state/email-config/reducer', () => {
   const initialState = {
     senders: [],
+    smtpServer: { ...smtpInitialState },
+    selectedSender: {},
   };
 
   it('should return the initial state as the default returned object', () => {
@@ -34,4 +36,24 @@ describe('state/email-config/reducer', () => {
       senders: [MOCK_EMAIL_SENDER_LIST[0]],
     });
   });
+
+  it('should return the correct state when action is SET_SMTP_SERVER', () => {
+    const state = reducer(initialState, {
+      type: SET_SMTP_SERVER, payload: MOCK_SMTP_SERVER_SETTINGS,
+    });
+    expect(state).toEqual({
+      ...initialState,
+      smtpServer: { ...MOCK_SMTP_SERVER_SETTINGS },
+    });
+  });
+  it('should return the correct state when action is SET_SELECTED_SENDER', () => {
+    const state = reducer(initialState, {
+      type: SET_SELECTED_SENDER, payload: MOCK_EMAIL_SENDER_LIST[1],
+    });
+
+    expect(state).toEqual({
+      ...initialState,
+      selectedSender: MOCK_EMAIL_SENDER_LIST[1],
+    });
+  });
 });
diff --git a/test/state/email-config/selectors.test.js b/test/state/email-config/selectors.test.js
new file mode 100644
index 000000000..0644b11c9
--- /dev/null
+++ b/test/state/email-config/selectors.test.js
@@ -0,0 +1,11 @@
+import { getSelectedSender } from 'state/email-config/selectors';
+
+describe('state/email-config/selectors', () => {
+  describe('getSelectedSender', () => {
+    it('should return the correct state value', () => {
+      const result = getSelectedSender({ emailConfig: { selectedSender: { code: 'test' } } });
+
+      expect(result).toEqual({ code: 'test' });
+    });
+  });
+});
diff --git a/test/state/file-browser/actions.test.js b/test/state/file-browser/actions.test.js
index 02f243e14..9d7bb31eb 100644
--- a/test/state/file-browser/actions.test.js
+++ b/test/state/file-browser/actions.test.js
@@ -92,10 +92,9 @@ describe('state/file-browser/actions', () => {
         store.dispatch(fetchFile('file.txt', ['.txt'])).then(() => {
           expect(getFile).toHaveBeenCalled();
           const actions = store.getActions();
-          expect(actions).toHaveLength(3);
+          expect(actions).toHaveLength(2);
           expect(actions[0]).toHaveProperty('type', TOGGLE_LOADING);
-          expect(initialize).toHaveBeenCalledWith('CreateTextFileForm', { content: window.atob('base64') });
-          expect(actions[2]).toHaveProperty('type', TOGGLE_LOADING);
+          expect(actions[1]).toHaveProperty('type', TOGGLE_LOADING);
           done();
         }).catch(done.fail);
       });
diff --git a/test/state/forms/selectors.test.js b/test/state/forms/selectors.test.js
deleted file mode 100644
index 20ce10641..000000000
--- a/test/state/forms/selectors.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-
-import { getPageForm, getPageTemplateForm } from 'state/forms/selectors';
-
-jest.unmock('state/forms/selectors');
-
-describe('state/forms/selectors', () => {
-  it('getPageForm should get the "page" form data', () => {
-    const result = getPageForm({});
-    expect(result.form).toBe('page');
-  });
-
-  it('getPageTemplateForm should get the "pageTemplate" form data', () => {
-    const result = getPageTemplateForm({});
-    expect(result.form).toBe('pageTemplate');
-  });
-});
diff --git a/test/state/fragments/actions.test.js b/test/state/fragments/actions.test.js
index 10e088603..be156977f 100644
--- a/test/state/fragments/actions.test.js
+++ b/test/state/fragments/actions.test.js
@@ -1,7 +1,6 @@
 import { isFSA } from 'flux-standard-action';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { initialize } from 'redux-form';
 import { config } from '@entando/apimanager';
 import { ADD_ERRORS, ADD_TOAST } from '@entando/messages';
 
@@ -11,7 +10,7 @@ import {
   fetchFragment, fetchFragmentDetail, setFragments, fetchFragments,
   fetchPlugins, setPlugins, setSelectedFragment, fetchFragmentSettings,
   updateFragmentSettings, removeFragment, sendDeleteFragment,
-  sendPostFragment, sendPutFragment, setFilters,
+  sendPostFragment, sendPutFragment, setFilters, setFragmentSettings,
 } from 'state/fragments/actions';
 import {
   PLUGINS_OK,
@@ -30,7 +29,7 @@ import {
   putFragment,
 } from 'api/fragments';
 
-import { SET_SELECTED, SET_PLUGINS, SET_FRAGMENTS, SET_FILTERS, REMOVE_FRAGMENT } from 'state/fragments/types';
+import { SET_SELECTED, SET_PLUGINS, SET_FRAGMENTS, SET_FILTERS, REMOVE_FRAGMENT, SET_FRAGMENT_SETTINGS } from 'state/fragments/types';
 import { TOGGLE_LOADING } from 'state/loading/types';
 import { SET_PAGE } from 'state/pagination/types';
 import { CONTINUE_SAVE_TYPE } from 'state/fragments/const';
@@ -80,6 +79,13 @@ describe('state/fragments/actions', () => {
     });
   });
 
+  describe('setFragmentSettings', () => {
+    it('test setFragmentSettings action sets the correct type', () => {
+      action = setFragmentSettings(GET_FRAGMENT_OK);
+      expect(action.payload).toEqual(GET_FRAGMENT_OK);
+    });
+  });
+
   describe('setFilters', () => {
     it('test setFilters action sets the correct type', () => {
       action = setFilters(FILTERS_OK);
@@ -219,9 +225,10 @@ describe('state/fragments/actions', () => {
     });
 
     describe('fetchFragmentSettings', () => {
-      it('if API response is ok, initializes the form with fragmentSettings information', (done) => {
+      it('if API response is ok, sets fragment settings with proper redux action', (done) => {
         store.dispatch(fetchFragmentSettings()).then(() => {
-          expect(initialize).toHaveBeenCalled();
+          const actions = store.getActions();
+          expect(actions[0]).toHaveProperty('type', SET_FRAGMENT_SETTINGS);
           done();
         }).catch(done.fail);
       });
@@ -245,7 +252,6 @@ describe('state/fragments/actions', () => {
       it('action payload contains fragment settings information', (done) => {
         store.dispatch(updateFragmentSettings(FRAGMENT_SETTINGS)).then(() => {
           const actions = store.getActions();
-          expect(initialize).toHaveBeenCalled();
           expect(actions).toHaveLength(2);
           expect(actions[0]).toHaveProperty('payload', FRAGMENT_SETTINGS);
           expect(actions[1]).toHaveProperty('type', ADD_TOAST);
@@ -253,9 +259,10 @@ describe('state/fragments/actions', () => {
         }).catch(done.fail);
       });
 
-      it('if API response ok, initializes the form with reponse data information', (done) => {
+      it('if API response ok, sets fragment settings with proper redux action', (done) => {
         store.dispatch(updateFragmentSettings(FRAGMENT_SETTINGS)).then(() => {
-          expect(initialize).toHaveBeenCalledWith('fragmentSettings', FRAGMENT_SETTINGS);
+          const actions = store.getActions();
+          expect(actions[0]).toHaveProperty('payload', FRAGMENT_SETTINGS);
           done();
         }).catch(done.fail);
       });
diff --git a/test/state/fragments/reducer.test.js b/test/state/fragments/reducer.test.js
index d80a320f6..fc9e7249a 100644
--- a/test/state/fragments/reducer.test.js
+++ b/test/state/fragments/reducer.test.js
@@ -5,6 +5,7 @@ import {
   setPlugins,
   removeFragment,
   setFilters,
+  setFragmentSettings,
 } from 'state/fragments/actions';
 import {
   GET_FRAGMENT_OK,
@@ -58,6 +59,19 @@ describe('fragments/reducer', () => {
     });
   });
 
+  describe('after action SET_FRAGMENT_SETTINGS', () => {
+    let newState;
+    const FRAGMENT_SETTINGS = {
+      enableEditingWhenEmptyDefaultGui: true,
+    };
+    beforeEach(() => {
+      newState = reducer(state, setFragmentSettings(FRAGMENT_SETTINGS));
+    });
+    it('should define the settings payload', () => {
+      expect(newState.settings).toEqual(FRAGMENT_SETTINGS);
+    });
+  });
+
   describe('after action SET_FILTERS', () => {
     let newState;
     beforeEach(() => {
diff --git a/test/state/fragments/selectors.test.js b/test/state/fragments/selectors.test.js
index 480d095b1..c1736a67b 100644
--- a/test/state/fragments/selectors.test.js
+++ b/test/state/fragments/selectors.test.js
@@ -4,7 +4,7 @@ import { getListWidget } from 'state/widgets/selectors';
 
 import {
   getFragments, getWidgetTypes, getPlugins, getFragmentSelected,
-  getWidgetTypesOptions, getPluginsOptions, getFragmentList, getFilters,
+  getWidgetTypesOptions, getPluginsOptions, getFragmentList, getFilters, getFragmentSettings,
 } from 'state/fragments/selectors';
 
 jest.mock('state/locale/selectors', () => ({ getLocale: () => ('en') }));
@@ -24,6 +24,7 @@ const MOCK_STATE = {
     selected: FRAGMENT_PAYLOAD,
     plugins: PLUGINS_PAYLOAD,
     filters: FILTERS_OK,
+    settings: { enableEditingWhenEmptyDefaultGui: false },
   },
 };
 
@@ -56,6 +57,9 @@ describe('state/fragments/selectors', () => {
   it('verify getFragmentList selector', () => {
     expect(getFragmentList(MOCK_STATE)).toEqual(list);
   });
+  it('verify getFragmentSettings selector', () => {
+    expect(getFragmentSettings(MOCK_STATE)).toEqual(MOCK_STATE.fragments.settings);
+  });
   it('getWidgetTypes(state) returns the widgetTypes list', () => {
     const selected = getWidgetTypes(MOCK_STATE);
     expect(selected).toBe(MOCK_STATE.fragments.widgetTypes);
diff --git a/test/state/labels/actions.test.js b/test/state/labels/actions.test.js
index 967a7ae1d..6841e9bd5 100644
--- a/test/state/labels/actions.test.js
+++ b/test/state/labels/actions.test.js
@@ -5,9 +5,9 @@ import { ADD_ERRORS } from '@entando/messages';
 
 import {
   setLabels, updateLabelSync, fetchLabels, updateLabel, createLabel,
-  removeLabelSync, removeLabel, fetchLabel, setLabelFilters,
+  removeLabelSync, removeLabel, fetchLabel, setLabelFilters, setSearchTerm,
 } from 'state/labels/actions';
-import { SET_LABELS, UPDATE_LABEL, REMOVE_LABEL, SET_LABEL_FILTERS } from 'state/labels/types';
+import { SET_LABELS, UPDATE_LABEL, REMOVE_LABEL, SET_LABEL_FILTERS, SET_SELECTED_LABEL, SET_SEARCH_TERM } from 'state/labels/types';
 import { getLabelsMap } from 'state/labels/selectors';
 import { SET_PAGE } from 'state/pagination/types';
 import { TOGGLE_LOADING } from 'state/loading/types';
@@ -73,6 +73,14 @@ jest.mock('state/labels/selectors', () => ({
 describe('state/labels/actions', () => {
   beforeEach(jest.clearAllMocks);
 
+  describe('setSearchTerm', () => {
+    it('test setGroups action sets the correct type', () => {
+      const action = setSearchTerm('term');
+      expect(action).toHaveProperty('type', SET_SEARCH_TERM);
+      expect(action).toHaveProperty('payload', { searchTerm: 'term' });
+    });
+  });
+
   describe('setLabels', () => {
     let action;
     beforeEach(() => {
@@ -308,9 +316,8 @@ describe('state/labels/actions', () => {
       store.dispatch(fetchLabel(HELLO_LABEL.key)).then(() => {
         expect(getLabel).toHaveBeenCalled();
         const actions = store.getActions();
-        expect(actions[0]).toHaveProperty('type', '@@redux-form/INITIALIZE');
+        expect(actions[0]).toHaveProperty('type', SET_SELECTED_LABEL);
         expect(actions[0]).toHaveProperty('payload', HELLO_LABEL);
-        expect(actions[0]).toHaveProperty('meta', { form: 'label' });
         done();
       }).catch(done.fail);
     });
diff --git a/test/state/labels/reducer.test.js b/test/state/labels/reducer.test.js
index 7b0d264dc..cb0a182b3 100644
--- a/test/state/labels/reducer.test.js
+++ b/test/state/labels/reducer.test.js
@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash';
 import reducer from 'state/labels/reducer';
-import { setLabels, updateLabelSync, removeLabelSync, setLabelFilters } from 'state/labels/actions';
+import { setLabels, updateLabelSync, removeLabelSync, setLabelFilters, setSelectedLabel, setSearchTerm } from 'state/labels/actions';
 import { LABELS_LIST } from 'test/mocks/labels';
 
 
@@ -42,6 +42,25 @@ describe('state/languages/reducer', () => {
     });
   });
 
+  describe('after action SET_SELECTED_LABEL', () => {
+    it('should successfully set selected label', () => {
+      const label = { key: 'MOMO' };
+      const state = reducer(INITIAL_STATE, setSelectedLabel(label));
+      expect(state.selected).toBe(label);
+    });
+  });
+
+  describe('after action SET_SEARCH_TERM', () => {
+    let newState;
+    beforeEach(() => {
+      newState = reducer(INITIAL_STATE, setSearchTerm('term'));
+    });
+
+    it('should populate the searchTerm', () => {
+      expect(newState.searchTerm).toBe('term');
+    });
+  });
+
   describe('after action UPDATE_LABEL', () => {
     const STATE_WITH_LIST = reducer(INITIAL_STATE, setLabels(LABELS_LIST));
 
diff --git a/test/state/labels/selectors.test.js b/test/state/labels/selectors.test.js
index b3b7f6882..9bef926e5 100644
--- a/test/state/labels/selectors.test.js
+++ b/test/state/labels/selectors.test.js
@@ -1,5 +1,5 @@
 
-import { getLabels, getLabelsIdList, getLabelsList, getLabelsMap, getLabelFilters } from 'state/labels/selectors';
+import { getLabels, getLabelsIdList, getLabelsList, getLabelsMap, getLabelFilters, getSelectedLabel, getSearchTerm } from 'state/labels/selectors';
 
 
 const LABELS_MAP = {
@@ -22,11 +22,14 @@ const LABELS_LIST = [
   'HELLO',
   'GOODBYE',
 ];
+const SEARCH_TERM = 'term';
 const STATE = {
   labels: {
     map: LABELS_MAP,
     list: LABELS_LIST,
     filters: { keyword: 'testkey' },
+    selected: LABELS_MAP.HELLO,
+    searchTerm: SEARCH_TERM,
   },
 };
 
@@ -36,6 +39,14 @@ describe('state/labels/selectors', () => {
     expect(getLabels(STATE)).toEqual(STATE.labels);
   });
 
+  it('getSelectedLabel returns the selected label', () => {
+    expect(getSelectedLabel(STATE)).toEqual(STATE.labels.selected);
+  });
+
+  it('getSearchTerm returns the search term value', () => {
+    expect(getSearchTerm(STATE)).toEqual(SEARCH_TERM);
+  });
+
   it('getLabelsIdList returns the labels id list', () => {
     expect(getLabelsIdList(STATE)).toEqual(STATE.labels.list);
   });
diff --git a/test/state/page-config/actions.test.js b/test/state/page-config/actions.test.js
index 079d8f111..a60308efc 100644
--- a/test/state/page-config/actions.test.js
+++ b/test/state/page-config/actions.test.js
@@ -1,6 +1,5 @@
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { initialize } from 'redux-form';
 import { ADD_ERRORS, ADD_TOAST } from '@entando/messages';
 
 import { mockApi } from 'test/testUtils';
@@ -547,13 +546,6 @@ describe('state/page-config/actions', () => {
       expect(makeGetSelectedPageConfig).toHaveBeenCalled();
       expect(store.getActions()).toHaveLength(0);
     });
-
-    it('if there is selected page config and the frame has config, dispatch initialize', () => {
-      store.dispatch(editWidgetConfig(1, CURRENT_PAGE_CODE));
-      expect(initialize).toHaveBeenCalled();
-      expect(getWidgetsMap).toHaveBeenCalled();
-      expect(store.getActions()).toHaveLength(1);
-    });
   });
 
   describe('configOrUpdatePageWidget()', () => {
diff --git a/test/state/page-templates/selectors.test.js b/test/state/page-templates/selectors.test.js
index 1c7b06e44..ccf32219d 100644
--- a/test/state/page-templates/selectors.test.js
+++ b/test/state/page-templates/selectors.test.js
@@ -170,60 +170,53 @@ describe('state/page-templates/selectors', () => {
     });
   });
 
-  describe('getFormPageTemplate', () => {
-    it('if there is no page template form data, returns null', () => {
-      getPageTemplateForm.mockReturnValue(null);
-      expect(getFormPageTemplate({})).toEqual(null);
-    });
-
-    it('if configuration is not a valid json, returns a default configuration', () => {
-      getPageTemplateForm.mockReturnValue({
-        code: 'page_model',
-        configuration: 'definitely not a valid json',
-      });
-      expect(getFormPageTemplate({})).toEqual({
-        code: 'page_model',
-        configuration: { frames: [] },
-      });
-    });
-
-    it('if configuration is a valid json, returns the parsed configuration', () => {
-      getPageTemplateForm.mockReturnValue({
-        code: 'page_model',
-        configuration: '{ "frames": [{ "pos": 0 }] }',
-      });
-      expect(getFormPageTemplate({})).toEqual({
-        code: 'page_model',
-        configuration: { frames: [{ pos: 0 }] },
-      });
-    });
-  });
-
-  describe('getPageTemplateFormCellMap', () => {
-    it('returns a cell map from the form page template', () => {
-      getPageTemplateForm.mockReturnValue(toFormData(SINGLE_CELL_PAYLOAD));
-      expect(getPageTemplateFormCellMap({})).toEqual(SINGLE_CELL_CELL_MAP);
-    });
-  });
-
-  describe('getPageTemplateFormErrors', () => {
-    it('if there are no errors, returns an empty array', () => {
-      getPageTemplateForm.mockReturnValue(toFormData(SINGLE_CELL_PAYLOAD));
-      expect(getPageTemplateFormErrors({})).toEqual([]);
-    });
-
-    it('if there are errors, returns the page template errors', () => {
-      getPageTemplateForm.mockReturnValue(toFormData(OVERLAPPING_FRAMES_PAYLOAD));
-      expect(getPageTemplateFormErrors({})).toHaveLength(1);
-    });
-  });
-
-  describe('getPageTemplateFormCellMap', () => {
-    it('returns a cell map from the form page template', () => {
-      getPageTemplateForm.mockReturnValue(toFormData(SINGLE_CELL_PAYLOAD));
-      expect(getPageTemplateFormCellMap({})).toEqual(SINGLE_CELL_CELL_MAP);
-    });
-  });
+  // describe('getFormPageTemplate', () => {
+  //   it('if there is no page template form data, returns null', () => {
+  //     getPageTemplateForm.mockReturnValue(null);
+  //     expect(getFormPageTemplate({})).toEqual(null);
+  //   });
+
+  //   it('if configuration is not a valid json, returns a default configuration', () => {
+  //     getPageTemplateForm.mockReturnValue({
+  //       code: 'page_model',
+  //       configuration: 'definitely not a valid json',
+  //     });
+  //     expect(getFormPageTemplate({})).toEqual({
+  //       code: 'page_model',
+  //       configuration: { frames: [] },
+  //     });
+  //   });
+
+  //   it('if configuration is a valid json, returns the parsed configuration', () => {
+  //     getPageTemplateForm.mockReturnValue({
+  //       code: 'page_model',
+  //       configuration: '{ "frames": [{ "pos": 0 }] }',
+  //     });
+  //     expect(getFormPageTemplate({})).toEqual({
+  //       code: 'page_model',
+  //       configuration: { frames: [{ pos: 0 }] },
+  //     });
+  //   });
+  // });
+
+  // describe('getPageTemplateFormCellMap', () => {
+  //   it('returns a cell map from the form page template', () => {
+  //     getPageTemplateForm.mockReturnValue(toFormData(SINGLE_CELL_PAYLOAD));
+  //     expect(getPageTemplateFormCellMap({})).toEqual(SINGLE_CELL_CELL_MAP);
+  //   });
+  // });
+
+  // describe('getPageTemplateFormErrors', () => {
+  //   it('if there are no errors, returns an empty array', () => {
+  //     getPageTemplateForm.mockReturnValue(toFormData(SINGLE_CELL_PAYLOAD));
+  //     expect(getPageTemplateFormErrors({})).toEqual([]);
+  //   });
+
+  //   it('if there are errors, returns the page template errors', () => {
+  //     getPageTemplateForm.mockReturnValue(toFormData(OVERLAPPING_FRAMES_PAYLOAD));
+  //     expect(getPageTemplateFormErrors({})).toHaveLength(1);
+  //   });
+  // });
 
   describe('getSelectedPageTemplatePageRefs', () => {
     it('returns the selected page template pageReferences', () => {
diff --git a/test/state/pages/actions.test.js b/test/state/pages/actions.test.js
index 48ffdb091..48018bc8d 100644
--- a/test/state/pages/actions.test.js
+++ b/test/state/pages/actions.test.js
@@ -15,13 +15,14 @@ import {
   unpublishSelectedPage, loadSelectedPage, removePage, sendDeletePage, clearSearchPage, clearSearch,
   setReferenceSelectedPage, clonePage, clearTree, sendPutPageSettings, sendPatchPage,
   fetchPageTreeAll, setBatchExpanded, fetchDashboardPages, setVirtualRoot, fetchIfPageExists,
+  setEditPage,
 } from 'state/pages/actions';
 
 import {
   ADD_PAGES, SET_PAGE_LOADING, SET_PAGE_LOADED, SET_PAGE_EXPANDED, MOVE_PAGE, SET_PAGE_PARENT,
   SET_FREE_PAGES, SET_SELECTED_PAGE, REMOVE_PAGE, UPDATE_PAGE, CLEAR_SEARCH, SEARCH_PAGES,
   SET_REFERENCES_SELECTED_PAGE, CLEAR_TREE, BATCH_TOGGLE_EXPANDED, SET_DASHBOARD_PAGES,
-  SET_VIRTUAL_ROOT,
+  SET_VIRTUAL_ROOT, SET_EDIT_PAGE,
 } from 'state/pages/types';
 
 import { SET_PUBLISHED_PAGE_CONFIG } from 'state/page-config/types';
@@ -190,6 +191,12 @@ describe('state/pages/actions', () => {
   });
 
 
+  it('setEditPage() should return a well formed action', () => {
+    const action = setEditPage(HOMEPAGE_PAYLOAD);
+    expect(action.type).toBe(SET_EDIT_PAGE);
+    expect(action.payload).toEqual(HOMEPAGE_PAYLOAD);
+  });
+
   it('setPageLoading() should return a well formed action', () => {
     const action = setPageLoading(PAGE_CODE);
     expect(action.type).toBe(SET_PAGE_LOADING);
@@ -438,7 +445,7 @@ describe('state/pages/actions', () => {
 
     it('when postPage fails, should dispatch ADD_ERRORS', (done) => {
       postPageSEO.mockImplementation(mockApi({ errors: true }));
-      store.dispatch(sendPostPage(CONTACTS_PAYLOAD)).then(() => {
+      store.dispatch(sendPostPage(CONTACTS_PAYLOAD)).then(done.fail).catch(() => {
         const addErrorsAction = store.getActions().find(action => action.type === ADD_ERRORS);
         expect(postPageSEO).toHaveBeenCalledWith({
           ...CONTACTS_PAYLOAD,
@@ -446,7 +453,7 @@ describe('state/pages/actions', () => {
         });
         expect(addErrorsAction).toBeDefined();
         done();
-      }).catch(done.fail);
+      });
     });
   });
 
@@ -460,10 +467,9 @@ describe('state/pages/actions', () => {
       putPageSEO.mockImplementation(mockApi({ payload: CONTACTS_PAYLOAD }));
       store.dispatch(sendPutPage(CONTACTS_PAYLOAD)).then(() => {
         const actions = store.getActions();
-        expect(actions).toHaveLength(3);
+        expect(actions).toHaveLength(2);
         expect(actions[0]).toHaveProperty('type', ADD_TOAST);
         expect(actions[1]).toHaveProperty('type', UPDATE_PAGE);
-        expect(initialize).toHaveBeenCalledWith('pageEdit', CONTACTS_PAYLOAD);
         expect(putPageSEO).toHaveBeenCalledWith({
           ...CONTACTS_PAYLOAD,
           seoData: { ...CONTACTS_PAYLOAD.seoData, useExtraTitles: CONTACTS_PAYLOAD.seo },
@@ -573,11 +579,13 @@ describe('state/pages/actions', () => {
       store = mockStore(INITIALIZED_STATE);
     });
 
-    it('when getPage succeeds, should dispatch redux-form initialize', (done) => {
+    it('when getPage succeeds, should dispatch SET_EDIT_PAGE', (done) => {
       getPageSEO.mockImplementation(mockApi({ payload: CONTACTS_PAYLOAD }));
       store.dispatch(fetchPageForm(CONTACTS_PAYLOAD.code)).then(() => {
+        const actions = store.getActions();
         expect(getPageSEO).toHaveBeenCalledWith(CONTACTS_PAYLOAD.code);
-        expect(initialize).toHaveBeenCalledWith('pageEdit', CONTACTS_PAYLOAD);
+        expect(actions).toHaveLength(1);
+        expect(actions[0]).toHaveProperty('type', SET_EDIT_PAGE);
         done();
       }).catch(done.fail);
     });
@@ -603,7 +611,6 @@ describe('state/pages/actions', () => {
       getPageSettings.mockImplementation(mockApi({ payload: { a: 'b' } }));
       store.dispatch(fetchPageSettings()).then(() => {
         expect(getPageSettings).toHaveBeenCalled();
-        expect(initialize).toHaveBeenCalledWith('settings', { a: 'b' });
         done();
       }).catch(done.fail);
     });
@@ -827,9 +834,8 @@ describe('clearSearchPage', () => {
   it('calls action clearSearch and initialize form search ', () => {
     store.dispatch(clearSearchPage());
     const actions = store.getActions();
-    expect(actions).toHaveLength(2);
+    expect(actions).toHaveLength(1);
     expect(actions[0]).toHaveProperty('type', CLEAR_SEARCH);
-    expect(initialize).toHaveBeenCalled();
   });
 });
 
@@ -875,9 +881,8 @@ describe('clonePage', () => {
   it('when clonePage succeeds, should call router PAGE_ADD and initialize FORM', (done) => {
     store.dispatch(clonePage('page')).then(() => {
       const actions = store.getActions();
-      expect(actions).toHaveLength(1);
+      expect(actions).toHaveLength(0);
       expect(history.push).toHaveBeenCalledWith(`${ROUTE_PAGE_CLONE}?pageCode=undefined`);
-      expect(initialize).toHaveBeenCalled();
       done();
     }).catch(done.fail);
   });
diff --git a/test/state/pages/reducer.test.js b/test/state/pages/reducer.test.js
index ea6487686..d70674e30 100644
--- a/test/state/pages/reducer.test.js
+++ b/test/state/pages/reducer.test.js
@@ -9,7 +9,7 @@ import {
   addPages, setPageParentSync, movePageSync, setPageExpanded, setPageLoading, setPageLoaded,
   setFreePages, setSelectedPage, removePage, updatePage, setSearchPages, clearSearch,
   setReferenceSelectedPage, clearTree, collapseAll, setBatchExpanded, setDashboardPages,
-  setVirtualRoot,
+  setVirtualRoot, setEditPage,
 } from 'state/pages/actions';
 
 import { HOMEPAGE_CODE } from 'state/pages/const';
@@ -202,6 +202,16 @@ describe('state/pages/reducer', () => {
     });
   });
 
+  describe('after action SET_EDIT_PAGE', () => {
+    let state;
+    beforeEach(() => {
+      state = reducer({}, setEditPage(FREE_PAGES_PAYLOAD[0]));
+    });
+    it('state should be valued with an array of options', () => {
+      expect(state.editPage).toEqual(FREE_PAGES_PAYLOAD[0]);
+    });
+  });
+
   describe('after action SET_SELECTED_PAGE', () => {
     it('state should be valued with an object information from selected page', () => {
       const state = reducer({}, setSelectedPage(HOMEPAGE_PAYLOAD));
diff --git a/test/state/pages/selectors.test.js b/test/state/pages/selectors.test.js
index 4a5d77951..d7194320c 100644
--- a/test/state/pages/selectors.test.js
+++ b/test/state/pages/selectors.test.js
@@ -9,6 +9,7 @@ import {
   getPageTreePages, getCharsets, getContentTypes, getFreePages, getReferencesFromSelectedPage,
   getSelectedPagePreviewURI, getSelectedPageLocaleTitle, getSelectedPublishedPageURI,
   getIsVirtualRootOn,
+  getEditPage,
 } from 'state/pages/selectors';
 import { PREVIEW_NAMESPACE } from 'ui/pages/config/const';
 
@@ -58,6 +59,7 @@ const MOCK_STATE = {
     freePages: [],
     selected: { ...HOMEPAGE_PAYLOAD, references: { jacmsContentManager: true } },
     virtualRoot: true,
+    editPage: HOMEPAGE_PAYLOAD,
   },
 };
 
@@ -76,6 +78,10 @@ describe('state/pages/selectors', () => {
     const selected = getPages(MOCK_STATE);
     expect(selected).toBe(MOCK_STATE.pages);
   });
+  it('getEditPage(state) returns the pages object', () => {
+    const selected = getEditPage(MOCK_STATE);
+    expect(selected).toBe(MOCK_STATE.pages.editPage);
+  });
   it('getPagesMap(state) returns the pages map', () => {
     const selected = getPagesMap(MOCK_STATE);
     expect(selected).toBe(MOCK_STATE.pages.map);
diff --git a/test/state/profile-types/actions.test.js b/test/state/profile-types/actions.test.js
index e26817bc6..982266bc0 100644
--- a/test/state/profile-types/actions.test.js
+++ b/test/state/profile-types/actions.test.js
@@ -327,7 +327,7 @@ describe('state/profile-types/actions ', () => {
         getProfileType.mockImplementationOnce(mockApi({ payload: PROFILE_TYPES }));
         store.dispatch(fetchProfileType('AAA')).then(() => {
           const actions = store.getActions();
-          expect(actions).toHaveLength(2);
+          expect(actions).toHaveLength(1);
           expect(actions[0]).toHaveProperty('type', SET_SELECTED_PROFILE_TYPE);
           expect(actions[0]).toHaveProperty('payload');
           expect(actions[0].payload).toMatchObject({ profileType: PROFILE_TYPES });
@@ -392,9 +392,8 @@ describe('state/profile-types/actions ', () => {
         store.dispatch(fetchAttributeFromProfileType('attribute', 'AAA', 'Date')).then(() => {
           expect(getAttributeFromProfileType).toHaveBeenCalled();
           const actions = store.getActions();
-          expect(actions).toHaveLength(2);
-          expect(actions[0]).toHaveProperty('type', '@@redux-form/INITIALIZE');
-          expect(actions[1]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_PROFILETYPE);
+          expect(actions).toHaveLength(1);
+          expect(actions[0]).toHaveProperty('type', SET_SELECTED_ATTRIBUTE_FOR_PROFILETYPE);
           done();
         }).catch(done.fail);
       });
diff --git a/test/state/user-profile/actions.test.js b/test/state/user-profile/actions.test.js
index a6d23e06b..2195dcab3 100644
--- a/test/state/user-profile/actions.test.js
+++ b/test/state/user-profile/actions.test.js
@@ -66,11 +66,9 @@ describe('fetchUserProfile', () => {
       expect(getUserProfile).toHaveBeenCalledWith(USER_NAME);
 
       const actions = store.getActions();
-      expect(actions).toHaveLength(4);
+      expect(actions).toHaveLength(2);
       expect(actions[0]).toHaveProperty('type', SET_USER_PROFILE);
       expect(actions[1]).toHaveProperty('type', SET_SELECTED_PROFILE_TYPE);
-      expect(actions[2]).toHaveProperty('type', '@@redux-form/INITIALIZE');
-      expect(actions[3]).toHaveProperty('type', '@@redux-form/INITIALIZE');
       done();
     }).catch(done.fail);
   });
diff --git a/test/state/user-settings/actions.test.js b/test/state/user-settings/actions.test.js
index 718536324..73a2e9fb1 100644
--- a/test/state/user-settings/actions.test.js
+++ b/test/state/user-settings/actions.test.js
@@ -50,11 +50,10 @@ describe('state/user-settings/actions', () => {
         store.dispatch(fetchUserSettings()).then(() => {
           const actions = store.getActions();
           expect(getUserSettings).toHaveBeenCalled();
-          expect(actions).toHaveLength(4);
+          expect(actions).toHaveLength(3);
           expect(actions[0]).toHaveProperty('type', TOGGLE_LOADING);
           expect(actions[1]).toHaveProperty('type', SET_USER_SETTINGS);
-          expect(actions[2]).toHaveProperty('type', '@@redux-form/INITIALIZE');
-          expect(actions[3]).toHaveProperty('type', TOGGLE_LOADING);
+          expect(actions[2]).toHaveProperty('type', TOGGLE_LOADING);
           done();
         }).catch(done.fail);
       });
diff --git a/test/state/users/actions.test.js b/test/state/users/actions.test.js
index 619590f93..6b3f21730 100644
--- a/test/state/users/actions.test.js
+++ b/test/state/users/actions.test.js
@@ -9,8 +9,9 @@ import {
   setSelectedUserDetail, fetchCurrentPageUserDetail, setUsersTotal,
   fetchUsersTotal, sendDeleteUser, fetchUserAuthorities, sendPostUserAuthorities,
   sendPutUserAuthorities, sendDeleteUserAuthorities, sendPostMyPassword,
+  setUserSearchTerm,
 } from 'state/users/actions';
-import { SET_USERS, SET_SELECTED_USER, SET_SELECTED_USER_AUTHORITIES, SET_USERS_TOTAL } from 'state/users/types';
+import { SET_USERS, SET_SELECTED_USER, SET_SELECTED_USER_AUTHORITIES, SET_USERS_TOTAL, SET_USER_SEARCH_TERM } from 'state/users/types';
 import { TOGGLE_LOADING } from 'state/loading/types';
 import { SET_PAGE } from 'state/pagination/types';
 import { SET_VISIBLE_MODAL } from 'state/modal/types';
@@ -63,6 +64,14 @@ describe('state/users/actions', () => {
           expect(action).toHaveProperty('payload.usersTotal', 12);
         });
       });
+
+      describe('setUserSearchTerm', () => {
+        it('test setUserSearchTerm action sets the correct type', () => {
+          const action = setUserSearchTerm('test');
+          expect(action).toHaveProperty('type', SET_USER_SEARCH_TERM);
+          expect(action).toHaveProperty('payload', 'test');
+        });
+      });
     });
 
     describe('thunk', () => {
@@ -248,8 +257,7 @@ describe('state/users/actions', () => {
           const actions = store.getActions();
           expect(actions[0]).toHaveProperty('type', TOGGLE_LOADING);
           expect(actions[1]).toHaveProperty('type', SET_SELECTED_USER_AUTHORITIES);
-          expect(actions[2]).toHaveProperty('type', '@@redux-form/INITIALIZE');
-          expect(actions[3]).toHaveProperty('type', TOGGLE_LOADING);
+          expect(actions[2]).toHaveProperty('type', TOGGLE_LOADING);
           done();
         }).catch(done.fail);
       });
@@ -354,11 +362,10 @@ describe('state/users/actions', () => {
         store.dispatch(sendPostMyPassword({})).then(() => {
           expect(postMyPassword).toHaveBeenCalledWith({});
           const actions = store.getActions();
-          expect(actions).toHaveLength(4);
+          expect(actions).toHaveLength(3);
           expect(actions[0]).toHaveProperty('type', ADD_TOAST);
           expect(actions[1]).toHaveProperty('type', CLEAR_ERRORS);
-          expect(actions[2]).toHaveProperty('type', '@@redux-form/RESET');
-          expect(actions[3]).toHaveProperty('type', SET_VISIBLE_MODAL);
+          expect(actions[2]).toHaveProperty('type', SET_VISIBLE_MODAL);
           done();
         }).catch(done.fail);
       });
diff --git a/test/state/users/reducer.test.js b/test/state/users/reducer.test.js
index 67eab722a..db15e2e28 100644
--- a/test/state/users/reducer.test.js
+++ b/test/state/users/reducer.test.js
@@ -1,5 +1,5 @@
 import reducer from 'state/users/reducer';
-import { setUsers, setSelectedUserDetail, setSelectedUserAuthorities, setUsersTotal } from 'state/users/actions';
+import { setUsers, setSelectedUserDetail, setSelectedUserAuthorities, setUsersTotal, setUserSearchTerm } from 'state/users/actions';
 import { USERS, AUTHORITIES } from 'test/mocks/users';
 
 const users = USERS;
@@ -40,6 +40,17 @@ describe('state/users/reducer', () => {
     });
   });
 
+  describe('after action SET_USER_SEARCH_TERM', () => {
+    let newState;
+    beforeEach(() => {
+      newState = reducer(state, setUserSearchTerm('test'));
+    });
+
+    it('should define the dataType payload', () => {
+      expect(newState.searchTerm).toEqual('test');
+    });
+  });
+
   describe('after action SET_SELECTED_USERS_AUTHORITIES', () => {
     let newState;
     beforeEach(() => {
diff --git a/test/state/users/selectors.test.js b/test/state/users/selectors.test.js
index 86ed29044..babb6af85 100644
--- a/test/state/users/selectors.test.js
+++ b/test/state/users/selectors.test.js
@@ -6,6 +6,7 @@ import {
   getUsersMap,
   getUserList,
   getUsersTotal,
+  getUserSearchTerm,
 } from 'state/users/selectors';
 
 jest.mock('state/locale/selectors', () => ({ getLocale: () => ('en') }));
@@ -14,6 +15,7 @@ const TEST_STATE = {
   users: {
     ...USERS_NORMALIZED,
     total: 2,
+    searchTerm: 'test',
   },
 };
 
@@ -39,4 +41,8 @@ describe('state/users/selectors', () => {
   it('verify getTotalUsers selector', () => {
     expect(getUsersTotal(TEST_STATE)).toEqual(2);
   });
+
+  it('verify getUserSearchTerm selector', () => {
+    expect(getUserSearchTerm(TEST_STATE)).toEqual('test');
+  });
 });
diff --git a/test/state/widgets/actions.test.js b/test/state/widgets/actions.test.js
index fb66b2ca3..06e0e6d30 100644
--- a/test/state/widgets/actions.test.js
+++ b/test/state/widgets/actions.test.js
@@ -1,7 +1,6 @@
 import { isFSA } from 'flux-standard-action';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { initialize } from 'redux-form';
 import { ADD_TOAST, ADD_ERRORS } from '@entando/messages';
 
 import { mockApi } from 'test/testUtils';
@@ -27,7 +26,6 @@ import {
   removeWidget,
   setWidgetInfo,
   fetchWidgetInfo,
-  FREE_ACCESS_GROUP_VALUE,
   sendGetNavigatorNavspecFromExpressions,
   sendGetNavigatorExpressionsFromNavspec,
   uploadIcon,
@@ -196,44 +194,20 @@ describe('state/widgets/actions', () => {
     });
 
     describe('fetchWidget', () => {
-      it('if API response is ok, initializes the form with widget information', (done) => {
+      it('if API response is ok, set widget information in redux', (done) => {
         getWidget.mockImplementationOnce(mockApi({ payload: WIDGET }));
         store.dispatch(fetchWidget()).then(() => {
           const actions = store.getActions();
-          expect(actions).toHaveLength(3);
-          expect(initialize).toHaveBeenCalled();
-          const initializeAction = actions[1];
-          expect(initializeAction).toHaveProperty('type', '@@redux-form/INITIALIZE');
-          expect(initializeAction).toHaveProperty('payload');
-          expect(initializeAction.payload).toEqual({
-            code: WIDGET.code,
-            titles: WIDGET.titles,
-            group: WIDGET.group,
-            configUi: '',
-            customUi: WIDGET.guiFragments[0].customUi,
-            icon: WIDGET.icon,
-          });
+          expect(actions).toHaveLength(2);
           done();
         }).catch(done.fail);
       });
 
-      it('if API response is ok but widget group value is null, initializes the form with widget information and - free - as group value', (done) => {
+      it('if API response is ok but widget group value is null, set with widget information and - free - as group value into state', (done) => {
         getWidget.mockImplementationOnce(mockApi({ payload: WIDGET_NULL_GROUP }));
         store.dispatch(fetchWidget()).then(() => {
           const actions = store.getActions();
-          expect(actions).toHaveLength(3);
-          expect(initialize).toHaveBeenCalled();
-          const initializeAction = actions[1];
-          expect(initializeAction).toHaveProperty('type', '@@redux-form/INITIALIZE');
-          expect(initializeAction).toHaveProperty('payload');
-          expect(initializeAction.payload).toEqual({
-            code: WIDGET_NULL_GROUP.code,
-            titles: WIDGET_NULL_GROUP.titles,
-            group: FREE_ACCESS_GROUP_VALUE,
-            configUi: '',
-            customUi: WIDGET_NULL_GROUP.guiFragments[0].customUi,
-            icon: WIDGET.icon,
-          });
+          expect(actions).toHaveLength(2);
           done();
         }).catch(done.fail);
       });
@@ -242,8 +216,8 @@ describe('state/widgets/actions', () => {
         getWidget.mockImplementationOnce(mockApi({ payload: WIDGET }));
         store.dispatch(fetchWidget()).then(() => {
           const actions = store.getActions();
-          expect(actions).toHaveLength(3);
-          const selectWidgetAction = actions[2];
+          expect(actions).toHaveLength(2);
+          const selectWidgetAction = actions[1];
           expect(selectWidgetAction).toHaveProperty('type', SET_SELECTED_WIDGET);
           expect(selectWidgetAction).toHaveProperty('payload');
           expect(selectWidgetAction.payload).toMatchObject({ widget: WIDGET });
diff --git a/test/ui/app/App.test.js b/test/ui/app/App.test.js
index fab52594c..c21af793e 100644
--- a/test/ui/app/App.test.js
+++ b/test/ui/app/App.test.js
@@ -59,7 +59,6 @@ import EditProfileTypeAttributePage from 'ui/profile-types/attributes/EditProfil
 import ReloadConfigPage from 'ui/reload-configuration/ReloadConfigPage';
 import ReloadConfirmPage from 'ui/reload-configuration/ReloadConfirmPage';
 import MonolistProfilePageContainer from 'ui/profile-types/attributes/monolist/MonolistProfilePageContainer';
-import MonolistPageContainer from 'ui/data-types/attributes/monolist/MonolistPageContainer';
 import DetailWidgetPageContainer from 'ui/widgets/detail/DetailWidgetPageContainer';
 import CloneWidgetPage from 'ui/widgets/clone/CloneWidgetPage';
 import CloneFragmentPageContainer from 'ui/fragments/clone/CloneFragmentPageContainer';
@@ -116,7 +115,6 @@ import {
   ROUTE_RELOAD_CONFIG,
   ROUTE_RELOAD_CONFIRM,
   ROUTE_ATTRIBUTE_MONOLIST_PROFILE_ADD,
-  ROUTE_ATTRIBUTE_MONOLIST_ADD,
   ROUTE_WIDGET_DETAIL,
   ROUTE_CLONE_WIDGET,
   ROUTE_FRAGMENT_CLONE,
@@ -492,13 +490,6 @@ describe('App', () => {
     });
   });
 
-  it('route to profile monolist container page', async () => {
-    await waitFor(async () => {
-      const component = mountWithRoute(ROUTE_ATTRIBUTE_MONOLIST_ADD);
-      expect(component.find(MonolistPageContainer).exists()).toBe(true);
-    });
-  });
-
   it('route to edit profile type attribute page', async () => {
     await waitFor(async () => {
       const component = mountWithRoute(ROUTE_PROFILE_TYPE_ATTRIBUTE_EDIT);
diff --git a/test/ui/common/attributes/AttributeEnumMapSettings.test.js b/test/ui/common/attributes/AttributeEnumMapSettings.test.js
index 2e18021b9..33361b0be 100644
--- a/test/ui/common/attributes/AttributeEnumMapSettings.test.js
+++ b/test/ui/common/attributes/AttributeEnumMapSettings.test.js
@@ -1,12 +1,8 @@
 import React from 'react';
-
-import 'test/enzyme-init';
-import { mount } from 'enzyme';
-import AttributeEnumMapSettings, { elements as elementValidation } from 'ui/common/attributes/AttributeEnumMapSettings';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
-import { required } from '@entando/utils';
-import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
+import AttributeEnumMapSettings from 'ui/common/attributes/AttributeEnumMapSettings';
+import { renderWithIntl } from 'test/testUtils';
+import '@testing-library/jest-dom/extend-expect';
+import { Formik } from 'formik';
 
 const DATA = { code: 'code', descr: 'descr' };
 
@@ -14,40 +10,41 @@ jest.unmock('react-redux');
 
 describe('AttributeEnumMapSettings', () => {
   let component;
+  let container;
   beforeEach(() => {
-    component = mount(mockRenderWithIntlAndStore(<AttributeEnumMapSettings
-      enumeratorMapExtractorBeans={[DATA]}
-    />));
+    component = renderWithIntl(<Formik>
+      <AttributeEnumMapSettings enumeratorMapExtractorBeans={[DATA]} />
+      {/* eslint-disable-next-line react/jsx-indent */}
+                               </Formik>);
+
+    ({ container } = component);
   });
 
   it('renders without crashing', () => {
-    expect(component.exists()).toBe(true);
+    expect(container).toBeTruthy();
   });
 
   it('has one Row', () => {
-    expect(component.find('Row').exists()).toBe(true);
-    expect(component.find('Row')).toHaveLength(1);
+    expect(container.querySelector('.row')).toBeTruthy();
+    expect(container.querySelectorAll('.row')).toHaveLength(1);
   });
 
   it('has a enumeratorStaticItems text field', () => {
-    const element = component.find('Field[name="enumeratorStaticItems"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
-    expect(props).toHaveProperty('validate', [required, elementValidation]);
+    const element = container.querySelector('[name="enumeratorStaticItems"]');
+    expect(element).toBeTruthy();
+    expect(element.className).toContain('RenderTextInput');
   });
 
   it('has a enumeratorMapExtractorBeans select field', () => {
-    const element = component.find('Field[name="enumeratorMapExtractorBeans"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderSelectInput);
+    const element = container.querySelector('[name="enumeratorMapExtractorBeans"]');
+    expect(element).toBeTruthy();
+
+    expect(element.className).toContain('SelectInput');
   });
 
   it('has a enumeratorStaticItemsSeparator text field', () => {
-    const element = component.find('Field[name="enumeratorStaticItemsSeparator"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
+    const element = container.querySelector('[name="enumeratorStaticItemsSeparator"]');
+    expect(element).toBeTruthy();
+    expect(element.className).toContain('RenderTextInput');
   });
 });
diff --git a/test/ui/common/attributes/AttributeEnumSettings.test.js b/test/ui/common/attributes/AttributeEnumSettings.test.js
index 98616492c..49061e624 100644
--- a/test/ui/common/attributes/AttributeEnumSettings.test.js
+++ b/test/ui/common/attributes/AttributeEnumSettings.test.js
@@ -1,49 +1,43 @@
 import React from 'react';
-
-import 'test/enzyme-init';
-import { mount } from 'enzyme';
-import AttributeEnumSettings, { element as elementValidation } from 'ui/common/attributes/AttributeEnumSettings';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import RenderSelectInput from 'ui/common/form/RenderSelectInput';
-import { required } from '@entando/utils';
-import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
+import AttributeEnumSettings from 'ui/common/attributes/AttributeEnumSettings';
+import { renderWithIntl } from 'test/testUtils';
+import '@testing-library/jest-dom/extend-expect';
+import { Formik } from 'formik';
 
 jest.unmock('react-redux');
 
 describe('AttributeEnumSettings', () => {
   let component;
+  let container;
   beforeEach(() => {
-    component = mount(mockRenderWithIntlAndStore(<AttributeEnumSettings />));
+    component = renderWithIntl(<Formik><AttributeEnumSettings /></Formik>);
+    ({ container } = component);
   });
 
   it('renders without crashing', () => {
-    expect(component.exists()).toBe(true);
+    expect(container).toBeTruthy();
   });
 
   it('has one Row', () => {
-    expect(component.find('Row').exists()).toBe(true);
-    expect(component.find('Row')).toHaveLength(1);
+    expect(container.querySelector('.row')).toBeTruthy();
+    expect(container.querySelectorAll('.row')).toHaveLength(1);
   });
 
   it('has a enumeratorStaticItems text field', () => {
-    const element = component.find('Field[name="enumeratorStaticItems"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
-    expect(props).toHaveProperty('validate', [required, elementValidation]);
+    const element = container.querySelector('[name="enumeratorStaticItems"]');
+    expect(element).toBeTruthy();
+    expect(element.className).toContain('RenderTextInput');
   });
 
   it('has a enumeratorExtractorBean select field', () => {
-    const element = component.find('Field[name="enumeratorExtractorBean"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderSelectInput);
+    const element = container.querySelector('[name="enumeratorExtractorBean"]');
+    expect(element).toBeTruthy();
+    expect(element.className).toContain('SelectInput');
   });
 
   it('has a enumeratorStaticItemsSeparator text field', () => {
-    const element = component.find('Field[name="enumeratorStaticItemsSeparator"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
+    const element = container.querySelector('[name="enumeratorStaticItemsSeparator"]');
+    expect(element).toBeTruthy();
+    expect(element.className).toContain('RenderTextInput');
   });
 });
diff --git a/test/ui/component-repository/settings/edit/SettingsEditFormContainer.test.js b/test/ui/component-repository/settings/edit/SettingsEditFormContainer.test.js
index d65fbefbf..dd9f7b464 100644
--- a/test/ui/component-repository/settings/edit/SettingsEditFormContainer.test.js
+++ b/test/ui/component-repository/settings/edit/SettingsEditFormContainer.test.js
@@ -45,7 +45,7 @@ describe('SettingsListContainer', () => {
     it('should dispatch an action if onWillMount is called', () => {
       props.onWillMount(12);
       expect(dispatchMock).toHaveBeenCalled();
-      expect(fetchComponentRepository).toHaveBeenCalledWith(12, true);
+      expect(fetchComponentRepository).toHaveBeenCalledWith(12);
     });
 
     it('should dispatch an action if onSubmit is called', () => {
diff --git a/test/ui/data-types/edit/EditFormContainer.test.js b/test/ui/data-types/edit/EditFormContainer.test.js
deleted file mode 100644
index 40479c1b0..000000000
--- a/test/ui/data-types/edit/EditFormContainer.test.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import 'test/enzyme-init';
-import { formValueSelector } from 'redux-form';
-import { mapStateToProps, mapDispatchToProps } from 'ui/data-types/edit/EditFormContainer';
-import { ROUTE_DATA_TYPE_ATTRIBUTE_EDIT } from 'app-init/router';
-
-formValueSelector.mockReturnValue(() => 'formValueSelector_result');
-
-jest.mock('state/data-types/actions', () => ({
-  fetchDataTypeAttributes: jest.fn().mockReturnValue('fetchDataTypeAttributes_result'),
-  sendPutDataType: jest.fn().mockReturnValue('sendPutDataType_result'),
-  fetchDataType: jest.fn().mockReturnValue('fetchDataType_result'),
-  fetchDataTypeAttribute: jest.fn().mockReturnValue('fetchDataTypeAttribute_result'),
-  sendMoveAttributeUp: jest.fn().mockReturnValue('sendMoveAttributeUp_result'),
-  sendMoveAttributeDown: jest.fn().mockReturnValue('sendMoveAttributeDown_result'),
-}));
-
-jest.mock('state/data-types/selectors', () => ({
-  getSelectedDataTypeAttributes: jest.fn().mockReturnValue('getSelectedDataTypeAttributes_result'),
-  getDataTypeAttributesIdList: jest.fn().mockReturnValue('getDataTypeAttributesIdList_result'),
-}));
-
-const ownProps = {
-  match: {
-    params: {
-      datatypeCode: 'datatypeCode_code',
-    },
-  },
-};
-
-describe('EditFormContainer', () => {
-  const dispatchMock = jest.fn();
-
-  describe('mapStateToProps', () => {
-    let props;
-    beforeEach(() => {
-      props = mapStateToProps({}, ownProps);
-    });
-
-    it('maps the properties by state', () => {
-      expect(props).toHaveProperty('mode', 'edit');
-      expect(props).toHaveProperty('dataTypeCode', 'datatypeCode_code');
-      expect(props).toHaveProperty('attributes', 'getSelectedDataTypeAttributes_result');
-      expect(props).toHaveProperty('attributesType', 'getDataTypeAttributesIdList_result');
-      expect(props).toHaveProperty('attributeCode', 'formValueSelector_result');
-      expect(props).toHaveProperty('routeToEdit', ROUTE_DATA_TYPE_ATTRIBUTE_EDIT);
-    });
-  });
-
-  describe('mapDispatchToProps', () => {
-    let props;
-    beforeEach(() => {
-      props = mapDispatchToProps(dispatchMock);
-    });
-
-    it('maps the "onWillMount" prop a "fetchDataType" and "fetchDataTypeAttributes" dispatch', () => {
-      expect(props.onWillMount).toBeDefined();
-      props.onWillMount('dataType_code');
-      expect(dispatchMock).toHaveBeenCalledWith('fetchDataType_result');
-      expect(dispatchMock).toHaveBeenCalledWith('fetchDataTypeAttributes_result');
-    });
-
-    it('maps the "onAddAttribute" prop a "fetchDataTypeAttribute" dispatch', () => {
-      expect(props.onAddAttribute).toBeDefined();
-      props.onAddAttribute('attribute_code', 'dataType_code');
-      expect(dispatchMock).toHaveBeenCalledWith('fetchDataTypeAttribute_result');
-    });
-
-    it('maps the "onMoveUp" prop a "fetchDataTypeAttribute" dispatch', () => {
-      expect(props.onMoveUp).toBeDefined();
-      props.onMoveUp('attribute_code');
-      expect(dispatchMock).toHaveBeenCalledWith('sendMoveAttributeUp_result');
-    });
-
-    it('maps the "onMoveDown" prop a "fetchDataTypeAttribute" dispatch', () => {
-      expect(props.onMoveDown).toBeDefined();
-      props.onMoveDown('attribute_code');
-      expect(dispatchMock).toHaveBeenCalledWith('sendMoveAttributeDown_result');
-    });
-
-    it('maps the "onSubmit" prop a "sendPutDataType" dispatch', () => {
-      expect(props.onSubmit).toBeDefined();
-      props.onSubmit();
-      expect(dispatchMock).toHaveBeenCalledWith('sendPutDataType_result');
-    });
-  });
-});
diff --git a/test/ui/email-config/AddEmailSenderFormContainer.test.js b/test/ui/email-config/AddEmailSenderFormContainer.test.js
index 05a334a68..ae48ddb67 100644
--- a/test/ui/email-config/AddEmailSenderFormContainer.test.js
+++ b/test/ui/email-config/AddEmailSenderFormContainer.test.js
@@ -1,14 +1,12 @@
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import * as reactRedux from 'react-redux';
 
-import { renderWithIntlAndState, setupForm } from 'test/testUtils';
-import userEvent from '@testing-library/user-event';
+import { renderWithState } from 'test/testUtils';
 import AddEmailSenderFormContainer from 'ui/email-config/AddEmailSenderFormContainer';
+import EmailSenderForm from 'ui/email-config/EmailSenderForm';
 
 jest.unmock('react-redux');
-jest.unmock('redux-form');
 
 jest.mock('state/email-config/actions', () => ({
   addEmailSender: jest.fn(payload => ({ type: 'addEmailSender_test', payload })),
@@ -18,51 +16,41 @@ const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
 const mockDispatch = jest.fn();
 useDispatchSpy.mockReturnValue(mockDispatch);
 
+jest.mock('ui/email-config/EmailSenderForm', () => jest.fn(mockProps => (
+  <div>
+    <button onClick={() => mockProps.onSubmit({})}>onSubmit</button>
+  </div>
+)));
+
+const setupAddEmailSenderFormContainer = () => {
+  const utils = renderWithState(<AddEmailSenderFormContainer />);
+  const simulateSubmit = () => utils.getByText('onSubmit').click();
+
+  return {
+    ...utils,
+    simulateSubmit,
+  };
+};
+
 describe('AddEmailSenderFormContainer', () => {
-  it('should render the correct heading', () => {
-    renderWithIntlAndState(<AddEmailSenderFormContainer />);
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('New Sender');
+  afterEach(() => {
+    mockDispatch.mockClear();
   });
 
-  describe('form', () => {
-    const setupEmailSenderForm = () => {
-      const formValues = {
-        code: 'testcode',
-        email: 'testemail@test.com',
-      };
-      return setupForm('emailSender', formValues, renderWithIntlAndState, <AddEmailSenderFormContainer />);
-    };
+  it('passes initialValues to EmailSenderForm with the correct values', () => {
+    setupAddEmailSenderFormContainer();
 
-    it('should render code and email fields', () => {
-      const { formView, formValues } = setupEmailSenderForm();
-      expect(formView.getByRole('textbox', { name: 'Code' })).toHaveDisplayValue(formValues.code);
-      expect(formView.getByRole('textbox', { name: 'Email' })).toHaveDisplayValue(formValues.email);
-    });
+    expect(EmailSenderForm).toHaveBeenCalledWith(expect.objectContaining({
+      initialValues: { code: '', email: '' },
+    }), {});
+  });
 
-    it('should render "Save" button that calls the correct action when clicked', () => {
-      const { formView, formValues } = setupEmailSenderForm();
-      const saveBtn = formView.getByRole('button', { name: 'Save' });
-      expect(saveBtn).toHaveAttribute('type', 'submit');
-      mockDispatch.mockClear();
-      userEvent.click(saveBtn);
-      expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(mockDispatch).toHaveBeenCalledWith({ type: 'addEmailSender_test', payload: formValues });
-    });
+  it('calls the correct email sender action when EmailSenderForm is submitted', () => {
+    const { simulateSubmit } = setupAddEmailSenderFormContainer();
 
-    it('should render a disabled "Save" button when code field is empty', () => {
-      const { formView } = setupEmailSenderForm();
-      const codeField = formView.getByRole('textbox', { name: 'Code' });
-      fireEvent.change(codeField, { target: { value: '' } });
-      const saveBtn = formView.getByRole('button', { name: 'Save' });
-      expect(saveBtn).toBeDisabled();
-    });
+    simulateSubmit();
 
-    it('should render a disabled "Save" button when email field is empty', () => {
-      const { formView } = setupEmailSenderForm();
-      const emailField = formView.getByRole('textbox', { name: 'Email' });
-      fireEvent.change(emailField, { target: { value: '' } });
-      const saveBtn = formView.getByRole('button', { name: 'Save' });
-      expect(saveBtn).toBeDisabled();
-    });
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'addEmailSender_test', payload: {} });
   });
 });
diff --git a/test/ui/email-config/EditEmailSenderFormContainer.test.js b/test/ui/email-config/EditEmailSenderFormContainer.test.js
index f518bba82..a7dd52bcf 100644
--- a/test/ui/email-config/EditEmailSenderFormContainer.test.js
+++ b/test/ui/email-config/EditEmailSenderFormContainer.test.js
@@ -1,14 +1,13 @@
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import * as reactRedux from 'react-redux';
 
-import { renderWithIntlRouterState, setupForm } from 'test/testUtils';
-import userEvent from '@testing-library/user-event';
+import { renderWithIntlRouterState } from 'test/testUtils';
 import EditEmailSenderFormContainer from 'ui/email-config/EditEmailSenderFormContainer';
+import EmailSenderForm from 'ui/email-config/EmailSenderForm';
+import { MOCK_EMAIL_SENDER } from 'test/mocks/emailConfig';
 
 jest.unmock('react-redux');
-jest.unmock('redux-form');
 
 jest.mock('state/email-config/actions', () => ({
   fetchEmailSender: jest.fn(payload => ({ type: 'fetchEmailSender_test', payload })),
@@ -19,68 +18,53 @@ const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
 const mockDispatch = jest.fn();
 useDispatchSpy.mockReturnValue(mockDispatch);
 
+jest.mock('ui/email-config/EmailSenderForm', () => jest.fn(mockProps => (
+  <div>
+    <button onClick={() => mockProps.onSubmit({})}>onSubmit</button>
+  </div>
+)));
+
+const setupEditEmailSenderFormContainer = (state = {
+  emailConfig: { selectedSender: MOCK_EMAIL_SENDER },
+}) => {
+  const utils = renderWithIntlRouterState(<EditEmailSenderFormContainer />, {
+    state, initialRoute: '/email-config/senders/edit/testcode', path: '/email-config/senders/edit/:code',
+  });
+  const simulateSubmit = () => utils.getByText('onSubmit').click();
+
+  return {
+    ...utils,
+    simulateSubmit,
+  };
+};
+
 describe('EditEmailSenderFormContainer', () => {
   afterEach(() => {
     mockDispatch.mockClear();
   });
 
-  const testCode = 'testcode';
+  it('fetches email sender data when form mounts', () => {
+    setupEditEmailSenderFormContainer();
 
-  it('should fetch the relevant data on initial render', () => {
-    const ROUTE_EMAIL_CONFIG_SENDERS_EDIT_TESTCODE = `/email-config/senders/edit/${testCode}`;
-    renderWithIntlRouterState(<EditEmailSenderFormContainer />, {
-      initialRoute: ROUTE_EMAIL_CONFIG_SENDERS_EDIT_TESTCODE,
-      path: '/email-config/senders/edit/:code',
-    });
     expect(mockDispatch).toHaveBeenCalledTimes(1);
-    expect(mockDispatch).toHaveBeenCalledWith({ type: 'fetchEmailSender_test', payload: testCode });
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'fetchEmailSender_test', payload: 'testcode' });
   });
 
-  it('should render the correct heading', () => {
-    renderWithIntlRouterState(<EditEmailSenderFormContainer />);
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Edit Sender');
+  it('passes initialValues to EmailSenderForm with the correct values', () => {
+    setupEditEmailSenderFormContainer();
+
+    expect(EmailSenderForm).toHaveBeenCalledWith(expect.objectContaining({
+      initialValues: MOCK_EMAIL_SENDER,
+    }), {});
   });
 
-  describe('form', () => {
-    const setupEmailSenderForm = () => {
-      const formValues = {
-        code: 'testcode',
-        email: 'testemail@test.com',
-      };
-      return setupForm('emailSender', formValues, renderWithIntlRouterState, <EditEmailSenderFormContainer />);
-    };
-
-    it('should render code and email fields with code field disabled', () => {
-      const { formView, formValues } = setupEmailSenderForm();
-      expect(formView.getByRole('textbox', { name: 'Code' })).toHaveDisplayValue(formValues.code);
-      expect(formView.getByRole('textbox', { name: 'Email' })).toHaveDisplayValue(formValues.email);
-      expect(formView.getByRole('textbox', { name: 'Code' })).toBeDisabled();
-    });
-
-    it('should render "Save" button that calls the correct action when clicked', () => {
-      const { formView, formValues } = setupEmailSenderForm();
-      const saveBtn = formView.getByRole('button', { name: 'Save' });
-      expect(saveBtn).toHaveAttribute('type', 'submit');
-      mockDispatch.mockClear();
-      userEvent.click(saveBtn);
-      expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(mockDispatch).toHaveBeenCalledWith({ type: 'updateEmailSender_test', payload: formValues });
-    });
-
-    it('should render a disabled "Save" button when code field is empty', () => {
-      const { formView } = setupEmailSenderForm();
-      const codeField = formView.getByRole('textbox', { name: 'Code' });
-      fireEvent.change(codeField, { target: { value: '' } });
-      const saveBtn = formView.getByRole('button', { name: 'Save' });
-      expect(saveBtn).toBeDisabled();
-    });
-
-    it('should render a disabled "Save" button when email field is empty', () => {
-      const { formView } = setupEmailSenderForm();
-      const emailField = formView.getByRole('textbox', { name: 'Email' });
-      fireEvent.change(emailField, { target: { value: '' } });
-      const saveBtn = formView.getByRole('button', { name: 'Save' });
-      expect(saveBtn).toBeDisabled();
-    });
+  it('calls the correct email sender action when EmailSenderForm is submitted', () => {
+    const { simulateSubmit } = setupEditEmailSenderFormContainer();
+
+    simulateSubmit();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(2);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'updateEmailSender_test', payload: {} });
   });
 });
+
diff --git a/test/ui/email-config/EmailConfigSmtpServer.test.js b/test/ui/email-config/EmailConfigSmtpServer.test.js
new file mode 100644
index 000000000..7c14471e8
--- /dev/null
+++ b/test/ui/email-config/EmailConfigSmtpServer.test.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import { screen, within, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+
+import EmailConfigSmtpServer from 'ui/email-config/EmailConfigSmtpServer';
+import { renderWithIntl } from '../../test/testUtils';
+
+describe('EmailConfigSmtpServer', () => {
+  const onSubmit = jest.fn();
+  const onTestConfig = jest.fn();
+  const onSendTestEmail = jest.fn();
+  const formValues = {
+    active: true,
+    debugMode: false,
+    host: 'localhost',
+    port: '25000',
+    protocol: 'STD',
+    checkServerIdentity: true,
+    timeout: 41331973,
+    username: 'testuser',
+    password: 'testpassword',
+  };
+  const setupEmailConfigForm = () =>
+    renderWithIntl(<EmailConfigSmtpServer
+      initialValues={formValues}
+      onSubmit={onSubmit}
+      onTestConfig={onTestConfig}
+      onSendTestEmail={onSendTestEmail}
+    />);
+
+  const getHeadings = view => view.getAllByRole('heading');
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render General Settings section', () => {
+    setupEmailConfigForm();
+    expect(getHeadings(screen)[0]).toHaveTextContent('General Settings');
+    expect(screen.getByLabelText('Active')).toHaveTextContent('ON');
+    expect(screen.getByLabelText('Debug Mode')).toHaveTextContent('OFF');
+  });
+
+  it('should render Connection section', () => {
+    setupEmailConfigForm();
+    const securityRadioGroupView = within(screen.getByLabelText('Security'));
+    expect(getHeadings(screen)[1]).toHaveTextContent('Connection');
+    expect(screen.getByRole('textbox', { name: 'Host' })).toHaveDisplayValue(formValues.host);
+    expect(screen.getByRole('textbox', { name: 'Port' })).toHaveDisplayValue(formValues.port);
+    expect(securityRadioGroupView.getByRole('radio', { name: 'None' })).toBeChecked();
+    expect(screen.getByLabelText('Check Server Identity')).toHaveTextContent('ON');
+    expect(screen.getByRole('textbox', { name: 'Timeout (in milliseconds)' })).toHaveDisplayValue(formValues.timeout);
+  });
+
+  it('should render Authentication section', () => {
+    setupEmailConfigForm();
+    expect(getHeadings(screen)[2]).toHaveTextContent('Authentication');
+    expect(screen.getByRole('textbox', { name: 'Username' })).toHaveDisplayValue(formValues.username);
+    expect(screen.getByLabelText('Password')).toHaveDisplayValue(formValues.password);
+    expect(screen.getByLabelText('Password')).toHaveAttribute('type', 'password');
+  });
+
+  it('should render "Test configuration" button that calls the correct action when clicked', () => {
+    setupEmailConfigForm();
+    const testConfigBtn = screen.getByRole('button', { name: 'Test configuration' });
+    userEvent.click(testConfigBtn);
+    expect(onTestConfig).toHaveBeenCalledTimes(1);
+    expect(onTestConfig).toHaveBeenCalledWith(formValues);
+  });
+
+  it('should render "Send test email" button that calls the correct action when clicked', () => {
+    setupEmailConfigForm();
+    const sendTestEmailBtn = screen.getByRole('button', { name: 'Send test email' });
+    onSendTestEmail.mockClear();
+    userEvent.click(sendTestEmailBtn);
+    expect(onSendTestEmail).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render "Save" button that calls the correct action when clicked', async () => {
+    setupEmailConfigForm();
+    const saveBtn = screen.getByRole('button', { name: 'Save' });
+    expect(saveBtn).toHaveAttribute('type', 'submit');
+    userEvent.click(saveBtn);
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+      expect(onSubmit).toHaveBeenCalledWith(formValues);
+    });
+  });
+});
diff --git a/test/ui/email-config/EmailConfigSmtpServerContainer.test.js b/test/ui/email-config/EmailConfigSmtpServerContainer.test.js
index 29f06b9e1..167c4c88a 100644
--- a/test/ui/email-config/EmailConfigSmtpServerContainer.test.js
+++ b/test/ui/email-config/EmailConfigSmtpServerContainer.test.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { screen, within } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
 import * as reactRedux from 'react-redux';
 
-import { renderWithIntlAndState, setupForm } from 'test/testUtils';
+import { renderWithIntlAndState } from 'test/testUtils';
 import EmailConfigSmtpServerContainer from 'ui/email-config/EmailConfigSmtpServerContainer';
+import { initialState } from 'state/email-config/reducer';
 
 jest.unmock('react-redux');
 jest.unmock('redux-form');
@@ -20,6 +20,14 @@ jest.mock('state/email-config/actions', () => ({
 const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
 const mockDispatch = jest.fn();
 useDispatchSpy.mockReturnValue(mockDispatch);
+const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector');
+useSelectorSpy.mockReturnValue(callback => callback({
+  emailConfig: {
+    smtpServer: {
+      ...initialState,
+    },
+  },
+}));
 
 describe('EmailConfigSmtpServerContainer', () => {
   afterEach(() => {
@@ -37,77 +45,4 @@ describe('EmailConfigSmtpServerContainer', () => {
     const panelMsg = 'Host is mandatory. Port and Timeout if blank, will default to 25 and 10000. Please leave Username and Password blank if the SMTP server does not require authentication.';
     expect(screen.getByText(panelMsg)).toBeInTheDocument();
   });
-
-  describe('form', () => {
-    const setupEmailConfigForm = () => {
-      const formValues = {
-        active: true,
-        debugMode: false,
-        host: 'localhost',
-        port: '25000',
-        protocol: 'STD',
-        checkServerIdentity: true,
-        timeout: 41331973,
-        username: 'testuser',
-        password: 'testpassword',
-      };
-      return setupForm('emailConfig', formValues, renderWithIntlAndState, <EmailConfigSmtpServerContainer />);
-    };
-
-    const getHeadings = view => view.getAllByRole('heading');
-
-    it('should render General Settings section', () => {
-      const { formView } = setupEmailConfigForm();
-      expect(getHeadings(formView)[0]).toHaveTextContent('General Settings');
-      expect(formView.getByLabelText('Active')).toHaveTextContent('ON');
-      expect(formView.getByLabelText('Debug Mode')).toHaveTextContent('OFF');
-    });
-
-    it('should render Connection section', () => {
-      const { formView, formValues } = setupEmailConfigForm();
-      const securityRadioGroupView = within(formView.getByLabelText('Security'));
-      expect(getHeadings(formView)[1]).toHaveTextContent('Connection');
-      expect(formView.getByRole('textbox', { name: 'Host' })).toHaveDisplayValue(formValues.host);
-      expect(formView.getByRole('textbox', { name: 'Port' })).toHaveDisplayValue(formValues.port);
-      expect(securityRadioGroupView.getByRole('radio', { name: 'None' })).toBeChecked();
-      expect(formView.getByLabelText('Check Server Identity')).toHaveTextContent('ON');
-      expect(formView.getByRole('textbox', { name: 'Timeout (in milliseconds)' })).toHaveDisplayValue(formValues.timeout);
-    });
-
-    it('should render Authentication section', () => {
-      const { formView, formValues } = setupEmailConfigForm();
-      expect(getHeadings(formView)[2]).toHaveTextContent('Authentication');
-      expect(formView.getByRole('textbox', { name: 'Username' })).toHaveDisplayValue(formValues.username);
-      expect(formView.getByLabelText('Password')).toHaveDisplayValue(formValues.password);
-      expect(formView.getByLabelText('Password')).toHaveAttribute('type', 'password');
-    });
-
-    it('should render "Test configuration" button that calls the correct action when clicked', () => {
-      const { formView, formValues } = setupEmailConfigForm();
-      const testConfigBtn = formView.getByRole('button', { name: 'Test configuration' });
-      mockDispatch.mockClear();
-      userEvent.click(testConfigBtn);
-      expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(mockDispatch).toHaveBeenCalledWith({ type: 'testEmailConfig_test', payload: formValues });
-    });
-
-    it('should render "Send test email" button that calls the correct action when clicked', () => {
-      const { formView } = setupEmailConfigForm();
-      const sendTestEmailBtn = formView.getByRole('button', { name: 'Send test email' });
-      mockDispatch.mockClear();
-      userEvent.click(sendTestEmailBtn);
-      expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(mockDispatch).toHaveBeenCalledWith({ type: 'sendTestEmail_test' });
-    });
-
-    it('should render "Save" button that calls the correct action when clicked', () => {
-      const { formView, formValues } = setupEmailConfigForm();
-      const saveBtn = formView.getByRole('button', { name: 'Save' });
-      expect(saveBtn).toHaveAttribute('type', 'submit');
-      mockDispatch.mockClear();
-      userEvent.click(saveBtn);
-      expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(mockDispatch).toHaveBeenCalledWith({ type: 'saveEmailConfig_test', payload: formValues });
-    });
-  });
 });
diff --git a/test/ui/email-config/EmailSenderForm.test.js b/test/ui/email-config/EmailSenderForm.test.js
new file mode 100644
index 000000000..8e43c4f2b
--- /dev/null
+++ b/test/ui/email-config/EmailSenderForm.test.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { screen, within, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+import EmailSenderForm from 'ui/email-config/EmailSenderForm';
+import { renderWithIntl } from 'test/testUtils';
+
+const setupEmailSenderForm = (initialValues = { code: '', email: '' }, editing = false) => {
+  const mockHandleSubmit = jest.fn();
+  const utils = renderWithIntl((
+    <EmailSenderForm
+      initialValues={initialValues}
+      onSubmit={values => mockHandleSubmit(values)}
+      editing={editing}
+      titleId="emailConfig.senderMgmt.new"
+    />
+  ));
+  const formView = within(screen.getByRole('form'));
+
+  const getCodeInput = () => formView.getByRole('textbox', { name: /code/i });
+  const getEmailInput = () => formView.getByRole('textbox', { name: /email/i });
+  const getSaveButton = () => formView.getByRole('button', { name: /save/i });
+  const getErrorMessage = () => formView.getByRole('alert');
+
+  const typeCode = value => userEvent.type(getCodeInput(), value);
+  const typeEmail = value => userEvent.type(getEmailInput(), value);
+
+  const clickSave = () => userEvent.click(getSaveButton());
+
+  return {
+    ...utils,
+    mockHandleSubmit,
+    getCodeInput,
+    getEmailInput,
+    getSaveButton,
+    getErrorMessage,
+    typeCode,
+    typeEmail,
+    clickSave,
+  };
+};
+
+const setupEmailSenderFormAndFillValues = ({ code, email }) => {
+  const utils = setupEmailSenderForm();
+  utils.typeCode(code);
+  utils.typeEmail(email);
+
+  fireEvent.blur(utils.getEmailInput());
+
+  return utils;
+};
+
+describe('EmailSenderForm', () => {
+  const emailSender = {
+    code: 'testcode',
+    email: 'test@test.com',
+  };
+
+  it('calls onSubmit with all the fields when save is clicked', async () => {
+    const { mockHandleSubmit, clickSave } = setupEmailSenderFormAndFillValues(emailSender);
+
+    clickSave();
+
+    await waitFor(() => {
+      expect(mockHandleSubmit).toHaveBeenCalledTimes(1);
+      expect(mockHandleSubmit).toHaveBeenCalledWith(emailSender);
+    });
+  });
+
+  it('disables save button and shows an error message when code is empty', async () => {
+    const { getSaveButton, getErrorMessage } = setupEmailSenderFormAndFillValues({ ...emailSender, code: '' });
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/field required/i);
+    });
+  });
+
+  it('disables save button and shows an error message when email is empty', async () => {
+    const { getSaveButton, getErrorMessage } = setupEmailSenderFormAndFillValues({ ...emailSender, email: '' });
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/field required/i);
+    });
+  });
+
+  it('disables code input when on editing mode', () => {
+    const { getCodeInput } = setupEmailSenderForm(emailSender, true);
+
+    expect(getCodeInput()).toHaveAttribute('disabled');
+  });
+});
diff --git a/test/ui/file-browser/add/CreateFolderForm.test.js b/test/ui/file-browser/add/CreateFolderForm.test.js
index fae3704e8..8c6b47645 100644
--- a/test/ui/file-browser/add/CreateFolderForm.test.js
+++ b/test/ui/file-browser/add/CreateFolderForm.test.js
@@ -1,11 +1,16 @@
 import React from 'react';
 
 import 'test/enzyme-init';
-import { CreateFolderFormBody } from 'ui/file-browser/add/CreateFolderForm';
-import { shallowWithIntl, mockIntl } from 'test/legacyTestUtils';
+import CreateFolderForm, { CreateFolderFormBody } from 'ui/file-browser/add/CreateFolderForm';
+import { shallowWithIntl, mockIntl, mockRenderWithRouter } from 'test/legacyTestUtils';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { renderWithIntl } from '../../../test/testUtils';
 
 const handleSubmit = jest.fn();
 const onWillMount = jest.fn();
+const onSubmit = jest.fn();
+
+jest.unmock('react-redux');
 
 describe('CreateFolderForm', () => {
   beforeEach(jest.clearAllMocks);
@@ -58,10 +63,25 @@ describe('CreateFolderForm', () => {
     expect(submitButton.prop('disabled')).toEqual(true);
   });
 
-  it('on form submit calls handleSubmit', () => {
-    createFolderForm = buildCreateFolderForm();
-    const preventDefault = jest.fn();
-    createFolderForm.find('form').simulate('submit', { preventDefault });
-    expect(handleSubmit).toHaveBeenCalled();
+  it('on form submit calls onSubmit', async () => {
+    const props = {
+      isSubmitting: false,
+      isValid: true,
+      handleSubmit,
+      onSubmit,
+      onWillMount,
+      intl: mockIntl,
+      history: { location: {} },
+      initialValues: {
+        name: 'name',
+        path: 'folderName',
+      },
+    };
+    renderWithIntl(mockRenderWithRouter(<CreateFolderForm {...props} />));
+    const btn = screen.getByRole('button', { name: /save/i });
+    await fireEvent.click(btn);
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled();
+    });
   });
 });
diff --git a/test/ui/file-browser/common/CreateTextFileForm.test.js b/test/ui/file-browser/common/CreateTextFileForm.test.js
index fb3efd7dd..680cf40d3 100644
--- a/test/ui/file-browser/common/CreateTextFileForm.test.js
+++ b/test/ui/file-browser/common/CreateTextFileForm.test.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import 'test/enzyme-init';
-import { shallowWithIntl, mockIntl } from 'test/legacyTestUtils';
-import { required } from '@entando/utils';
+import { shallowWithIntl, mockIntl, mockRenderWithRouter } from 'test/legacyTestUtils';
 
-import RenderTextAreaInput from 'ui/common/form/RenderTextAreaInput';
-import { CreateTextFileFormBody, maxLength50 } from 'ui/file-browser/common/CreateTextFileForm';
+import RenderTextAreaInput from 'ui/common/formik-field/RenderTextAreaInput';
+import CreateTextFileForm, { CreateTextFileFormBody } from 'ui/file-browser/common/CreateTextFileForm';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { renderWithIntl } from '../../../test/testUtils';
 
 const handleSubmit = jest.fn();
+const onSubmit = jest.fn();
 
 describe('CreateTextFileForm', () => {
   beforeEach(jest.clearAllMocks);
@@ -41,8 +43,6 @@ describe('CreateTextFileForm', () => {
   it('has RenderTextInput', () => {
     const element = createTextFileForm.find('Field[name="name"]');
     expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('validate', [required, maxLength50]);
   });
 
   it('has select', () => {
@@ -50,7 +50,6 @@ describe('CreateTextFileForm', () => {
     expect(element.exists()).toBe(true);
     const props = element.props();
     expect(props).toHaveProperty('component', 'select');
-    expect(props).toHaveProperty('validate', [required]);
   });
 
   it('has RenderTextAreaInput', () => {
@@ -58,7 +57,6 @@ describe('CreateTextFileForm', () => {
     expect(element.exists()).toBe(true);
     const props = element.props();
     expect(props).toHaveProperty('component', RenderTextAreaInput);
-    expect(props).toHaveProperty('validate', [required]);
   });
 
   it('has a Buttons  save and cancel', () => {
@@ -81,10 +79,25 @@ describe('CreateTextFileForm', () => {
     expect(submitButton.prop('disabled')).toBe(true);
   });
 
-  it('on form submit calls handleSubmit', () => {
-    createTextFileForm = buildCreateTextFileForm();
-    const preventDefault = jest.fn();
-    createTextFileForm.find('form').simulate('submit', { preventDefault });
-    expect(handleSubmit).toHaveBeenCalled();
+  it('on form submit calls handleSubmit', async () => {
+    const props = {
+      isSubmitting: false,
+      isValid: true,
+      onSubmit,
+      handleSubmit,
+      intl: mockIntl,
+      initialValues: {
+        name: 'nametest',
+        content: 'contento',
+        extension: '.txt',
+      },
+      history: { location: {} },
+    };
+    renderWithIntl(mockRenderWithRouter(<CreateTextFileForm {...props} />));
+    const btn = screen.getByRole('button', { name: /save/i });
+    await fireEvent.click(btn);
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled();
+    });
   });
 });
diff --git a/test/ui/fragments/list/FragmentSearchForm.test.js b/test/ui/fragments/list/FragmentSearchForm.test.js
index 780cee562..c496e3df2 100644
--- a/test/ui/fragments/list/FragmentSearchForm.test.js
+++ b/test/ui/fragments/list/FragmentSearchForm.test.js
@@ -1,32 +1,22 @@
 import React from 'react';
 import 'test/enzyme-init';
-import { mount } from 'enzyme';
 import FragmentSearchForm from 'ui/fragments/list/FragmentSearchForm';
-import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
+import { mockIntl, mockRenderWithRouter } from 'test/legacyTestUtils';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { renderWithIntl } from '../../../test/testUtils';
 
-const handleSubmit = jest.fn();
-
-jest.unmock('react-redux');
-jest.unmock('redux-form');
+const onSubmit = jest.fn();
 
 describe('FragmentSearchForm', () => {
   let fragmentSearchForm;
-  let submitting;
-  let invalid;
-
 
-  beforeEach(() => {
-    submitting = false;
-    invalid = false;
-  });
   const buildFragmentSearchForm = () => {
     const props = {
-      submitting,
-      invalid,
-      handleSubmit,
+      onSubmit,
+      intl: mockIntl,
     };
 
-    return mount(mockRenderWithIntlAndStore(<FragmentSearchForm {...props} />));
+    return renderWithIntl(mockRenderWithRouter(<FragmentSearchForm {...props} />));
   };
 
   describe('basic render tests', () => {
@@ -34,28 +24,39 @@ describe('FragmentSearchForm', () => {
       fragmentSearchForm = buildFragmentSearchForm();
     });
     it('root component renders without crashing', () => {
-      expect(fragmentSearchForm.exists()).toBe(true);
+      expect(fragmentSearchForm).toBeDefined();
     });
 
     it('root component renders code field', () => {
-      const code = fragmentSearchForm.find('[name="code"]');
-      expect(code.exists()).toBe(true);
+      const codeInput = screen.getByRole('textbox', { name: /code/i });
+      expect(codeInput).toBeDefined();
     });
 
     it('root component renders widgetType field', () => {
-      const widgetType = fragmentSearchForm.find('[name="widgetType"]');
-      expect(widgetType.exists()).toEqual(true);
+      const widgetType = screen.getByPlaceholderText(/Widget Type/i);
+      expect(widgetType).toBeDefined();
     });
     it('root component renders plugin Field', () => {
-      const plugin = fragmentSearchForm.find('[name="pluginCode"]');
-      expect(plugin.exists()).toBe(true);
+      const plugin = screen.getByPlaceholderText(/plugin/i);
+      expect(plugin).toBeDefined();
     });
   });
 
-  it('on form submit calls handleSubmit', () => {
-    fragmentSearchForm = buildFragmentSearchForm();
-    const preventDefault = jest.fn();
-    fragmentSearchForm.find('form').simulate('submit', { preventDefault });
-    expect(handleSubmit).toHaveBeenCalled();
+  it('on form submit calls handleSubmit', async () => {
+    const props = {
+      isSubmitting: false,
+      onSubmit,
+      intl: mockIntl,
+      initialValues: {
+        code: '', widgetType: '', pluginCode: '',
+      },
+    };
+
+    renderWithIntl(mockRenderWithRouter(<FragmentSearchForm {...props} />));
+    const btn = screen.getByRole('button', { name: /search/i });
+    await fireEvent.click(btn);
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled();
+    });
   });
 });
diff --git a/test/ui/fragments/list/SettingsFragmentForm.test.js b/test/ui/fragments/list/SettingsFragmentForm.test.js
index fa64a555f..3cfe26636 100644
--- a/test/ui/fragments/list/SettingsFragmentForm.test.js
+++ b/test/ui/fragments/list/SettingsFragmentForm.test.js
@@ -35,10 +35,4 @@ describe('ui/fragments/list/SettingsFragmentForm', () => {
   it('has component Button ', () => {
     expect(component.find('Button')).toHaveLength(1);
   });
-
-  it('on form submit calls handleSubmit', () => {
-    const preventDefault = jest.fn();
-    component.find('form').simulate('submit', { preventDefault });
-    expect(handleSubmit).toHaveBeenCalled();
-  });
 });
diff --git a/test/ui/labels/add/AddFormContainer.test.js b/test/ui/labels/add/AddFormContainer.test.js
index 376fa8c90..fd5b7dbf9 100644
--- a/test/ui/labels/add/AddFormContainer.test.js
+++ b/test/ui/labels/add/AddFormContainer.test.js
@@ -3,9 +3,10 @@ import 'test/enzyme-init';
 import { mapStateToProps, mapDispatchToProps } from 'ui/labels/add/AddFormContainer';
 
 const dispatchMock = jest.fn();
+const languageList = [{ code: 'a' }, { code: 'b' }];
 
 jest.mock('state/languages/selectors', () => ({
-  getActiveLanguages: jest.fn().mockReturnValue('getActiveLanguages_result'),
+  getActiveLanguages: jest.fn().mockReturnValue([{ code: 'a' }, { code: 'b' }]),
   getDefaultLanguage: jest.fn().mockReturnValue('getDefaultLanguage_result'),
 }));
 
@@ -24,7 +25,7 @@ jest.mock('state/labels/actions', () => ({
   createLabel: jest.fn().mockReturnValue('createLabel_result'),
 }));
 
-jest.mock('state/locale/selectors', () => ({ getLocale: () => ('en') }));
+jest.mock('state/locale/selectors', () => ({ getLocale: jest.fn().mockReturnValue('en') }));
 
 describe('AddFormContainer', () => {
   let props;
@@ -34,7 +35,7 @@ describe('AddFormContainer', () => {
 
   it('maps languages property state in LabelsForm', () => {
     expect(props).toHaveProperty('locale', 'en');
-    expect(props).toHaveProperty('languages', 'getActiveLanguages_result');
+    expect(props).toHaveProperty('languages', languageList);
     expect(props).toHaveProperty('defaultLanguage', 'getDefaultLanguage_result');
   });
 });
@@ -45,9 +46,9 @@ describe('mapDispatchToProps', () => {
     props = mapDispatchToProps(dispatchMock);
   });
 
-  it('maps the "onWillMount" prop a fetchLanguages dispatch', () => {
-    expect(props.onWillMount).toBeDefined();
-    props.onWillMount();
+  it('maps the "onDidMount" prop a fetchLanguages dispatch', () => {
+    expect(props.onDidMount).toBeDefined();
+    props.onDidMount();
     expect(dispatchMock).toHaveBeenCalledWith('fetchLanguages_result');
   });
 
diff --git a/test/ui/labels/common/LabelsForm.test.js b/test/ui/labels/common/LabelsForm.test.js
index 4fea11786..8cd0c2fdc 100644
--- a/test/ui/labels/common/LabelsForm.test.js
+++ b/test/ui/labels/common/LabelsForm.test.js
@@ -1,14 +1,13 @@
 import React from 'react';
-import 'test/enzyme-init';
-import { mount } from 'enzyme';
-import { LabelsFormBody as LabelsForm } from 'ui/labels/common/LabelsForm';
+import '@testing-library/jest-dom/extend-expect';
+import { screen, render } from '@testing-library/react';
+import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
+import LabelsForm from 'ui/labels/common/LabelsForm';
 import { LANGUAGES_LIST } from 'test/mocks/languages';
-import { mockRenderWithIntlAndStore, mockIntl } from 'test/legacyTestUtils';
 
 const ON_SUBMIT = jest.fn();
-const HANDLE_SUBMIT = jest.fn();
 const LANGUAGES = LANGUAGES_LIST;
-const ON_WILL_MOUNT = jest.fn();
+const ON_DID_MOUNT = jest.fn();
 
 jest.unmock('react-redux');
 
@@ -16,72 +15,42 @@ describe('LabelsForm', () => {
   beforeEach(jest.clearAllMocks);
 
   describe('basic rendering', () => {
-    let component;
     beforeEach(() => {
-      component = mount(mockRenderWithIntlAndStore(<LabelsForm
+      render(mockRenderWithIntlAndStore(<LabelsForm
         onSubmit={ON_SUBMIT}
-        handleSubmit={HANDLE_SUBMIT}
         languages={LANGUAGES}
-        onWillMount={ON_WILL_MOUNT}
-        intl={mockIntl}
+        onDidMount={ON_DID_MOUNT}
       />));
     });
 
-    it('renders without crashing', () => {
-      expect(component.exists()).toBe(true);
-    });
-
-    it('has class LabelsForm', () => {
-      expect(component.exists('.LabelsForm')).toBe(true);
+    it('renders form without crashing', () => {
+      expect(screen.getByTestId('common_LabelsForm_Form')).toBeInTheDocument();
     });
   });
 
-  describe('with onWillMount callback', () => {
+  describe('with onDidMount callback', () => {
     beforeEach(() => {
-      mount(mockRenderWithIntlAndStore(<LabelsForm
+      render(mockRenderWithIntlAndStore(<LabelsForm
         onSubmit={ON_SUBMIT}
-        handleSubmit={HANDLE_SUBMIT}
         languages={LANGUAGES}
-        onWillMount={ON_WILL_MOUNT}
-        intl={mockIntl}
+        onDidMount={ON_DID_MOUNT}
       />));
     });
 
-    it('calls onWillMount', () => {
-      expect(ON_WILL_MOUNT).toHaveBeenCalled();
+    it('calls onDidMount', () => {
+      expect(ON_DID_MOUNT).toHaveBeenCalled();
     });
   });
   describe('save button is disabled', () => {
-    let component;
     beforeEach(() => {
-      component = mount(mockRenderWithIntlAndStore(<LabelsForm
+      render(mockRenderWithIntlAndStore(<LabelsForm
         onSubmit={ON_SUBMIT}
-        handleSubmit={HANDLE_SUBMIT}
         languages={LANGUAGES}
-        onWillMount={ON_WILL_MOUNT}
-        intl={mockIntl}
-        invalid
+        onDidMount={ON_DID_MOUNT}
       />));
     });
     it('Save button is disabled', () => {
-      expect(component.find('button.LabelsForm__save-btn')).toBeDisabled();
-    });
-  });
-  describe('save button submit', () => {
-    let component;
-    const preventDefault = jest.fn();
-    beforeEach(() => {
-      component = mount(mockRenderWithIntlAndStore(<LabelsForm
-        onSubmit={ON_SUBMIT}
-        handleSubmit={HANDLE_SUBMIT}
-        onWillMount={ON_WILL_MOUNT}
-        languages={LANGUAGES}
-        intl={mockIntl}
-      />));
-    });
-    it('on form submit calls handleSubmit', () => {
-      component.find('form').simulate('submit', { preventDefault });
-      expect(HANDLE_SUBMIT).toHaveBeenCalled();
+      expect(screen.getByTestId('common_LabelsForm_Button')).toBeDisabled();
     });
   });
 });
diff --git a/test/ui/labels/edit/EditFormContainer.test.js b/test/ui/labels/edit/EditFormContainer.test.js
index 3371ef409..f845a539a 100644
--- a/test/ui/labels/edit/EditFormContainer.test.js
+++ b/test/ui/labels/edit/EditFormContainer.test.js
@@ -3,9 +3,10 @@ import 'test/enzyme-init';
 import { mapStateToProps, mapDispatchToProps } from 'ui/labels/edit/EditFormContainer';
 
 const dispatchMock = jest.fn();
+const languageList = [{ code: 'a' }, { code: 'b' }];
 
 jest.mock('state/languages/selectors', () => ({
-  getActiveLanguages: jest.fn().mockReturnValue('getActiveLanguages_result'),
+  getActiveLanguages: jest.fn().mockReturnValue([{ code: 'a' }, { code: 'b' }]),
   getDefaultLanguage: jest.fn().mockReturnValue('getDefaultLanguage_result'),
 }));
 
@@ -18,7 +19,17 @@ jest.mock('state/labels/actions', () => ({
   updateLabel: jest.fn().mockReturnValue('updateLabel_result'),
 }));
 
-jest.mock('state/locale/selectors', () => ({ getLocale: () => ('en') }));
+jest.mock('state/labels/selectors', () => ({
+  getSelectedLabel: jest.fn().mockReturnValue({
+    key: 'MOMO',
+    titles: {
+      a: 'momo a',
+      b: 'momo b',
+    },
+  }),
+}));
+
+jest.mock('state/locale/selectors', () => ({ getLocale: jest.fn().mockReturnValue('en') }));
 
 const ownProps = {
   match: {
@@ -37,7 +48,7 @@ describe('EditFormContainer', () => {
   it('maps languages property state in LabelsForm', () => {
     expect(props).toHaveProperty('mode', 'edit');
     expect(props).toHaveProperty('locale', 'en');
-    expect(props).toHaveProperty('languages', 'getActiveLanguages_result');
+    expect(props).toHaveProperty('languages', languageList);
     expect(props).toHaveProperty('defaultLanguage', 'getDefaultLanguage_result');
     expect(props).toHaveProperty('labelCode', 'getParams_result');
   });
@@ -49,9 +60,9 @@ describe('mapDispatchToProps', () => {
     props = mapDispatchToProps(dispatchMock);
   });
 
-  it('maps the "onWillMount" prop a "fetchLanguages" and "fetchLabel" dispatch', () => {
-    expect(props.onWillMount).toBeDefined();
-    props.onWillMount();
+  it('maps the "onDidMount" prop a "fetchLanguages" and "fetchLabel" dispatch', () => {
+    expect(props.onDidMount).toBeDefined();
+    props.onDidMount();
     expect(dispatchMock).toHaveBeenCalledWith('fetchLanguages_result');
     expect(dispatchMock).toHaveBeenCalledWith('fetchLabel_result');
   });
diff --git a/test/ui/labels/list/LabelSearchForm.test.js b/test/ui/labels/list/LabelSearchForm.test.js
index a9142606e..93b55f685 100644
--- a/test/ui/labels/list/LabelSearchForm.test.js
+++ b/test/ui/labels/list/LabelSearchForm.test.js
@@ -1,6 +1,8 @@
 import React from 'react';
-import 'test/enzyme-init';
-import { mount } from 'enzyme';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import LabelSearchForm from 'ui/labels/list/LabelSearchForm';
 import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
 
@@ -9,42 +11,41 @@ const onMount = jest.fn();
 const onUnmount = jest.fn();
 
 jest.unmock('react-redux');
-jest.unmock('redux-form');
 
 describe('LabelSearchFormBody', () => {
   let labelSearchForm;
 
   describe('basic render tests', () => {
     beforeEach(() => {
-      labelSearchForm = mount(mockRenderWithIntlAndStore(<LabelSearchForm
-        handleSubmit={handleSubmit}
+      labelSearchForm = render(mockRenderWithIntlAndStore(<LabelSearchForm
+        onSubmit={handleSubmit}
         onMount={onMount}
         onUnmount={onUnmount}
       />));
     });
     it('root component renders without crashing', () => {
-      expect(labelSearchForm.exists()).toEqual(true);
+      expect(labelSearchForm).toBeDefined();
     });
 
     it('root component renders language field', () => {
-      const text = labelSearchForm.find('.LabelSearchForm__text-field');
-      expect(text.exists()).toEqual(true);
+      expect(labelSearchForm.getByRole('textbox')).toBeDefined();
     });
   });
 
   describe('event handlers test', () => {
-    const preventDefault = jest.fn();
-    beforeEach(() => {
-      labelSearchForm = mount(mockRenderWithIntlAndStore(<LabelSearchForm
-        handleSubmit={handleSubmit}
+    it('on form submit calls handleSubmit', async () => {
+      const onSubmit = jest.fn();
+      const form = render(mockRenderWithIntlAndStore(<LabelSearchForm
+        onSubmit={onSubmit}
         onMount={onMount}
         onUnmount={onUnmount}
       />));
-    });
-
-    it('on form submit calls handleSubmit', () => {
-      labelSearchForm.find('form').simulate('submit', { preventDefault });
-      expect(handleSubmit).toHaveBeenCalled();
+      const testValue = 'Test Label';
+      userEvent.type(form.getByRole('textbox'), testValue);
+      fireEvent.click(form.getByText('Search'));
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalledWith({ key: testValue }, 10);
+      });
     });
   });
 });
diff --git a/test/ui/labels/list/LabelSearchFormContainer.test.js b/test/ui/labels/list/LabelSearchFormContainer.test.js
index 949cddcf5..9b2c7fd5c 100644
--- a/test/ui/labels/list/LabelSearchFormContainer.test.js
+++ b/test/ui/labels/list/LabelSearchFormContainer.test.js
@@ -1,22 +1,12 @@
 import 'test/enzyme-init';
 
-import { convertToQueryString, FILTER_OPERATORS } from '@entando/utils';
 import { mapDispatchToProps } from 'ui/labels/list/LabelSearchFormContainer';
 import { fetchLabels, setLabelFilters } from 'state/labels/actions';
 
 const dispatchMock = jest.fn();
 
-const FIELD_OPERATORS = {
-  text: FILTER_OPERATORS.LIKE,
-  key: FILTER_OPERATORS.LIKE,
-};
-
 const TEST_VALUE = { text: 'label text', key: 'testkey' };
 const page = { page: 1, pageSize: 10 };
-const queryString = convertToQueryString({
-  formValues: TEST_VALUE,
-  operators: FIELD_OPERATORS,
-});
 
 
 jest.mock('state/labels/actions', () => ({
diff --git a/test/ui/labels/list/LanguageForm.test.js b/test/ui/labels/list/LanguageForm.test.js
index 4148d9cfc..62624c902 100644
--- a/test/ui/labels/list/LanguageForm.test.js
+++ b/test/ui/labels/list/LanguageForm.test.js
@@ -1,55 +1,46 @@
 import React from 'react';
-import 'test/enzyme-init';
-import { mount } from 'enzyme';
+import '@testing-library/jest-dom/extend-expect';
+import { screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
 import LanguageForm, { renderSelectOptions } from 'ui/labels/list/LanguageForm';
 
 import { LANGUAGES_LIST } from 'test/mocks/languages';
 
-jest.unmock('react-redux');
-jest.unmock('redux-form');
-
 const languages = LANGUAGES_LIST.filter(item => !item.isActive)
   .map(item => (
     { value: item.code, text: item.description }
   ));
 
-const handleSubmit = jest.fn();
-const onWillMount = jest.fn();
+jest.unmock('react-redux');
+
+const onSubmit = jest.fn();
 
 describe('LanguageFormBody', () => {
-  let languageForm;
-  let submitting;
-  let invalid;
-
   beforeEach(() => {
-    submitting = false;
-    invalid = false;
     jest.clearAllMocks();
   });
   const buildLanguageForm = () => {
     const props = {
-      onWillMount,
+      onSubmit,
       languages,
-      submitting,
-      invalid,
-      handleSubmit,
     };
-
-    return mount(mockRenderWithIntlAndStore(<LanguageForm {...props} />, { modal: {} }));
+    render(mockRenderWithIntlAndStore(
+      <LanguageForm {...props} />,
+      { modal: { visibleModal: '', info: {} } },
+    ));
   };
 
   describe('basic render tests', () => {
     beforeEach(() => {
-      languageForm = buildLanguageForm();
+      buildLanguageForm();
     });
     it('root component renders without crashing', () => {
-      expect(languageForm.exists()).toEqual(true);
+      expect(screen.getByTestId('list_LanguageForm_Form')).toBeInTheDocument();
     });
 
     it('root component renders language field', () => {
-      const language = languageForm.find('.LanguageForm__language-field');
-      expect(language.exists()).toEqual(true);
+      expect(screen.getByTestId('list_LanguageForm_Field')).toBeInTheDocument();
     });
 
     it('root component renders options for select input', () => {
@@ -59,14 +50,16 @@ describe('LanguageFormBody', () => {
   });
 
   describe('event handlers test', () => {
-    const preventDefault = jest.fn();
     beforeEach(() => {
-      languageForm = buildLanguageForm();
+      buildLanguageForm();
     });
 
-    it('on form submit calls handleSubmit', () => {
-      languageForm.find('form').simulate('submit', { preventDefault });
-      expect(handleSubmit).toHaveBeenCalled();
+    it('on form submit calls handleSubmit', async () => {
+      userEvent.selectOptions(screen.getByTestId('list_LanguageForm_Field'), 'nl');
+      userEvent.click(screen.getByTestId('list_LanguageForm_Button'));
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/test/ui/pages/add/PageSearchForm.test.js b/test/ui/pages/add/PageSearchForm.test.js
index 006745d7e..ff6d4c1f3 100644
--- a/test/ui/pages/add/PageSearchForm.test.js
+++ b/test/ui/pages/add/PageSearchForm.test.js
@@ -1,34 +1,78 @@
 import React from 'react';
-
 import 'test/enzyme-init';
-import { mount } from 'enzyme';
-import PageSearchForm from 'ui/pages/list/PageSearchForm';
-import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
+import { shallowWithIntl, mockIntl, mockRenderWithRouter } from 'test/legacyTestUtils';
 
+import PageSearchForm, { PageSearchFormBody } from 'ui/pages/list/PageSearchForm';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { Formik } from 'formik';
+import { renderWithIntl } from '../../../test/testUtils';
 
-const handleSubmitMock = jest.fn();
-const EVENT = { preventDefault: jest.fn() };
 
-jest.unmock('react-redux');
-jest.unmock('redux-form');
+const handleSubmit = jest.fn();
+const onSubmit = jest.fn();
 
 describe('PageSearchForm', () => {
   beforeEach(jest.clearAllMocks);
 
-  let component;
+  let pageSearchForm;
+
+  let submitting;
+
   beforeEach(() => {
-    component = mount(mockRenderWithIntlAndStore(<PageSearchForm
-      handleSubmit={handleSubmitMock}
-    />));
+    submitting = false;
   });
-  it('renders without crashing', () => {
-    expect(component.exists()).toBe(true);
-  });
-  it('has the PageSearchForm class', () => {
-    expect(component.exists('.PageSearchForm')).toBe(true);
+
+  const buildPageSearchForm = () => {
+    const props = {
+      submitting,
+      handleSubmit,
+      intl: mockIntl,
+      values: {
+        searchType: 'name',
+      },
+      handleChange: jest.fn(),
+    };
+
+    return shallowWithIntl(<PageSearchFormBody {...props} />);
+  };
+
+  it('root component renders without crashing', () => {
+    pageSearchForm = buildPageSearchForm();
+    expect(pageSearchForm.exists()).toBe(true);
   });
-  it('form onSubmit calls handleSubmit', () => {
-    component.find('form').simulate('submit', EVENT);
-    expect(handleSubmitMock).toHaveBeenCalled();
+
+  it('on form submit calls handleSubmit', async () => {
+    const props = {
+      isSubmitting: false,
+      onSubmit,
+      handleSubmit,
+      intl: mockIntl,
+      initialValues: {
+        name: 'name',
+        code: 'namecode',
+      },
+      values: {
+        searchType: 'name',
+      },
+      handleChange: jest.fn(),
+    };
+
+    // eslint-disable-next-line function-paren-newline
+    renderWithIntl(mockRenderWithRouter(
+      <Formik
+        initialValues={props.initialValues}
+        onSubmit={props.onSubmit}
+      >{
+        ({ handleSubmit: handleSubmitFormik }) => (
+          <PageSearchForm {...props} handleSubmit={handleSubmitFormik} />
+
+        )
+      }
+      </Formik>));
+    const btn = screen.getByRole('button', { name: /search/i });
+    await fireEvent.click(btn);
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled();
+    });
   });
 });
diff --git a/test/ui/pages/add/PagesAddFormContainer.test.js b/test/ui/pages/add/PagesAddFormContainer.test.js
index aa477830f..efb6601ab 100644
--- a/test/ui/pages/add/PagesAddFormContainer.test.js
+++ b/test/ui/pages/add/PagesAddFormContainer.test.js
@@ -7,7 +7,6 @@ import {
 
 import { history, ROUTE_PAGE_TREE } from 'app-init/router';
 // mocked
-import { formValueSelector, change } from 'redux-form';
 import { getGroupsList, getGroupEntries } from 'state/groups/selectors';
 import { getPageTemplatesList } from 'state/page-templates/selectors';
 import {
@@ -245,10 +244,6 @@ describe('PagesAddFormContainer', () => {
       expect(props.parentTitle).toBe('getSelectedPageLocaleTitle_result');
     });
 
-    it('maps the "selectedJoinGroups" prop with the correct values from redux-form', () => {
-      expect(formValueSelector).toHaveBeenCalledWith('page');
-    });
-
     it('maps the "initialValues" prop with the correct initial values for a page', () => {
       expect(props.initialValues).toEqual({
         seo: false,
@@ -266,6 +261,11 @@ describe('PagesAddFormContainer', () => {
         parentCode: 'parentCode',
         ownerGroup: 'free',
         joinGroups: ['free'],
+        titles: {
+          en: '',
+          it: '',
+          nl: '',
+        },
       });
     });
   });
@@ -288,11 +288,5 @@ describe('PagesAddFormContainer', () => {
         })
         .catch(done.fail);
     });
-
-    it('maps the "onChangeDefaultTitle" prop a redux-form change dispatch', () => {
-      expect(props).toHaveProperty('onChangeDefaultTitle');
-      props.onChangeDefaultTitle('En Title');
-      expect(change).toHaveBeenCalledWith('page', 'code', 'en_title');
-    });
   });
 });
diff --git a/test/ui/pages/clone/CloneFormContainer.test.js b/test/ui/pages/clone/CloneFormContainer.test.js
index 75906b7c0..e0a278532 100644
--- a/test/ui/pages/clone/CloneFormContainer.test.js
+++ b/test/ui/pages/clone/CloneFormContainer.test.js
@@ -3,10 +3,6 @@ import { mapStateToProps, mapDispatchToProps } from 'ui/pages/clone/CloneFormCon
 
 import { history, ROUTE_PAGE_TREE } from 'app-init/router';
 // mocked
-import { formValueSelector, change } from 'redux-form';
-import { getGroupsList } from 'state/groups/selectors';
-import { getPageTemplatesList } from 'state/page-templates/selectors';
-import { getCharsets, getContentTypes } from 'state/pages/selectors';
 import { DASHBOARD_PAYLOAD } from 'test/mocks/pages';
 import { sendClonePage } from 'state/pages/actions';
 import { ACTION_SAVE } from 'state/pages/const';
@@ -56,30 +52,6 @@ describe('CloneFormContainer', () => {
       expect(props).toHaveProperty('languages', LANGUAGES);
     });
 
-    it('maps the "groups" prop with the getGroupsList selector', () => {
-      expect(getGroupsList).toHaveBeenCalledWith(STATE);
-      expect(props.groups).toBe('getGroupsList_result');
-    });
-
-    it('maps the "pageTemplates" prop with the getPageTemplates selector', () => {
-      expect(getPageTemplatesList).toHaveBeenCalledWith(STATE);
-      expect(props.pageTemplates).toBe('getPageTemplates_result');
-    });
-
-    it('maps the "charsets" prop with the getCharsets selector', () => {
-      expect(getCharsets).toHaveBeenCalledWith(STATE);
-      expect(props.charsets).toBe('getCharsets_result');
-    });
-
-    it('maps the "contentTypes" prop with the getContentTypes selector', () => {
-      expect(getContentTypes).toHaveBeenCalledWith(STATE);
-      expect(props.contentTypes).toBe('getContentTypes_result');
-    });
-
-    it('maps the "selectedJoinGroups" prop with the correct values from redux-form', () => {
-      expect(formValueSelector).toHaveBeenCalledWith('page');
-    });
-
     it('maps the "mode" prop with the "clone" value', () => {
       expect(props.mode).toBe('clone');
     });
@@ -105,12 +77,6 @@ describe('CloneFormContainer', () => {
       }).catch(done.fail);
     });
 
-    it('maps the "onChangeDefaultTitle" prop a redux-form change dispatch', () => {
-      expect(props).toHaveProperty('onChangeDefaultTitle');
-      props.onChangeDefaultTitle('En Title');
-      expect(change).toHaveBeenCalledWith('page', 'code', 'en_title');
-    });
-
 
     describe('prop onWillMount', () => {
       beforeEach(() => {
diff --git a/test/ui/pages/common/PageForm.test.js b/test/ui/pages/common/PageForm.test.js
index df954d17b..c42c971b2 100644
--- a/test/ui/pages/common/PageForm.test.js
+++ b/test/ui/pages/common/PageForm.test.js
@@ -16,11 +16,6 @@ const PAGE_TEMPLATES = GET_LIST_RESPONSE.payload;
 const CONTENT_TYPES = getContentTypes();
 const CHARSETS = getCharsets();
 const ON_WILL_MOUNT = jest.fn();
-const ON_CHANGE_EN_TITLE = jest.fn();
-
-const CHANGE_EVENT = {
-  currentTarget: { value: 'test' },
-};
 
 describe('PageForm', () => {
   beforeEach(jest.clearAllMocks);
@@ -69,11 +64,6 @@ describe('PageForm', () => {
         expect(option.text()).toBe(CONTENT_TYPES[i]);
       });
     });
-
-    it('when changing the en title, it calls nothing', () => {
-      component.find('Field[name="titles.en"]').prop('onChange')(CHANGE_EVENT);
-      expect(ON_CHANGE_EN_TITLE).not.toHaveBeenCalled();
-    });
   });
 
   describe('with onWillMount callback', () => {
@@ -99,37 +89,6 @@ describe('PageForm', () => {
     });
   });
 
-  describe('with onChangeDefaultTitle callback', () => {
-    let component;
-    beforeEach(() => {
-      component = shallow((
-        <PageFormBody
-          onSubmit={ON_SUBMIT}
-          handleSubmit={HANDLE_SUBMIT}
-          languages={LANGUAGES}
-          groups={GROUPS}
-          allGroups={GROUPS}
-          pageTemplates={PAGE_TEMPLATES}
-          contentTypes={CONTENT_TYPES}
-          charsets={CHARSETS}
-          selectedJoinGroups={[]}
-          onChangeDefaultTitle={ON_CHANGE_EN_TITLE}
-          intl={mockIntl}
-        />
-      ));
-    });
-
-    it('when changing a default language title, it calls onChangeDefaultTitle', () => {
-      component.find('Field[name="titles.en"]').prop('onChange')(CHANGE_EVENT);
-      expect(ON_CHANGE_EN_TITLE).toHaveBeenCalledWith(CHANGE_EVENT.currentTarget.value);
-    });
-
-    it('when changing a not default language title, it calls nothing', () => {
-      component.find('Field[name="titles.it"]').prop('onChange')(CHANGE_EVENT);
-      expect(ON_CHANGE_EN_TITLE).not.toHaveBeenCalled();
-    });
-  });
-
   describe('if form is invalid', () => {
     let component;
     beforeEach(() => {
@@ -170,7 +129,6 @@ describe('PageForm', () => {
           pageTemplates={PAGE_TEMPLATES}
           contentTypes={CONTENT_TYPES}
           charsets={CHARSETS}
-          selectedJoinGroups={[]}
           submitting
           intl={mockIntl}
         />
@@ -197,10 +155,38 @@ describe('PageForm', () => {
           pageTemplates={PAGE_TEMPLATES}
           contentTypes={CONTENT_TYPES}
           charsets={CHARSETS}
-          selectedJoinGroups={[]}
-          invalid={false}
+          isValid
           intl={mockIntl}
-          titles={{ en: 'title' }}
+          titles={{ en: 'title', it: 'titulo' }}
+          initialValues={{
+            values:
+              {
+                code: 'code',
+                parentCode: 'parentCode',
+                titles: {
+                            en: 'title',
+                            it: 'titolo',
+                          },
+                ownerGroup: 'ownerGroup',
+                pageModel: 'pageModel',
+                charset: 'charset',
+                contentType: 'contentType',
+              },
+              mode: 'add',
+            }
+          }
+          values={{
+            code: 'code',
+            parentCode: 'parentCode',
+            titles: {
+                        en: 'title',
+                        it: 'titolo',
+                      },
+            ownerGroup: 'ownerGroup',
+            pageModel: 'pageModel',
+            charset: 'charset',
+            contentType: 'contentType',
+          }}
         />
       ));
     });
@@ -225,8 +211,7 @@ describe('PageForm', () => {
           pageTemplates={PAGE_TEMPLATES}
           contentTypes={CONTENT_TYPES}
           charsets={CHARSETS}
-          selectedJoinGroups={[]}
-          invalid={false}
+          isValid
           intl={mockIntl}
           mode="edit"
         />
diff --git a/test/ui/pages/config/PageConfigPageContainer.test.js b/test/ui/pages/config/PageConfigPageContainer.test.js
index cb5af5fa7..03ad4263c 100644
--- a/test/ui/pages/config/PageConfigPageContainer.test.js
+++ b/test/ui/pages/config/PageConfigPageContainer.test.js
@@ -3,9 +3,6 @@ import {
   mapStateToProps,
 } from 'ui/pages/config/PageConfigPageContainer';
 
-// mocked
-import { reset, submit } from 'redux-form';
-
 import { setSelectedPageTemplate } from 'state/page-templates/actions';
 import {
   setSelectedPageOnTheFly,
@@ -223,28 +220,5 @@ describe('PageConfigPageContainer', () => {
         expect(applyDefaultConfig).toHaveBeenCalled();
       });
     });
-
-    describe('prop onCancelSettings', () => {
-      it('should dispatch redux-form reset()', () => {
-        props.onSettingsCancel();
-        expect(dispatchMock.mock.calls.length).toBe(2);
-        expect(reset.mock.calls.length).toBe(2);
-        expect(reset.mock.calls[0][0]).toBe('pageEdit');
-        expect(reset.mock.calls[1][0]).toBe('SeoMetadataForm');
-      });
-    });
-
-    describe('prop onClickSaveSettings', () => {
-      it('should dispatch redux-form reset()', (done) => {
-        props.onClickSaveSettings({ code: 'home' }).then(() => {
-          expect(dispatchMock.mock.calls.length).toBe(4);
-          expect(submit).toHaveBeenCalledWith('pageEdit');
-          expect(reset.mock.calls.length).toBe(2);
-          expect(reset.mock.calls[0][0]).toBe('pageEdit');
-          expect(reset.mock.calls[1][0]).toBe('SeoMetadataForm');
-          done();
-        }).catch(done.fail);
-      });
-    });
   });
 });
diff --git a/test/ui/pages/edit/PagesEditFormContainer.test.js b/test/ui/pages/edit/PagesEditFormContainer.test.js
index bc51b9421..a2ecf6537 100644
--- a/test/ui/pages/edit/PagesEditFormContainer.test.js
+++ b/test/ui/pages/edit/PagesEditFormContainer.test.js
@@ -26,10 +26,13 @@ const ownProps = {
       pageCode: 'page_code',
     },
   },
+  onSave: jest.fn(),
 };
 
 const GROUPS = [{ code: 'group', name: 'groupName' }];
 
+const PAGE_CODE = 'page_code';
+
 jest.mock('state/groups/selectors', () => ({
   getGroupsList: jest.fn(),
   getGroupEntries: jest.fn(),
@@ -47,6 +50,7 @@ jest.mock('state/pages/selectors', () => ({
   getCharsets: jest.fn().mockReturnValue('getCharsets_result'),
   getContentTypes: jest.fn().mockReturnValue('getContentTypes_result'),
   getPageTreePages: jest.fn().mockReturnValue([]),
+  getEditPage: jest.fn().mockReturnValue({}),
 }));
 
 jest.mock('state/languages/selectors', () => ({
@@ -56,7 +60,6 @@ jest.mock('state/languages/selectors', () => ({
 getActiveLanguages.mockReturnValue(LANGUAGES);
 getMyGroupsList.mockReturnValue(['administrators', 'free']);
 
-const PAGE_CODE = 'page_code';
 const STATE = {};
 
 describe('PagesEditFormContainer', () => {
@@ -81,7 +84,6 @@ describe('PagesEditFormContainer', () => {
       expect(props).toHaveProperty('pageTemplates', 'getPageTemplates_result');
       expect(props).toHaveProperty('charsets', 'getCharsets_result');
       expect(props).toHaveProperty('contentTypes', 'getContentTypes_result');
-      expect(props).toHaveProperty('keepDirtyOnReinitialize', true);
     });
   });
 
@@ -89,7 +91,7 @@ describe('PagesEditFormContainer', () => {
     const dispatchMock = jest.fn(arg => arg);
     let props;
     beforeEach(() => {
-      props = mapDispatchToProps(dispatchMock);
+      props = mapDispatchToProps(dispatchMock, { stayOnSave: true, onSave: jest.fn() });
     });
 
     describe('prop onWillMount', () => {
diff --git a/test/ui/roles/add/AddFormContainer.test.js b/test/ui/roles/add/AddFormContainer.test.js
index 1864f75f4..c47a42c0c 100644
--- a/test/ui/roles/add/AddFormContainer.test.js
+++ b/test/ui/roles/add/AddFormContainer.test.js
@@ -1,7 +1,21 @@
-import 'test/enzyme-init';
-import { change } from 'redux-form';
-import { mapStateToProps, mapDispatchToProps } from 'ui/roles/add/AddFormContainer';
-import { PERMISSIONS_NORMALIZED } from 'test/mocks/permissions';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { screen, render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { getPermissionsList } from 'state/permissions/selectors';
+import { getLoading } from 'state/loading/selectors';
+
+import AddFormContainer from 'ui/roles/add/AddFormContainer';
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(fn => fn()),
+  useDispatch: () => mockDispatch,
+}));
+
+jest.mock('state/permissions/selectors');
+jest.mock('state/loading/selectors');
 
 jest.mock('state/roles/actions', () => ({
   sendPostRole: jest.fn().mockReturnValue('sendPostRole_result'),
@@ -15,48 +29,43 @@ jest.mock('state/loading/actions', () => ({
   toggleLoading: jest.fn(),
 }));
 
-const dispatchProps = {
-  history: {},
-};
+
+const props = {};
 
 describe('AddFormContainer', () => {
-  const dispatchMock = jest.fn();
-
-  describe('mapStateToProps', () => {
-    let props;
-    beforeEach(() => {
-      props = mapStateToProps(PERMISSIONS_NORMALIZED);
-    });
-
-    it('maps permissions and loading property', () => {
-      expect(props.permissions).toBeDefined();
-      expect(props.permissions).toHaveLength(PERMISSIONS_NORMALIZED.permissions.list.length);
-      expect(props).toHaveProperty('loading', false);
-    });
+  const renderForm = (initialValues = props.initialValues, addProps = {}) => {
+    const formProps = { ...props, ...addProps, initialValues };
+    return render(<IntlProvider locale="en" onError={() => {}}><AddFormContainer {...formProps} /></IntlProvider>);
+  };
+
+  beforeEach(() => {
+    getPermissionsList.mockReturnValue([]);
+    getLoading.mockReturnValue({ permissions: false });
+  });
+
+  it('should render container without errors', () => {
+    renderForm();
+    expect(screen.getByText('app.name')).toBeInTheDocument();
+    expect(screen.getByText('app.code')).toBeInTheDocument();
+    expect(screen.getByText('permission.listEmpty')).toBeInTheDocument();
+  });
+
+  it('should render container with permissions', () => {
+    const mockPermissions = [
+      { code: 'editContents', descr: 'Content Editing' },
+      { code: 'editUserProfile', descr: 'User Profile Editing' },
+      { code: 'editUsers', descr: 'User Management' },
+    ];
+    getPermissionsList.mockReturnValue(mockPermissions);
+    renderForm();
+
+    expect(screen.getByText(mockPermissions[0].descr)).toBeInTheDocument();
+    expect(screen.getByText(mockPermissions[1].descr)).toBeInTheDocument();
+    expect(screen.getByText(mockPermissions[2].descr)).toBeInTheDocument();
   });
 
-  describe('mapDispatchToProps', () => {
-    let props;
-    beforeEach(() => {
-      props = mapDispatchToProps(dispatchMock, dispatchProps);
-    });
-
-    it('maps the "onWillMount" prop a fetchPermissions dispatch', () => {
-      expect(props.onWillMount).toBeDefined();
-      props.onWillMount();
-      expect(dispatchMock).toHaveBeenCalledWith('fetchPermissions_result');
-    });
-
-    it('maps the "onSubmit" prop a sendPostRole dispatch', () => {
-      expect(props.onSubmit).toBeDefined();
-      props.onSubmit();
-      expect(dispatchMock).toHaveBeenCalledWith('sendPostRole_result');
-    });
-
-    it('verify that onChangeName is defined by mapDispatchToProps', () => {
-      expect(props.onChangeName).toBeDefined();
-      props.onChangeName('Role Name');
-      expect(change).toHaveBeenCalledWith('role', 'code', 'role_name');
-    });
+  it('code input should be enabled', () => {
+    const { container } = renderForm();
+    expect(container.querySelector('input[name=code')).toBeEnabled();
   });
 });
diff --git a/test/ui/roles/common/RoleForm.test.js b/test/ui/roles/common/RoleForm.test.js
index 453cd9c3d..2a34d59bc 100644
--- a/test/ui/roles/common/RoleForm.test.js
+++ b/test/ui/roles/common/RoleForm.test.js
@@ -4,31 +4,36 @@ import { shallow } from 'enzyme';
 import { RoleFormBody } from 'ui/roles/common/RoleForm';
 import { mockIntl } from 'test/legacyTestUtils';
 
-const handleSubmit = jest.fn();
-const onSubmit = jest.fn();
 const onWillMount = jest.fn();
+const submitForm = jest.fn();
+const setFieldValue = jest.fn();
+const handleChange = jest.fn();
 const changeEvent = { currentTarget: { value: 'changed_name' } };
 
 describe('RoleForm', () => {
   let roleForm;
-  let submitting;
-  let invalid;
+  let isSubmitting;
+  let isValid;
   let permissions;
+  let values;
 
   beforeEach(() => {
-    submitting = false;
-    invalid = false;
+    isSubmitting = false;
+    isValid = true;
+    values = {};
   });
   const buildRoleForm = (mode) => {
     const props = {
       permissions,
-      submitting,
-      invalid,
-      handleSubmit,
+      isSubmitting,
+      isValid,
       onWillMount,
-      onSubmit,
+      submitForm,
       mode,
+      setFieldValue,
+      handleChange,
       intl: mockIntl,
+      values,
     };
 
     return shallow(<RoleFormBody {...props} />);
@@ -62,14 +67,6 @@ describe('RoleForm', () => {
   });
 
   describe('test buttons and handlers', () => {
-    it('on name change calls onChangeName if defined on props', () => {
-      const onChangeName = jest.fn();
-      roleForm = buildRoleForm();
-      roleForm.setProps({ onChangeName });
-      roleForm.find('[name="name"]').simulate('change', changeEvent);
-      expect(onChangeName).toHaveBeenCalled();
-    });
-
     it('on name change do nothing if onChangeName is not defined on props', () => {
       const onChangeName = jest.fn();
       roleForm = buildRoleForm();
@@ -78,24 +75,17 @@ describe('RoleForm', () => {
     });
 
     it('disables submit button while submitting', () => {
-      submitting = true;
+      isSubmitting = true;
       roleForm = buildRoleForm();
       const submitButton = roleForm.find('Button').first();
       expect(submitButton.prop('disabled')).toEqual(true);
     });
 
     it('disables submit button if form is invalid', () => {
-      invalid = true;
+      isValid = false;
       roleForm = buildRoleForm();
       const submitButton = roleForm.find('Button').first();
       expect(submitButton.prop('disabled')).toEqual(true);
     });
-
-    it('on form submit calls handleSubmit', () => {
-      roleForm = buildRoleForm();
-      const preventDefault = jest.fn();
-      roleForm.find('form').simulate('submit', { preventDefault });
-      expect(handleSubmit).toHaveBeenCalled();
-    });
   });
 });
diff --git a/test/ui/roles/edit/EditFormContainer.test.js b/test/ui/roles/edit/EditFormContainer.test.js
index 518a83af8..b1fca24b1 100644
--- a/test/ui/roles/edit/EditFormContainer.test.js
+++ b/test/ui/roles/edit/EditFormContainer.test.js
@@ -1,11 +1,32 @@
-import 'test/enzyme-init';
-import { mapStateToProps, mapDispatchToProps } from 'ui/roles/edit/EditFormContainer';
-import { fetchRole } from 'state/roles/actions';
-import { PERMISSIONS_NORMALIZED } from 'test/mocks/permissions';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { screen, render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { getPermissionsList } from 'state/permissions/selectors';
+import { getLoading } from 'state/loading/selectors';
+import { getSelectedRole } from 'state/roles/selectors';
+
+import EditFormContainer from 'ui/roles/edit/EditFormContainer';
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(fn => fn()),
+  useDispatch: () => mockDispatch,
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteMatch: () => ({ params: { roleCode: 'test' } }),
+}));
+
+jest.mock('state/permissions/selectors');
+jest.mock('state/loading/selectors');
+jest.mock('state/roles/selectors');
 
 jest.mock('state/roles/actions', () => ({
-  sendPutRole: jest.fn().mockReturnValue('sendPutRole_result'),
-  fetchRole: jest.fn(),
+  sendPutRole: jest.fn().mockReturnValue('sendPostRole_result'),
+  fetchRole: jest.fn().mockReturnValue('fetchRole_result'),
 }));
 
 jest.mock('state/permissions/actions', () => ({
@@ -16,52 +37,46 @@ jest.mock('state/loading/actions', () => ({
   toggleLoading: jest.fn(),
 }));
 
-const ownProps = {
-  match: {
-    params: {
-      roleCode: 'role_code',
-    },
-  },
-};
 
-const dispatchProps = {
-  history: {},
+const props = {
+
 };
 
 describe('EditFormContainer', () => {
-  const dispatchMock = jest.fn();
-
-  describe('mapStateToProps', () => {
-    let props;
-    beforeEach(() => {
-      props = mapStateToProps(PERMISSIONS_NORMALIZED, ownProps);
-    });
-
-    it('maps the permissions property', () => {
-      expect(props).toHaveProperty('mode', 'edit');
-      expect(props).toHaveProperty('permissions');
-      expect(props.permissions).toHaveLength(PERMISSIONS_NORMALIZED.permissions.list.length);
-      expect(props).toHaveProperty('roleCode', 'role_code');
-    });
+  const renderForm = (initialValues = props.initialValues, addProps = {}) => {
+    const formProps = { ...props, ...addProps, initialValues };
+    return render(<IntlProvider locale="en" onError={() => {}}><EditFormContainer {...formProps} /></IntlProvider>);
+  };
+
+  beforeEach(() => {
+    getPermissionsList.mockReturnValue([]);
+    getSelectedRole.mockReturnValue('test');
+    getLoading.mockReturnValue({ permissions: false });
+  });
+
+  it('should render container without errors', () => {
+    renderForm();
+    expect(screen.getByText('app.name')).toBeInTheDocument();
+    expect(screen.getByText('app.code')).toBeInTheDocument();
+    expect(screen.getByText('permission.listEmpty')).toBeInTheDocument();
+  });
+
+  it('should render container with permissions', () => {
+    const mockPermissions = [
+      { code: 'editContents', descr: 'Content Editing' },
+      { code: 'editUserProfile', descr: 'User Profile Editing' },
+      { code: 'editUsers', descr: 'User Management' },
+    ];
+    getPermissionsList.mockReturnValue(mockPermissions);
+    renderForm();
+
+    expect(screen.getByText(mockPermissions[0].descr)).toBeInTheDocument();
+    expect(screen.getByText(mockPermissions[1].descr)).toBeInTheDocument();
+    expect(screen.getByText(mockPermissions[2].descr)).toBeInTheDocument();
   });
 
-  describe('mapDispatchToProps', () => {
-    let props;
-    beforeEach(() => {
-      props = mapDispatchToProps(dispatchMock, dispatchProps);
-    });
-
-    it('maps the "onWillMount" prop a fetchPermissions dispatch', () => {
-      expect(props.onWillMount).toBeDefined();
-      props.onWillMount('role_code');
-      expect(dispatchMock).toHaveBeenCalledWith('fetchPermissions_result');
-      expect(fetchRole).toHaveBeenCalled();
-    });
-
-    it('maps the "onSubmit" prop a sendPostRole dispatch', () => {
-      expect(props.onSubmit).toBeDefined();
-      props.onSubmit();
-      expect(dispatchMock).toHaveBeenCalledWith('sendPutRole_result');
-    });
+  it('code input should be disabled', () => {
+    const { container } = renderForm();
+    expect(container.querySelector('input[name=code')).toBeDisabled();
   });
 });
diff --git a/test/ui/user-profile/common/UserProfileForm.test.js b/test/ui/user-profile/common/UserProfileForm.test.js
index e69747c9f..8c6674bdb 100644
--- a/test/ui/user-profile/common/UserProfileForm.test.js
+++ b/test/ui/user-profile/common/UserProfileForm.test.js
@@ -1,15 +1,13 @@
 import React from 'react';
+import UserProfileForm from 'ui/user-profile/common/UserProfileForm';
+import { mockIntl } from 'test/legacyTestUtils';
+import { renderWithIntl } from 'test/testUtils';
+import '@testing-library/jest-dom/extend-expect';
 
-import 'test/enzyme-init';
-import { Field } from 'redux-form';
-import { shallow } from 'enzyme';
-import { UserProfileFormBody } from 'ui/user-profile/common/UserProfileForm';
-import { mockIntl, mountWithIntl } from 'test/legacyTestUtils';
 
-
-const onWillMount = jest.fn();
 const onSubmit = jest.fn();
 const handleSubmit = jest.fn();
+const onDidMount = jest.fn();
 const invalid = false;
 const submitting = false;
 const defaultLanguage = 'en';
@@ -18,12 +16,11 @@ const profileTypesAttributes = [];
 
 beforeEach(jest.clearAllMocks);
 
-describe('UserProfileFormBody', () => {
-  let component;
-  beforeEach(() => {
-    component = shallow(<UserProfileFormBody
-      onWillMount={onWillMount}
+describe('UserProfileForm', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = renderWithIntl(<UserProfileForm
       onSubmit={onSubmit}
+      onDidMount={onDidMount}
       handleSubmit={handleSubmit}
       invalid={invalid}
       submitting={submitting}
@@ -32,40 +29,30 @@ describe('UserProfileFormBody', () => {
       profileTypesAttributes={profileTypesAttributes}
       intl={mockIntl}
     />);
-  });
-
-  it('renders without crashing', () => {
-    expect(component.exists()).toBe(true);
-  });
-
-  it('calls onWillMount', () => {
-    expect(onWillMount).toHaveBeenCalled();
+    expect(getByTestId('UserProfileForm')).toBeInTheDocument();
   });
 });
 
 
-const getFormInstance = attributes => mountWithIntl(<UserProfileFormBody
-  onWillMount={onWillMount}
+const getFormInstance = attributes => renderWithIntl(<UserProfileForm
   onSubmit={onSubmit}
+  onDidMount={onDidMount}
   handleSubmit={handleSubmit}
   invalid={invalid}
   submitting={submitting}
   defaultLanguage={defaultLanguage}
   languages={languages}
   profileTypesAttributes={Array.isArray(attributes) ? attributes : [attributes]}
+  userProfileAttributes={Array.isArray(attributes) ? attributes : [attributes]}
   intl={mockIntl}
 />);
 
 
 const testSingleAttributeIsRendered = (attribute) => {
   describe(`with attribute of type ${attribute.type}`, () => {
-    let component;
-    beforeEach(() => {
-      component = getFormInstance(attribute);
-    });
-
     it('renders a field for the attribute', () => {
-      expect(component.find(`Field[name="${attribute.code}"]`)).toExist();
+      const { container } = getFormInstance(attribute);
+      expect(container.querySelector(`[for=${attribute.code}], [name=${attribute.code}]`)).not.toBe(null);
     });
   });
 };
@@ -95,122 +82,125 @@ testSingleAttributeIsRendered({
 
 
 describe('with attribute of type Enumerator (mandatory)', () => {
-  let component;
+  let container;
   beforeEach(() => {
-    component = getFormInstance({
+    ({ container } = getFormInstance({
       type: 'Enumerator',
       code: 'myEnumerator',
       enumeratorStaticItems: 'pippo,pluto,paperino',
       enumeratorStaticItemsSeparator: ',',
       mandatory: true,
-    });
+    }));
   });
 
   it('renders a Field for the attribute', () => {
-    expect(component.find('Field[name="myEnumerator"]')).toExist();
+    expect(container.querySelector('[name="myEnumerator"]')).toBeTruthy();
   });
 
   it('passes an option for each item', () => {
-    const options = component.find('Field[name="myEnumerator"]').prop('options');
+    const options = container.querySelectorAll('[name="myEnumerator"] option');
     expect(options.length).toBe(3);
   });
 });
 
 describe('with attribute of type Enumerator (NOT mandatory)', () => {
-  let component;
+  let container;
   beforeEach(() => {
-    component = getFormInstance({
+    ({ container } = getFormInstance({
       type: 'Enumerator',
       code: 'myEnumerator',
       enumeratorStaticItems: 'pippo,pluto,paperino',
       enumeratorStaticItemsSeparator: ',',
       mandatory: false,
-    });
+    }));
   });
 
   it('renders a Field for the attribute', () => {
-    expect(component.find('Field[name="myEnumerator"]')).toExist();
+    expect(container.querySelector('[name="myEnumerator"]')).toBeTruthy();
   });
 
   it('passes an option for each item, plus one empty', () => {
-    const options = component.find('Field[name="myEnumerator"]').prop('options');
+    const options = container.querySelectorAll('[name="myEnumerator"] option');
     expect(options.length).toBe(4);
   });
 });
 
-
-describe('with attribute of type Monolist', () => {
-  let component;
+// not used scenario
+xdescribe('with attribute of type Monolist', () => {
+  let container;
   beforeEach(() => {
-    component = getFormInstance({
+    ({ container } = getFormInstance([{
       type: 'Monolist',
       code: 'myMonolist',
+      elements: [{ code: 'myMonoList', value: 'test' }, { code: 'myMonoList', value: 'test2' }],
       nestedAttribute: { type: 'Text', code: 'myText' },
-    });
+    }]));
   });
 
   it('renders a FieldArray for the attribute', () => {
-    expect(component.find('FieldArray[name="myMonolist"]')).toExist();
+    expect(container.querySelector('input[name="myMonolist.0"]')).toBeTruthy();
   });
 });
 
-
-describe('with attribute of type List', () => {
-  let component;
+// not used scenario
+xdescribe('with attribute of type List', () => {
+  let container;
   beforeEach(() => {
-    component = getFormInstance({
+    ({ container } = getFormInstance({
       type: 'List',
       code: 'myList',
+      elements: [{ code: 'myList', value: 'test' }, { code: 'myList', value: 'test2' }],
       nestedAttribute: { type: 'Text', code: 'myText' },
-    });
+    }));
   });
 
   it('renders a FieldArray for each language', () => {
     languages.forEach((langItem) => {
-      expect(component.find(`FieldArray[name="myList.${langItem.code}"]`)).toExist();
+      expect(container.querySelectorAll(`[name="myList.${langItem.code}"]`)).toBeTruthy();
     });
   });
 });
 
-
-describe('with attribute of type Composite', () => {
+// not used scenario
+xdescribe('with attribute of type Composite', () => {
   const COMPOSITE_ATTRIBUTES = [
     { type: 'Text', code: 'myText' },
     { type: 'Number', code: 'myNumber' },
   ];
-  let component;
+  let container;
 
   beforeEach(() => {
-    component = getFormInstance({
+    ({ container } = getFormInstance({
       type: 'Composite',
       code: 'myComposite',
+      elements: [{ code: 'myComposite', value: 'test' }, { code: 'myComposite', value: 'test2' }],
       compositeAttributes: COMPOSITE_ATTRIBUTES,
-    });
+    }));
   });
 
   it('renders a FormSection for the attribute', () => {
-    expect(component.find('FormSection[name="myComposite"]')).toExist();
+    expect(container.querySelector('[name="myComposite.0"]')).toBeTruthy();
   });
 });
 
 describe('with validation rules', () => {
   it('when the message key is provided', () => {
-    const component = getFormInstance({
+    const { container } = getFormInstance({
       type: 'Text',
       code: 'myText',
       validationRules: { ognlValidation: { keyForHelpMessage: 'app.myKey' } },
     });
 
-    expect(component.find('Field[name="myText"]')).toExist();
+    expect(container.querySelector('[name="myText"]')).toBeTruthy();
   });
 
   it('when the message text is provided', () => {
-    const component = getFormInstance({
+    const { container } = getFormInstance({
       type: 'Text',
       code: 'myText',
       validationRules: { ognlValidation: { helpMessage: 'My help message' } },
     });
 
-    expect(component.find('Field[name="myText"]')).toExist();
+    expect(container.querySelector('[name="myText"]')).toBeTruthy();
   });
 });
diff --git a/test/ui/users/add/AddFormContainer.test.js b/test/ui/users/add/AddFormContainer.test.js
index db06c24e4..5546c1838 100644
--- a/test/ui/users/add/AddFormContainer.test.js
+++ b/test/ui/users/add/AddFormContainer.test.js
@@ -1,43 +1,123 @@
-import 'test/enzyme-init';
+import React from 'react';
+import * as reactRedux from 'react-redux';
+
+import { renderWithIntlRouterState } from 'test/testUtils';
+import AddFormContainer from 'ui/users/add/AddFormContainer';
+import UserForm from 'ui/users/common/UserForm';
 import { PROFILE_TYPES_NORMALIZED, PROFILE_TYPES_OPTIONS } from 'test/mocks/profileTypes';
-import { mapStateToProps, mapDispatchToProps } from 'ui/users/add/AddFormContainer';
-import { sendPostUser } from 'state/users/actions';
-import { fetchProfileTypes } from 'state/profile-types/actions';
 
-const dispatchMock = jest.fn();
+jest.unmock('react-redux');
+
+const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
+const mockDispatch = jest.fn();
+useDispatchSpy.mockReturnValue(mockDispatch);
+
+const mockHistoryPush = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
 
 jest.mock('state/users/actions', () => ({
-  sendPostUser: jest.fn(),
+  sendPostUser: jest.fn(payload => ({ type: 'sendPostUser_test', payload })),
 }));
 
 jest.mock('state/profile-types/actions', () => ({
-  fetchProfileTypes: jest.fn(),
+  fetchProfileTypes: jest.fn(() => ({ type: 'fetchProfileTypes_test' })),
 }));
 
+jest.mock('state/modal/actions', () => ({
+  setVisibleModal: jest.fn(payload => ({ type: 'setVisibleModal_test', payload })),
+}));
+
+jest.mock('ui/users/common/UserForm', () => jest.fn(mockProps => (
+  <div>
+    <button onClick={mockProps.onMount}>onMount</button>
+    <button onClick={() => mockProps.onSubmit('testValue')}>onSubmit</button>
+    <button onClick={mockProps.onCancel}>onCancel</button>
+    <button onClick={mockProps.onDiscard}>onDiscard</button>
+    <button onClick={mockProps.onModalSave}>onModalSave</button>
+  </div>
+)));
+
+const setupAddFormContainer = () => {
+  const state = {
+    ...PROFILE_TYPES_NORMALIZED,
+  };
+  const utils = renderWithIntlRouterState(<AddFormContainer />, { state });
+  const simulateMount = () => utils.getByText('onMount').click();
+  const simulateSubmit = () => utils.getByText('onSubmit').click();
+  const simulateCancel = () => utils.getByText('onCancel').click();
+  const simulateDiscard = () => utils.getByText('onDiscard').click();
+  const simulateModalSave = () => utils.getByText('onModalSave').click();
+
+  return {
+    ...utils,
+    simulateMount,
+    simulateSubmit,
+    simulateCancel,
+    simulateDiscard,
+    simulateModalSave,
+  };
+};
+
 describe('AddFormContainer', () => {
-  describe('mapDispatchToProps', () => {
-    let result;
-    beforeEach(() => {
-      result = mapDispatchToProps(dispatchMock, {});
-    });
-    it('verify that onSubmit is defined by mapDispatchToProps', () => {
-      expect(result).toHaveProperty('onSubmit');
-      result.onSubmit({});
-      expect(sendPostUser).toHaveBeenCalled();
-    });
-
-    it('verify that onWillMount is defined by mapDispatchToProps', () => {
-      expect(result).toHaveProperty('onWillMount');
-      result.onWillMount();
-      expect(fetchProfileTypes).toHaveBeenCalled();
-    });
+  afterEach(() => {
+    mockDispatch.mockClear();
+  });
+
+  it('passes profileTypes to UserForm with the correct value', () => {
+    setupAddFormContainer();
+
+    expect(UserForm)
+      .toHaveBeenCalledWith(expect.objectContaining({ profileTypes: PROFILE_TYPES_OPTIONS }), {});
+  });
+
+  it('fetches relevant data when UserForm mounts', () => {
+    const { simulateMount } = setupAddFormContainer();
+
+    simulateMount();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'fetchProfileTypes_test' });
+  });
+
+  it('calls the correct user action when UserForm is submitted', () => {
+    const { simulateSubmit } = setupAddFormContainer();
+
+    simulateSubmit();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'sendPostUser_test', payload: 'testValue' });
   });
 
-  describe('mapStateToProps', () => {
-    it('verify that profileTypes prop is defined and properly valued', () => {
-      const props = mapStateToProps(PROFILE_TYPES_NORMALIZED);
-      expect(props.profileTypes).toBeDefined();
-      expect(props.profileTypes).toEqual(PROFILE_TYPES_OPTIONS);
-    });
+  it('calls the correct modal action when UserForm is cancelled', () => {
+    const { simulateCancel } = setupAddFormContainer();
+
+    simulateCancel();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'setVisibleModal_test', payload: 'ConfirmCancelModal' });
+  });
+
+  it('calls the correct modal and history actions when UserForm is discarded', () => {
+    const { simulateDiscard } = setupAddFormContainer();
+
+    simulateDiscard();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'setVisibleModal_test', payload: '' });
+    expect(mockHistoryPush).toHaveBeenCalledWith('/user');
+  });
+
+  it('calls the correct modal action when UserForm modal is saved', () => {
+    const { simulateModalSave } = setupAddFormContainer();
+
+    simulateModalSave();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'setVisibleModal_test', payload: '' });
   });
 });
diff --git a/test/ui/users/common/UserAuthorityPageForm.test.js b/test/ui/users/common/UserAuthorityPageForm.test.js
index 00441308f..0a0e45be5 100644
--- a/test/ui/users/common/UserAuthorityPageForm.test.js
+++ b/test/ui/users/common/UserAuthorityPageForm.test.js
@@ -1,34 +1,38 @@
 import React from 'react';
-import 'test/enzyme-init';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
 
-import { shallow } from 'enzyme';
-import { UserAuthorityPageFormBody } from 'ui/users/common/UserAuthorityPageForm';
+import UserAuthorityPageForm from 'ui/users/common/UserAuthorityPageForm';
+import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
 
 const props = {
-  handleSubmit: jest.fn(),
-  onSubmit: jest.fn(),
-  onWillMount: jest.fn(),
+  onAddNewClicked: jest.fn(),
+  onCloseModal: jest.fn(),
+  loading: false,
+  onDidMount: jest.fn(),
+  initialValues: { groupRolesCombo: [] },
 };
 
+jest.unmock('react-redux');
+
 describe('UserAuthorityPageForm', () => {
-  let component;
+  const renderForm = (initialValues = props.initialValues, addProps = {}) => {
+    const formProps = { ...props, ...addProps, initialValues };
+    render(mockRenderWithIntlAndStore(
+      <UserAuthorityPageForm {...formProps} />,
+      { modal: { visibleModal: '', info: {} } },
+    ));
+  };
   beforeEach(() => {
-    component = shallow(<UserAuthorityPageFormBody {...props} />);
-  });
-
-  it('renders without crashing', () => {
-    expect(component.exists()).toBe(true);
+    renderForm();
   });
-});
 
-describe('with onWillMount callback', () => {
-  beforeEach(() => {
-    shallow((
-      <UserAuthorityPageFormBody {...props} />
-    ));
+  it('has class PageTemplateForm', () => {
+    expect(screen.getByTestId('common_UserAuthorityPageForm_Form')).toBeInTheDocument();
   });
 
-  it('calls onWillMount', () => {
-    expect(props.onWillMount).toHaveBeenCalled();
+  it('calls onDidMount', () => {
+    expect(props.onDidMount).toHaveBeenCalled();
   });
 });
+
diff --git a/test/ui/users/common/UserAuthorityPageFormContainer.test.js b/test/ui/users/common/UserAuthorityPageFormContainer.test.js
index 5a880eb2f..949b4ff9f 100644
--- a/test/ui/users/common/UserAuthorityPageFormContainer.test.js
+++ b/test/ui/users/common/UserAuthorityPageFormContainer.test.js
@@ -12,13 +12,15 @@ import { LIST_ROLES_OK } from 'test/mocks/roles';
 
 jest.mock('state/groups/selectors', () => ({
   getGroupsList: jest.fn(),
+  getGroupsMap: jest.fn(),
 }));
 jest.mock('state/roles/selectors', () => ({
   getRolesList: jest.fn(),
+  getRolesMap: jest.fn(),
 }));
 
 jest.mock('state/users/selectors', () => ({
-  getGroupRolesCombo: jest.fn(),
+  getSelectedUserAuthoritiesList: jest.fn(),
   getSelectedUserActionAuthorities: jest.fn(),
 }));
 
@@ -44,15 +46,17 @@ describe('UserAuthorityPageFormContainer', () => {
     expect(props).toHaveProperty('loading');
     expect(props).toHaveProperty('groups');
     expect(props).toHaveProperty('roles');
-    expect(props).toHaveProperty('groupRolesCombo');
+    expect(props).toHaveProperty('groupsMap');
+    expect(props).toHaveProperty('rolesMap');
+    expect(props).toHaveProperty('initialValues');
     expect(props).toHaveProperty('actionOnSave');
   });
 
   it('verify that onWillMount and onSubmit are defined in mapDispatchToProps', () => {
     const dispatchMock = jest.fn();
     const result = mapDispatchToProps(dispatchMock, ownProps);
-    expect(result.onWillMount).toBeDefined();
-    result.onWillMount();
+    expect(result.onDidMount).toBeDefined();
+    result.onDidMount();
     expect(dispatchMock).toHaveBeenCalled();
     expect(result.onSubmit).toBeDefined();
   });
diff --git a/test/ui/users/common/UserForm.test.js b/test/ui/users/common/UserForm.test.js
index d547cc28d..67a37f45a 100644
--- a/test/ui/users/common/UserForm.test.js
+++ b/test/ui/users/common/UserForm.test.js
@@ -1,210 +1,375 @@
 import React from 'react';
-import 'test/enzyme-init';
-import { shallow } from 'enzyme';
-import { UserFormBody, renderStaticField } from 'ui/users/common/UserForm';
-import { runValidators, mockIntl } from 'test/legacyTestUtils';
+import { screen, within, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
 
-const handleSubmit = jest.fn();
-const onSubmit = jest.fn();
-const onWillMount = jest.fn();
-const EDIT_MODE = 'edit';
+import { renderWithIntl } from 'test/testUtils';
+import UserForm from 'ui/users/common/UserForm';
+import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 
-describe('UserForm', () => {
-  let userForm;
-  let submitting;
-  let invalid;
-  let profileTypes;
-
-  beforeEach(() => {
-    submitting = false;
-    invalid = false;
-  });
-  const buildUserForm = (mode) => {
-    const props = {
-      profileTypes,
-      submitting,
-      invalid,
-      handleSubmit,
-      onWillMount,
-      onSubmit,
-      mode,
-      msgs: {
-        username: { id: 'username', defaultMessage: 'username' },
-      },
-      password: 'test',
-      intl: mockIntl,
-    };
+jest.mock('ui/common/cancel-modal/ConfirmCancelModalContainer', () => jest.fn(() => null));
+
+const setupUserForm = (initialValues, editing = false) => {
+  const mockHandleMount = jest.fn();
+  const mockHandleSubmit = jest.fn();
+  const mockHandleCancel = jest.fn();
+  const mockHandleDiscard = jest.fn();
+  const mockHandleModalSave = jest.fn();
+  const profileTypes = [{ value: 'PFL', text: 'Default' }];
+  const utils = renderWithIntl((
+    <UserForm
+      profileTypes={profileTypes}
+      initialValues={initialValues}
+      onMount={mockHandleMount}
+      onSubmit={mockHandleSubmit}
+      onCancel={mockHandleCancel}
+      onDiscard={mockHandleDiscard}
+      onModalSave={mockHandleModalSave}
+      editing={editing}
+    />
+  ));
+  const formView = within(screen.getByRole('form'));
+
+  const getUsernameTextInput = () => formView.getByRole('textbox', { name: /username/i });
+  const getPasswordTextInput = () => formView.getByPlaceholderText(/^password$/i);
+  const getPasswordConfirmTextInput = () => formView.getByLabelText(/confirm password/i);
+  const getProfileTypeSelectInput = () => formView.getByRole('combobox', { name: /profile type/i });
+  const getStatusSwitchInput = () => formView.getByLabelText(/status/i).children[0];
+  const getSaveButton = () => formView.getByRole('button', { name: /^save$/i });
+  const getSaveAndEditProfileButton = () => formView.getByRole('button', { name: /save and edit profile/i });
+  const getCancelButton = () => formView.getByRole('button', { name: /cancel/i });
+  const getErrorMessage = () => formView.getByRole('alert');
+  const queryProfileTypeSelectInput = () => formView.queryByRole('combobox', { name: /profile type/i });
+  const queryResetSwitchInput = () => formView.queryByLabelText(/reset/i).children[0];
+  const queryErrorMessage = () => formView.queryByRole('alert');
+  const querySaveAndEditProfileButton = () => formView.queryByRole('button', { name: /save and edit profile/i });
+
+  const typeUsername =
+    value => userEvent.type(getUsernameTextInput(), value);
+  const typePassword =
+    value => userEvent.type(getPasswordTextInput(), value);
+  const typePasswordConfirm =
+    value => userEvent.type(getPasswordConfirmTextInput(), value);
+  const selectProfileType =
+    value => userEvent.selectOptions(getProfileTypeSelectInput(), value);
+  const clearPassword = () => userEvent.clear(getPasswordTextInput());
+
+  const toggleStatus = () => userEvent.click(getStatusSwitchInput());
 
-    return shallow(<UserFormBody {...props} />);
+  const clickSave = () => userEvent.click(getSaveButton());
+  const clickSaveAndEditProfile = () => userEvent.click(getSaveAndEditProfileButton());
+  const clickCancel = () => userEvent.click(getCancelButton());
+
+  return {
+    ...utils,
+    mockHandleMount,
+    mockHandleSubmit,
+    mockHandleCancel,
+    mockHandleDiscard,
+    getUsernameTextInput,
+    getPasswordTextInput,
+    getPasswordConfirmTextInput,
+    getProfileTypeSelectInput,
+    getStatusSwitchInput,
+    getSaveButton,
+    getSaveAndEditProfileButton,
+    getErrorMessage,
+    queryProfileTypeSelectInput,
+    queryResetSwitchInput,
+    queryErrorMessage,
+    querySaveAndEditProfileButton,
+    typeUsername,
+    typePassword,
+    typePasswordConfirm,
+    selectProfileType,
+    toggleStatus,
+    clearPassword,
+    clickSave,
+    clickSaveAndEditProfile,
+    clickCancel,
   };
+};
+
+const setupUserFormAndFillValues = ({
+  username, password, passwordConfirm, profileType,
+}) => {
+  const utils = setupUserForm();
+  utils.typeUsername(username);
+  utils.typePassword(password);
+  utils.typePasswordConfirm(passwordConfirm);
+  utils.selectProfileType(profileType);
+
+  fireEvent.blur(utils.getProfileTypeSelectInput());
 
-  it('root component renders without crashing', () => {
-    userForm = buildUserForm();
-    expect(userForm.exists()).toEqual(true);
+  return utils;
+};
+
+describe('UserForm', () => {
+  const user = {
+    username: 'testuser',
+    password: 'testpass',
+    passwordConfirm: 'testpass',
+    profileType: 'PFL',
+    status: 'inactive',
+  };
+
+  it('calls onMount when form has been rendered', () => {
+    const { mockHandleMount } = setupUserForm();
+
+    expect(mockHandleMount).toHaveBeenCalledTimes(1);
   });
 
-  it('root component render minus icon if staticField value is null', () => {
-    const input = { name: 'registration', value: '' };
-    const name = 'registration';
-    const label = <label htmlFor={name}>registration</label>;
-    const element = shallow(renderStaticField({ input, label, name }));
-    expect(element.find('.icon')).toExist();
-    expect(element.find('.icon').hasClass('fa-minus')).toBe(true);
+  it('calls onSubmit with all the fields when save is clicked', async () => {
+    const { mockHandleSubmit, clickSave } = setupUserFormAndFillValues(user);
+
+    clickSave();
+
+    await waitFor(() => {
+      expect(mockHandleSubmit).toHaveBeenCalledTimes(1);
+      expect(mockHandleSubmit).toHaveBeenCalledWith(user, 'save');
+    });
   });
 
-  it('root component renders registration Field if its value is not null', () => {
-    const input = { name: 'registration', value: 'registration' };
-    const name = 'registration';
-    const label = <label htmlFor={name}>registration</label>;
-    const element = renderStaticField({ input, label, name });
-    const registration = shallow(element);
-    expect(registration.find('.form-group').exists()).toBe(true);
+  it('calls onSubmit with all the fields and a saveAndEditProfile submit type when save and edit profile button is clicked', async () => {
+    const { clickSaveAndEditProfile, mockHandleSubmit } = setupUserFormAndFillValues(user);
+
+    clickSaveAndEditProfile();
+
+    await waitFor(() => {
+      expect(mockHandleSubmit).toHaveBeenCalledTimes(1);
+      expect(mockHandleSubmit).toHaveBeenCalledWith(user, 'saveAndEditProfile');
+    });
   });
 
-  describe('test with mode = new', () => {
-    beforeEach(() => {
-      userForm = buildUserForm();
+  it('calls onDiscard when cancel is clicked and form is not dirty', async () => {
+    const { mockHandleDiscard, clickCancel } = setupUserForm();
+
+    clickCancel();
+
+    await waitFor(() => {
+      expect(mockHandleDiscard).toHaveBeenCalledTimes(1);
     });
+  });
+
+  it('calls onCancel when cancel is clicked and form is dirty', async () => {
+    const { mockHandleCancel, clickCancel } = setupUserFormAndFillValues(user);
 
-    it('root component renders username field', () => {
-      const username = userForm.find('[name="username"]');
-      expect(username.exists()).toEqual(true);
+    clickCancel();
+
+    await waitFor(() => {
+      expect(mockHandleCancel).toHaveBeenCalledTimes(1);
     });
+  });
 
-    describe('username validation', () => {
-      let validatorArray;
-      beforeEach(() => {
-        validatorArray = userForm.find('[name="username"]').prop('validate');
-      });
+  it('renders ConfirmCancelModalContainer with the correct props', () => {
+    setupUserForm();
 
-      it('is required', () => {
-        expect(runValidators(validatorArray, '').props.id).toBe('validateForm.required');
-      });
+    expect(ConfirmCancelModalContainer).toHaveBeenCalledWith(expect.objectContaining({
+      contentText: expect.stringMatching(/save/i),
+      invalid: expect.any(Boolean),
+      submitting: expect.any(Boolean),
+      onSave: expect.any(Function),
+      onDiscard: expect.any(Function),
+      'data-testid': expect.any(String),
+    }), {});
+  });
 
-      it('is invalid if input is shorter than 4 chars', () => {
-        expect(runValidators(validatorArray, '123').props.id).toBe('validateForm.minLength');
-        expect(runValidators(validatorArray, '1234')).toBeFalsy();
-      });
+  it('disables save buttons and shows an error message when username is not provided', async () => {
+    const { getSaveButton, getSaveAndEditProfileButton, getErrorMessage } = setupUserFormAndFillValues({ ...user, username: '' });
 
-      it('is invalid if input is longer than 80 chars', () => {
-        expect(runValidators(validatorArray, '123456789abcdefghijk')).toBeFalsy();
-        expect(runValidators(validatorArray, '123456789abcdefghijk123456789abcdefghijk123456789abcdefghijk123456789abcdefghijkl').props.id)
-          .toBe('validateForm.maxLength');
-      });
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/field required/i);
     });
+  });
+
+  it('disables save buttons and shows an error message when password is not provided', async () => {
+    const {
+      clearPassword, getPasswordTextInput, getSaveButton,
+      getSaveAndEditProfileButton, getErrorMessage,
+    } = setupUserForm({ ...user, passwordConfirm: '' });
+
+    clearPassword();
+    fireEvent.blur(getPasswordTextInput());
 
-    it('root component renders status field', () => {
-      const status = userForm.find('[name="status"]');
-      expect(status.exists()).toEqual(true);
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/field required/i);
     });
+  });
+
+  it('disables save buttons and shows an error message when confirm password is not provided', async () => {
+    const { getSaveButton, getSaveAndEditProfileButton, getErrorMessage } = setupUserFormAndFillValues({ ...user, passwordConfirm: '' });
 
-    it('root component renders profileType field', () => {
-      const status = userForm.find('[name="profileType"]');
-      expect(status.exists()).toEqual(true);
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/field required/i);
     });
+  });
 
-    describe('password field', () => {
-      let passwordField;
-      beforeEach(() => {
-        passwordField = userForm.find('[name="password"]');
-      });
+  it('disables save buttons and shows an error message when profile type is not provided', async () => {
+    const { getSaveButton, getSaveAndEditProfileButton, getErrorMessage } = setupUserFormAndFillValues({ ...user, profileType: '' });
 
-      it('is rendered', () => {
-        expect(passwordField).toExist();
-      });
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/field required/i);
+    });
+  });
 
-      describe('validation', () => {
-        let validatorArray;
-        beforeEach(() => {
-          validatorArray = passwordField.prop('validate');
-        });
-
-        it('is required', () => {
-          expect(runValidators(validatorArray, '').props.id).toBe('validateForm.required');
-        });
-
-        it('is invalid if input is shorter than 8 chars', () => {
-          expect(runValidators(validatorArray, '1234567').props.id).toBe('validateForm.minLength');
-          expect(runValidators(validatorArray, '12345678')).toBeFalsy();
-        });
-
-        it('is invalid if input is longer than 20 chars', () => {
-          expect(runValidators(validatorArray, '123456789abcdefghijk')).toBeFalsy();
-          expect(runValidators(validatorArray, '123456789abcdefghijkl').props.id)
-            .toBe('validateForm.maxLength');
-        });
-      });
+  it('disables save buttons and shows an error message when username is too short', async () => {
+    const { getSaveButton, getSaveAndEditProfileButton, getErrorMessage } = setupUserFormAndFillValues({ ...user, username: 'abc' });
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/must be 4 characters or more/i);
     });
+  });
 
-    describe('passwordConfirm field', () => {
-      const ALL_VALUES = { password: '12345678' };
-      let passwordConfirmField;
-      beforeEach(() => {
-        passwordConfirmField = userForm.find('[name="passwordConfirm"]');
+  it('disables save buttons and shows an error message when username is too long', async () => {
+    const { getSaveButton, getSaveAndEditProfileButton, getErrorMessage } =
+      setupUserFormAndFillValues({
+        ...user, username: 'thisisastringthathasmorethan80characters_thisisastringthathasmorethan80characters',
       });
 
-      it('is rendered', () => {
-        expect(passwordConfirmField).toExist();
-      });
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/must be 80 characters or less/i);
+    });
+  });
 
-      describe('validation', () => {
-        let validatorArray;
-        beforeEach(() => {
-          validatorArray = passwordConfirmField.prop('validate');
-        });
-
-        it('is required', () => {
-          expect(runValidators(validatorArray, '').props.id).toBe('validateForm.required');
-        });
-
-        it('is invalid if input does not match the password', () => {
-          expect(runValidators(validatorArray, 'abcdefgh', ALL_VALUES).props.id)
-            .toBe('validateForm.passwordNotMatch');
-          expect(runValidators(validatorArray, ALL_VALUES.password, ALL_VALUES)).toBeFalsy();
-        });
-      });
+  it('disables save buttons and shows an error message when username contains invalid characters', async () => {
+    const { getSaveButton, getSaveAndEditProfileButton, getErrorMessage } = setupUserFormAndFillValues({ ...user, username: '-invalid-' });
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/contains invalid characters/i);
+    });
+  });
+
+  it('disables save buttons and shows an error message when password is too short', async () => {
+    const shortPassword = 'abc';
+    const {
+      getSaveButton, getSaveAndEditProfileButton, getErrorMessage,
+    } = setupUserFormAndFillValues({
+      ...user, password: shortPassword, passwordConfirm: shortPassword,
+    });
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/must be 8 characters or more/i);
+    });
+  });
+
+  it('disables save buttons and shows an error message when password is too long', async () => {
+    const longPassword = 'stringwithover20chars';
+    const {
+      getSaveButton, getSaveAndEditProfileButton, getErrorMessage,
+    } = setupUserFormAndFillValues({
+      ...user, password: longPassword, passwordConfirm: longPassword,
+    });
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/must be 20 characters or less/i);
     });
   });
 
-  describe('test with mode = edit', () => {
-    beforeEach(() => {
-      submitting = false;
-      invalid = false;
-      userForm = buildUserForm(EDIT_MODE);
+  it('disables save buttons and shows an error message when password contains invalid characters', async () => {
+    const invalidPassword = '-invalid-';
+    const {
+      getSaveButton, getSaveAndEditProfileButton, getErrorMessage,
+    } = setupUserFormAndFillValues({
+      ...user, password: invalidPassword, passwordConfirm: invalidPassword,
     });
-    it('root component has class UserForm__content-edit', () => {
-      expect(userForm.find('.UserForm__content-edit').exists()).toBe(true);
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/contains invalid characters/i);
     });
+  });
 
-    it('root component contains edit fields', () => {
-      expect(userForm.find('.UserForm__content-edit').find('Field')).toHaveLength(4);
-      expect(userForm.find('[name="registration"]').exists()).toBe(true);
-      expect(userForm.find('[name="lastLogin"]').exists()).toBe(true);
-      expect(userForm.find('[name="lastPasswordChange"]').exists()).toBe(true);
-      expect(userForm.find('[name="reset"]').exists()).toBe(true);
+  it('disables save buttons and shows an error message when password doesn\'t match confirm password', async () => {
+    const { getSaveButton, getSaveAndEditProfileButton, getErrorMessage } =
+      setupUserFormAndFillValues({
+        ...user, password: 'password', passwordConfirm: 'differentpass',
+      });
+
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getSaveAndEditProfileButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/value doesn't match with password/i);
     });
   });
 
-  describe('test buttons and handlers', () => {
-    it('disables submit button while submitting', () => {
-      submitting = true;
-      userForm = buildUserForm();
-      const submitButton = userForm.find('Button').first();
-      expect(submitButton.prop('disabled')).toEqual(true);
+  describe('When editing', () => {
+    const detailedUser = {
+      ...user,
+      lastLogin: '2021-11-11 00:00:00',
+      lastPasswordChange: '2021-11-12 00:00:00',
+      registration: '2021-11-10 00:00:00',
+      reset: false,
+    };
+
+    it('calls onSubmit with all the fields when save is clicked', async () => {
+      const { mockHandleSubmit, clickSave } = setupUserForm(detailedUser, true);
+
+      clickSave();
+
+      await waitFor(() => {
+        expect(mockHandleSubmit).toHaveBeenCalledTimes(1);
+        expect(mockHandleSubmit).toHaveBeenCalledWith(detailedUser, 'save');
+      });
+    });
+
+    it('disables username', () => {
+      const { getUsernameTextInput } = setupUserForm(detailedUser, true);
+
+      expect(getUsernameTextInput()).toHaveAttribute('disabled');
     });
 
-    it('disables submit button if form is invalid', () => {
-      invalid = true;
-      userForm = buildUserForm();
-      const submitButton = userForm.find('Button').first();
-      expect(submitButton.prop('disabled')).toEqual(true);
+    it('doesn\'t show profile type field', () => {
+      const { queryProfileTypeSelectInput } = setupUserForm(detailedUser, true);
+
+      expect(queryProfileTypeSelectInput()).not.toBeInTheDocument();
+    });
+
+    it('shows the reset switch and static fields -- registration, last login, last password change', () => {
+      const { queryResetSwitchInput } = setupUserForm(detailedUser, true);
+
+      expect(screen.getByText(detailedUser.lastLogin)).toBeInTheDocument();
+      expect(screen.getByText(detailedUser.lastPasswordChange)).toBeInTheDocument();
+      expect(screen.getByText(detailedUser.registration)).toBeInTheDocument();
+      expect(queryResetSwitchInput()).toBeInTheDocument();
+    });
+
+    it('doesn\'t show save and edit profile button', () => {
+      const { querySaveAndEditProfileButton } = setupUserForm(detailedUser, true);
+
+      expect(querySaveAndEditProfileButton()).not.toBeInTheDocument();
     });
 
-    it('on form submit calls handleSubmit', () => {
-      userForm = buildUserForm();
-      const preventDefault = jest.fn();
-      userForm.find('form').simulate('submit', { preventDefault });
-      expect(handleSubmit).toHaveBeenCalled();
+    it('doesn\'t disable save button and doesn\'t show an error message when password is empty', async () => {
+      const {
+        clearPassword, getPasswordTextInput, queryErrorMessage, getSaveButton,
+      } = setupUserForm({ ...detailedUser, passwordConfirm: '' }, true);
+
+      clearPassword('');
+      fireEvent.blur(getPasswordTextInput());
+
+      await waitFor(() => {
+        expect(getSaveButton()).not.toHaveAttribute('disabled');
+        expect(queryErrorMessage()).not.toBeInTheDocument();
+      });
     });
   });
 });
diff --git a/test/ui/users/edit/EditFormContainer.test.js b/test/ui/users/edit/EditFormContainer.test.js
index a3433428c..ff0e3c617 100644
--- a/test/ui/users/edit/EditFormContainer.test.js
+++ b/test/ui/users/edit/EditFormContainer.test.js
@@ -1,46 +1,130 @@
-import { mapDispatchToProps, mapStateToProps } from 'ui/users/edit/EditFormContainer';
+import React from 'react';
+import * as reactRedux from 'react-redux';
 
-const ownProps = {
-  match: {
-    params: {
-      mode: 'edit',
-      username: 'test',
+import { renderWithIntlRouterState } from 'test/testUtils';
+import EditFormContainer from 'ui/users/edit/EditFormContainer';
+import UserForm from 'ui/users/common/UserForm';
+
+jest.unmock('react-redux');
+
+const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
+const mockDispatch = jest.fn();
+useDispatchSpy.mockReturnValue(mockDispatch);
+
+const mockHistoryPush = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
+jest.mock('state/users/actions', () => ({
+  sendPutUser: jest.fn(payload => ({ type: 'sendPutUser_test', payload })),
+  fetchCurrentPageUserDetail: jest.fn(payload => ({ type: 'fetchCurrentPageUserDetail_test', payload })),
+}));
+
+jest.mock('state/profile-types/actions', () => ({
+  fetchProfileTypes: jest.fn(() => ({ type: 'fetchProfileTypes_test' })),
+}));
+
+jest.mock('state/modal/actions', () => ({
+  setVisibleModal: jest.fn(payload => ({ type: 'setVisibleModal_test', payload })),
+}));
+
+jest.mock('ui/users/common/UserForm', () => jest.fn(mockProps => (
+  <div>
+    <button onClick={mockProps.onMount}>onMount</button>
+    <button onClick={() => mockProps.onSubmit({})}>onSubmit</button>
+    <button onClick={mockProps.onCancel}>onCancel</button>
+    <button onClick={mockProps.onDiscard}>onDiscard</button>
+    <button onClick={mockProps.onModalSave}>onModalSave</button>
+  </div>
+)));
+
+const setupEditFormContainer = () => {
+  const state = {
+    users: {
+      selected: {},
     },
-  },
-};
+  };
+  const utils = renderWithIntlRouterState(<EditFormContainer />, {
+    state, initialRoute: '/user/edit/testuser', path: '/user/edit/:username',
+  });
+  const simulateMount = () => utils.getByText('onMount').click();
+  const simulateSubmit = () => utils.getByText('onSubmit').click();
+  const simulateCancel = () => utils.getByText('onCancel').click();
+  const simulateDiscard = () => utils.getByText('onDiscard').click();
+  const simulateModalSave = () => utils.getByText('onModalSave').click();
 
-const dispatchProps = {
-  history: {},
+  return {
+    ...utils,
+    simulateMount,
+    simulateSubmit,
+    simulateCancel,
+    simulateDiscard,
+    simulateModalSave,
+  };
 };
 
-describe('EditFormContainer', () => {
-  const dispatchMock = jest.fn();
-  let props;
-  beforeEach(() => {
-    jest.clearAllMocks();
-    props = mapDispatchToProps(dispatchMock, dispatchProps);
-  });
-
-  describe('mapDispatchToProps', () => {
-    it('should map the correct function properties', () => {
-      expect(props.onWillMount).toBeDefined();
-      expect(props.onSubmit).toBeDefined();
-    });
-    it('verify thant onWillMount is called', () => {
-      props.onWillMount('username');
-      expect(dispatchMock).toHaveBeenCalled();
-    });
-    it('verify thant onSubmit is called', () => {
-      props.onSubmit({});
-      expect(dispatchMock).toHaveBeenCalled();
-    });
-  });
-
-  describe('mapStateToProps', () => {
-    it('verify that username prop is defined and properly valued', () => {
-      props = mapStateToProps({}, ownProps);
-      expect(props.mode).toEqual('edit');
-      expect(props.username).toEqual('test');
-    });
+describe('AddFormContainer', () => {
+  afterEach(() => {
+    mockDispatch.mockClear();
+  });
+
+  it('passes initialValues to UserForm with the correct values', () => {
+    setupEditFormContainer();
+
+    expect(UserForm).toHaveBeenCalledWith(expect.objectContaining({
+      initialValues: {
+        username: 'testuser', password: '', passwordConfirm: '', reset: false,
+      },
+    }), {});
+  });
+
+  it('fetches user data when UserForm mounts', () => {
+    const { simulateMount } = setupEditFormContainer();
+
+    simulateMount();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'fetchCurrentPageUserDetail_test', payload: 'testuser' });
+  });
+
+  it('calls the correct user action when UserForm is submitted', () => {
+    const { simulateSubmit } = setupEditFormContainer();
+
+    simulateSubmit();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'sendPutUser_test', payload: expect.any(Object) });
+  });
+
+  it('calls the correct modal action when UserForm is cancelled', () => {
+    const { simulateCancel } = setupEditFormContainer();
+
+    simulateCancel();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'setVisibleModal_test', payload: 'ConfirmCancelModal' });
+  });
+
+  it('calls the correct modal and history actions when UserForm is discarded', () => {
+    const { simulateDiscard } = setupEditFormContainer();
+
+    simulateDiscard();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'setVisibleModal_test', payload: '' });
+    expect(mockHistoryPush).toHaveBeenCalledWith('/user');
+  });
+
+  it('calls the correct modal action when UserForm modal is saved', () => {
+    const { simulateModalSave } = setupEditFormContainer();
+
+    simulateModalSave();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'setVisibleModal_test', payload: '' });
   });
 });
diff --git a/test/ui/users/list/UserListTableContainer.test.js b/test/ui/users/list/UserListTableContainer.test.js
index 6f889bd46..1a72556ca 100644
--- a/test/ui/users/list/UserListTableContainer.test.js
+++ b/test/ui/users/list/UserListTableContainer.test.js
@@ -2,13 +2,14 @@ import 'test/enzyme-init';
 
 import { mapStateToProps, mapDispatchToProps } from 'ui/users/list/UserListTableContainer';
 import { USERS } from 'test/mocks/users';
-import { getUserList } from 'state/users/selectors';
+import { getUserList, getUserSearchTerm } from 'state/users/selectors';
 import { getLoading } from 'state/loading/selectors';
 
 const dispatchMock = jest.fn();
 
 jest.mock('state/users/selectors', () => ({
   getUserList: jest.fn(),
+  getUserSearchTerm: jest.fn(),
 }));
 
 jest.mock('state/loading/selectors', () => ({
@@ -23,6 +24,7 @@ jest.mock('state/pagination/selectors', () => ({
 const users = USERS;
 
 getUserList.mockReturnValue(users);
+getUserSearchTerm.mockReturnValue('');
 getLoading.mockReturnValue(false);
 
 describe('UserListTableContainer', () => {
diff --git a/test/ui/users/list/UserSearchForm.test.js b/test/ui/users/list/UserSearchForm.test.js
index 18d84f9d6..8a1edbcfe 100644
--- a/test/ui/users/list/UserSearchForm.test.js
+++ b/test/ui/users/list/UserSearchForm.test.js
@@ -3,13 +3,16 @@ import 'test/enzyme-init';
 import { mount } from 'enzyme';
 import UserSearchForm from 'ui/users/list/UserSearchForm';
 import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { renderWithIntl } from '../../../test/testUtils';
 
 const handleSubmit = jest.fn();
 const setProfileType = jest.fn();
-const onWillMount = jest.fn();
+const onDidMount = jest.fn();
+const onUnmount = jest.fn();
+const onSubmit = jest.fn();
 
 jest.unmock('react-redux');
-jest.unmock('redux-form');
 
 describe('UserSearchForm', () => {
   let userSearchForm;
@@ -20,17 +23,21 @@ describe('UserSearchForm', () => {
     submitting = false;
     invalid = false;
   });
-  const buildUserSearchForm = () => {
-    const props = {
-      submitting,
-      invalid,
-      handleSubmit,
-      setProfileType,
-      onWillMount,
-    };
 
-    return mount(mockRenderWithIntlAndStore(<UserSearchForm {...props} />));
+  const props = {
+    submitting,
+    invalid,
+    handleSubmit,
+    onSubmit,
+    setProfileType,
+    onDidMount,
+    onUnmount,
+    isValid: true,
+    isSubmitting: false,
+    initialValues: { withProfile: 'all', username: '' },
   };
+  const buildUserSearchForm = () =>
+    mount(mockRenderWithIntlAndStore(<UserSearchForm {...props} />));
 
   describe('basic render tests', () => {
     beforeEach(() => {
@@ -52,14 +59,13 @@ describe('UserSearchForm', () => {
   });
 
   describe('event handlers test', () => {
-    const preventDefault = jest.fn();
-    beforeEach(() => {
-      userSearchForm = buildUserSearchForm();
-    });
-
-    it('on form submit calls handleSubmit', () => {
-      userSearchForm.find('form').simulate('submit', { preventDefault });
-      expect(handleSubmit).toHaveBeenCalled();
+    it('on form submit calls handleSubmit', async () => {
+      renderWithIntl(<UserSearchForm {...props} />);
+      const btn = screen.getByRole('button', { name: /search/i });
+      await fireEvent.click(btn);
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/test/ui/users/list/UserSearchFormContainer.test.js b/test/ui/users/list/UserSearchFormContainer.test.js
index cfa478b20..bdfe43300 100644
--- a/test/ui/users/list/UserSearchFormContainer.test.js
+++ b/test/ui/users/list/UserSearchFormContainer.test.js
@@ -5,6 +5,9 @@ import { PROFILE_TYPES_NORMALIZED, PROFILE_TYPES_OPTIONS } from 'test/mocks/prof
 
 const TEST_STATE = {
   profileTypes: PROFILE_TYPES_NORMALIZED.profileTypes,
+  users: {
+    searchTerm: '',
+  },
 };
 
 const page = 1;
@@ -20,15 +23,15 @@ describe('FragmentSearchFormContainer', () => {
   it('maps profileTypes property state in UserSearchFormContainer', () => {
     expect(mapStateToProps(TEST_STATE)).toEqual({
       profileTypes: PROFILE_TYPES_OPTIONS,
-      initialValues: { withProfile: 'all' },
+      initialValues: { withProfile: 'all', username: '' },
 
     });
   });
 
-  it('verify that onWillMount is defined by mapDispatchToProps', () => {
+  it('verify that onDidMount is defined by mapDispatchToProps', () => {
     const result = mapDispatchToProps(dispatchMock);
-    expect(result.onWillMount).toBeDefined();
-    result.onWillMount();
+    expect(result.onDidMount).toBeDefined();
+    result.onDidMount();
     expect(dispatchMock).toHaveBeenCalled();
   });
   it('verify that onSubmit is defined by mapDispatchToProps', () => {
diff --git a/test/ui/users/my-profile/AccountForm.test.js b/test/ui/users/my-profile/AccountForm.test.js
index 4ba51cb16..e7d46a00e 100644
--- a/test/ui/users/my-profile/AccountForm.test.js
+++ b/test/ui/users/my-profile/AccountForm.test.js
@@ -1,47 +1,35 @@
 import React from 'react';
-import 'test/enzyme-init';
-import { shallow } from 'enzyme';
-import { Form } from 'patternfly-react';
-import { required } from '@entando/utils';
+import { render, screen, within } from '@testing-library/react';
+import { withFormik } from 'formik';
 
-import { AccountFormBody } from 'ui/users/my-profile/AccountForm';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
+import { PasswordFormBody } from 'ui/users/my-profile/AccountForm';
+import { IntlProvider } from 'react-intl';
 
-describe('AccountForm', () => {
-  let component;
+describe('PasswordFormBody', () => {
+  let container;
   beforeEach(() => {
-    component = shallow(<AccountFormBody onSubmit={() => {}} username="admin" handleSubmit={() => {}} />);
+    const PasswordFormBodyWithFormik =
+    withFormik({ mapPropsToValues: () => {}, onSubmit: () => {} })(PasswordFormBody);
+    const { container: rtlContainer } = render(<IntlProvider locale="en"><PasswordFormBodyWithFormik /></IntlProvider>);
+    container = rtlContainer;
   });
 
-  it('renders without crashing', () => {
-    expect(component.exists()).toBe(true);
-  });
-
-  it('verify it is a form', () => {
-    expect(component.type()).toBe(Form);
+  it('renders without crashing', async () => {
+    expect(within(screen.getByRole('form'))).toBeDefined();
   });
 
   it('has a oldPassword text field', () => {
-    const element = component.find('Field[name="oldPassword"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
-    expect(props).toHaveProperty('validate', required);
+    const inputElement = container.querySelector('#oldPassword');
+    expect(inputElement).toBeDefined();
   });
 
   it('has a newPassword text field', () => {
-    const element = component.find('Field[name="newPassword"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
-    expect(props).toHaveProperty('validate', required);
+    const inputElement = container.querySelector('#newPassword');
+    expect(inputElement).toBeDefined();
   });
 
   it('has a newPasswordConfirm text field', () => {
-    const element = component.find('Field[name="newPasswordConfirm"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
-    expect(props).toHaveProperty('validate', [required, expect.any(Function)]);
+    const inputElement = container.querySelector('#oldPasswordConfirm');
+    expect(inputElement).toBeDefined();
   });
 });
diff --git a/test/ui/users/my-profile/AccountFormContainer.test.js b/test/ui/users/my-profile/AccountFormContainer.test.js
index 24777f176..bae62fcd2 100644
--- a/test/ui/users/my-profile/AccountFormContainer.test.js
+++ b/test/ui/users/my-profile/AccountFormContainer.test.js
@@ -30,11 +30,4 @@ describe('AccountFormContainer', () => {
     result.onEdit();
     expect(dispatchMock).toHaveBeenCalled();
   });
-
-  it('verify that mapDispatchToProps result has onModalFormSubmit', () => {
-    const result = mapDispatchToProps(dispatchMock);
-    expect(result.onModalFormSubmit).toBeDefined();
-    result.onModalFormSubmit();
-    expect(dispatchMock).toHaveBeenCalled();
-  });
 });
diff --git a/test/ui/users/my-profile/AppSettingsForm.test.js b/test/ui/users/my-profile/AppSettingsForm.test.js
index 1e7ce77f3..aee638add 100644
--- a/test/ui/users/my-profile/AppSettingsForm.test.js
+++ b/test/ui/users/my-profile/AppSettingsForm.test.js
@@ -1,7 +1,11 @@
+/**
+* @jest-environment jest-environment-jsdom-sixteen
+* */
+
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { fireEvent, render, within } from '@testing-library/react';
-import { screen } from '@testing-library/dom';
+import { screen, waitFor } from '@testing-library/dom';
 import AppSettingsForm from 'ui/users/my-profile/AppSettingsForm';
 import { mockRenderWithIntlAndStore } from 'test/legacyTestUtils';
 
@@ -18,6 +22,8 @@ const props = {
   }],
   defaultPageJoinGroups: ['free'],
   defaultContentJoinGroups: ['admin'],
+  values: {},
+  initialValues: {},
 };
 
 jest.unmock('react-redux');
@@ -34,9 +40,9 @@ describe('AppSettingsForm', () => {
       ),
     ); */
     const defaultPageOwnerGroupSelectView = within(screen.getAllByRole('combobox')[0]);
-    const defaultPageJoinGroupsMultiSelectView = within(screen.getAllByTestId('multi-select')[0]);
+    const defaultPageJoinGroupsMultiSelectView = within(screen.getAllByTestId('formik-field_MultiSelectRenderer_select')[0]);
     const defaultContentOwnerGroupSelectView = within(screen.getAllByRole('combobox')[0]);
-    const defaultContentJoinGroupsMultiSelectView = within(screen.getAllByTestId('multi-select')[1]);
+    const defaultContentJoinGroupsMultiSelectView = within(screen.getAllByTestId('formik-field_MultiSelectRenderer_select')[1]);
     expect(screen.getByText('Preferences')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
     expect(screen.getByLabelText('Welcome Wizard')).toBeInTheDocument();
@@ -50,9 +56,10 @@ describe('AppSettingsForm', () => {
     expect(defaultContentJoinGroupsMultiSelectView.getByRole('option', { name: 'Free Access' })).toBeInTheDocument();
   });
 
-  it('Verify onSubmit function is triggered when submitting form', () => {
+  it('Verify onSubmit function is triggered when submitting form', async () => {
     render(mockRenderWithIntlAndStore(<AppSettingsForm {...props} />));
-    fireEvent.submit(screen.getByTestId('appSettingsForm'));
-    expect(props.onSubmit).toHaveBeenCalled();
+    fireEvent.submit(screen.getByTestId('my-profile_AppSettingsForm_FormikForm'));
+    await waitFor(() =>
+      expect(props.onSubmit).toHaveBeenCalled());
   });
 });
diff --git a/test/ui/users/restrictions/RestrictionsForm.test.js b/test/ui/users/restrictions/RestrictionsForm.test.js
index ef273c67f..4ecee3377 100644
--- a/test/ui/users/restrictions/RestrictionsForm.test.js
+++ b/test/ui/users/restrictions/RestrictionsForm.test.js
@@ -1,88 +1,113 @@
 import React from 'react';
-import 'test/enzyme-init';
-import { Spinner } from 'patternfly-react';
-import { isNumber } from '@entando/utils';
+import { screen, within, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
 
-import { RestrictionsFormBody, montshSinceLogin } from 'ui/users/restrictions/RestrictionsForm';
-import SwitchRenderer from 'ui/common/form/SwitchRenderer';
-import RenderTextInput from 'ui/common/form/RenderTextInput';
-import { shallowWithIntl, mockIntl } from 'test/legacyTestUtils';
+import RestrictionsForm from 'ui/users/restrictions/RestrictionsForm';
+import { renderWithIntl } from 'test/testUtils';
 
-describe('RestrictionsForm', () => {
-  const onWillMount = jest.fn();
-  let component;
-  beforeEach(() => {
-    component =
-    shallowWithIntl(<RestrictionsFormBody
-      handleSubmit={() => {}}
-      onWillMount={onWillMount}
-      intl={mockIntl}
-    />);
-  });
+const setupRestrictionsForm = (initialValues = {
+  enableGravatarIntegration: false,
+  passwordAlwaysActive: false,
+  maxMonthsPasswordValid: '',
+  lastAccessPasswordExpirationMonths: '',
+}) => {
+  const mockHandleMount = jest.fn();
+  const mockHandleSubmit = jest.fn();
+  const utils = renderWithIntl((
+    <RestrictionsForm
+      initialValues={initialValues}
+      onMount={mockHandleMount}
+      onSubmit={mockHandleSubmit}
+    />
+  ));
+  const formView = within(screen.getByRole('form'));
 
-  it('renders without crashing', () => {
-    expect(component.exists()).toBe(true);
-  });
+  const getMaxMonthsPasswordValidInput = () => formView.getByRole('textbox', { name: /last access/i });
+  const getLastAccessPasswordExpirationMonthsInput = () => formView.getByRole('textbox', { name: /months the password is valid\.$/i });
+  const getSaveButton = () => formView.getByRole('button', { name: /save/i });
+  const getErrorMessage = () => formView.getByRole('alert');
 
-  it('calls onWillMount on mount', () => {
-    expect(onWillMount).toHaveBeenCalled();
-  });
+  const typeMaxMonthsPasswordValid =
+    value => userEvent.type(getMaxMonthsPasswordValidInput(), value);
+  const typeLastAccessPasswordExpirationMonths =
+    value => userEvent.type(getLastAccessPasswordExpirationMonthsInput(), value);
 
-  it('verify it is a Spinner', () => {
-    expect(component.type()).toBe(Spinner);
-  });
+  const clickSave = () => userEvent.click(getSaveButton());
 
-  it('has a passwordAlwaysActive toggle', () => {
-    const element = component.find('Field[name="passwordAlwaysActive"]');
-    expect(element.exists()).toBe(true);
-    expect(element.props()).toHaveProperty('component', SwitchRenderer);
-  });
+  return {
+    ...utils,
+    mockHandleMount,
+    mockHandleSubmit,
+    getMaxMonthsPasswordValidInput,
+    getLastAccessPasswordExpirationMonthsInput,
+    getSaveButton,
+    getErrorMessage,
+    typeMaxMonthsPasswordValid,
+    typeLastAccessPasswordExpirationMonths,
+    clickSave,
+  };
+};
 
-  it('has an enabled maxMonthsPasswordValid text field', () => {
-    const element = component.find('Field[name="maxMonthsPasswordValid"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
-    expect(props).toHaveProperty('disabled', false);
-    expect(props).toHaveProperty('validate', isNumber);
-  });
+const setupRestrictionsFormAndFillValues = ({
+  maxMonthsPasswordValid, lastAccessPasswordExpirationMonths,
+}) => {
+  const utils = setupRestrictionsForm();
+  utils.typeMaxMonthsPasswordValid(maxMonthsPasswordValid);
+  utils.typeLastAccessPasswordExpirationMonths(lastAccessPasswordExpirationMonths);
+
+  fireEvent.blur(utils.getLastAccessPasswordExpirationMonthsInput());
+
+  return utils;
+};
 
-  it('has an enabled lastAccessPasswordExpirationMonths text field', () => {
-    const element = component.find('Field[name="lastAccessPasswordExpirationMonths"]');
-    expect(element.exists()).toBe(true);
-    const props = element.props();
-    expect(props).toHaveProperty('component', RenderTextInput);
-    expect(props).toHaveProperty('disabled', false);
-    expect(props).toHaveProperty('validate', [isNumber, montshSinceLogin]);
+describe('RestrictionsForm', () => {
+  const userRestrictions = {
+    maxMonthsPasswordValid: '12',
+    lastAccessPasswordExpirationMonths: '6',
+    enableGravatarIntegration: false,
+    passwordAlwaysActive: false,
+  };
+
+  it('calls onMount when form has been rendered', () => {
+    const { mockHandleMount } = setupRestrictionsForm();
+
+    expect(mockHandleMount).toHaveBeenCalledTimes(1);
   });
 
-  it('has a enableGravatarIntegration toggle', () => {
-    const element = component.find('Field[name="enableGravatarIntegration"]');
-    expect(element.exists()).toBe(true);
-    expect(element.props()).toHaveProperty('component', SwitchRenderer);
+  it('calls onSubmit with all the fields when save is clicked', async () => {
+    const { mockHandleSubmit, clickSave } = setupRestrictionsFormAndFillValues(userRestrictions);
+
+    clickSave();
+
+    await waitFor(() => {
+      expect(mockHandleSubmit).toHaveBeenCalledTimes(1);
+      expect(mockHandleSubmit).toHaveBeenCalledWith(userRestrictions);
+    });
   });
 
-  describe('with passwordActive true', () => {
-    beforeEach(() => {
-      component.setProps({ passwordActive: true });
+  it('disables save button and shows an error message when last access password expiration is more than max months password is valid', async () => {
+    const { getSaveButton, getErrorMessage } = setupRestrictionsFormAndFillValues({
+      ...userRestrictions,
+      maxMonthsPasswordValid: '12',
+      lastAccessPasswordExpirationMonths: '13',
     });
 
-    it('has a disabled maxMonthsPasswordValid text field', () => {
-      const element = component.find('Field[name="maxMonthsPasswordValid"]');
-      expect(element.exists()).toBe(true);
-      const props = element.props();
-      expect(props).toHaveProperty('component', RenderTextInput);
-      expect(props).toHaveProperty('disabled', true);
-      expect(props).toHaveProperty('validate', isNumber);
+    await waitFor(() => {
+      expect(getSaveButton()).toHaveAttribute('disabled');
+      expect(getErrorMessage()).toHaveTextContent(/value must be equal to or less than the previous field/i);
     });
+  });
 
-    it('has a disabled lastAccessPasswordExpirationMonths text field', () => {
-      const element = component.find('Field[name="lastAccessPasswordExpirationMonths"]');
-      expect(element.exists()).toBe(true);
-      const props = element.props();
-      expect(props).toHaveProperty('component', RenderTextInput);
-      expect(props).toHaveProperty('disabled', true);
-      expect(props).toHaveProperty('validate', [isNumber, montshSinceLogin]);
+  it('disables last access password expiration and max months password is valid fields when password always active is enabled', () => {
+    const {
+      getMaxMonthsPasswordValidInput, getLastAccessPasswordExpirationMonthsInput,
+    } = setupRestrictionsForm({
+      ...userRestrictions,
+      passwordAlwaysActive: true,
     });
+
+    expect(getMaxMonthsPasswordValidInput()).toHaveAttribute('disabled');
+    expect(getLastAccessPasswordExpirationMonthsInput()).toHaveAttribute('disabled');
   });
 });
diff --git a/test/ui/users/restrictions/RestrictionsFormContainer.test.js b/test/ui/users/restrictions/RestrictionsFormContainer.test.js
index 3279b5150..fe34537d0 100644
--- a/test/ui/users/restrictions/RestrictionsFormContainer.test.js
+++ b/test/ui/users/restrictions/RestrictionsFormContainer.test.js
@@ -1,38 +1,77 @@
-import { formValueSelector } from 'redux-form';
-import { mapStateToProps, mapDispatchToProps } from 'ui/users/restrictions/RestrictionsFormContainer';
+import React from 'react';
+import * as reactRedux from 'react-redux';
 
-const dispatchMock = jest.fn();
+import { renderWithState } from 'test/testUtils';
+import RestrictionsFormContainer from 'ui/users/restrictions/RestrictionsFormContainer';
+import RestrictionsForm from 'ui/users/restrictions/RestrictionsForm';
 
-jest.unmock('react-intl');
+jest.unmock('react-redux');
 
-jest.mock('redux-form', () => ({
-  formValueSelector: jest.fn(() => jest.fn(() => false)),
-  reduxForm: jest.fn(() => jest.fn(ui => ui)),
-}));
+const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
+const mockDispatch = jest.fn();
+useDispatchSpy.mockReturnValue(mockDispatch);
 
-jest.mock('state/loading/selectors', () => ({
-  getLoading: jest.fn().mockReturnValue({}),
+jest.mock('state/user-settings/actions', () => ({
+  fetchUserSettings: jest.fn(() => ({ type: 'fetchUserSettings_test' })),
+  updateUserSettings: jest.fn(payload => ({ type: 'updateUserSettings_test', payload })),
 }));
 
+jest.mock('ui/users/restrictions/RestrictionsForm', () => jest.fn(mockProps => (
+  <div>
+    <button onClick={mockProps.onMount}>onMount</button>
+    <button onClick={() => mockProps.onSubmit({})}>onSubmit</button>
+  </div>
+)));
+
+const setupRestrictionsFormContainer = (state = { userSettings: {}, loading: {} }) => {
+  const utils = renderWithState(<RestrictionsFormContainer />, { state });
+  const simulateMount = () => utils.getByText('onMount').click();
+  const simulateSubmit = () => utils.getByText('onSubmit').click();
+
+  return {
+    ...utils,
+    simulateMount,
+    simulateSubmit,
+  };
+};
+
 describe('RestrictionsFormContainer', () => {
-  it('maps passwordActive', () => {
-    expect(mapStateToProps({})).toEqual({
-      passwordActive: false,
-    });
-    expect(formValueSelector).toHaveBeenCalledWith('user-restrictions');
+  afterEach(() => {
+    mockDispatch.mockClear();
   });
 
-  it('verify that onWillMount is defined by mapDispatchToProps', () => {
-    const result = mapDispatchToProps(dispatchMock);
-    expect(result.onWillMount).toBeDefined();
-    result.onWillMount();
-    expect(dispatchMock).toHaveBeenCalled();
+  it('passes initialValues to UserForm with the correct values', () => {
+    const state = {
+      userSettings: {
+        enableGravatarIntegration: false,
+        passwordAlwaysActive: false,
+        maxMonthsPasswordValid: 1,
+        lastAccessPasswordExpirationMonths: 1,
+      },
+      loading: {},
+    };
+    setupRestrictionsFormContainer(state);
+
+    expect(RestrictionsForm).toHaveBeenCalledWith(expect.objectContaining({
+      initialValues: state.userSettings,
+    }), {});
   });
 
-  it('verify that onSubmit is defined by mapDispatchToProps', () => {
-    const result = mapDispatchToProps(dispatchMock);
-    expect(result.onSubmit).toBeDefined();
-    result.onSubmit({});
-    expect(dispatchMock).toHaveBeenCalled();
+  it('fetches user settings data when RestrictionsForm mounts', () => {
+    const { simulateMount } = setupRestrictionsFormContainer();
+
+    simulateMount();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'fetchUserSettings_test' });
+  });
+
+  it('calls the correct user settings action when RestrictionsForm is submitted', () => {
+    const { simulateSubmit } = setupRestrictionsFormContainer();
+
+    simulateSubmit();
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'updateUserSettings_test', payload: expect.any(Object) });
   });
 });
diff --git a/test/ui/widgets/common/WidgetForm.test.js b/test/ui/widgets/common/WidgetForm.test.js
index acbd678b7..fe1d36a9a 100644
--- a/test/ui/widgets/common/WidgetForm.test.js
+++ b/test/ui/widgets/common/WidgetForm.test.js
@@ -4,28 +4,32 @@ import { shallowWithIntl, mockIntl } from 'test/legacyTestUtils';
 import { WidgetFormBody, renderDefaultUIField } from 'ui/widgets/common/WidgetForm';
 import { LANGUAGES_LIST as LANGUAGES } from 'test/mocks/languages';
 
-const handleSubmit = jest.fn();
+const onSubmit = jest.fn();
 const onWillMount = jest.fn();
+const setFieldValue = jest.fn();
+const handleSubmit = jest.fn();
 
 describe('WidgetForm', () => {
   let widgetForm = null;
-  let submitting;
-  let invalid;
+  let isSubmitting;
+  let isValid;
   let groups;
 
 
   beforeEach(() => {
-    submitting = false;
-    invalid = false;
+    isSubmitting = false;
+    isValid = true;
     groups = [];
   });
 
   const buildWidgetForm = (mode) => {
     const props = {
-      submitting,
-      invalid,
+      isSubmitting,
+      isValid,
+      onSubmit,
       handleSubmit,
       onWillMount,
+      setFieldValue,
       groups,
       mode,
       languages: LANGUAGES,
@@ -99,7 +103,7 @@ describe('WidgetForm', () => {
 
 
   it('disables submit buttons while submitting', () => {
-    submitting = true;
+    isSubmitting = true;
     widgetForm = buildWidgetForm();
     const regularSaveButton = widgetForm.find('#regularSaveButton');
     expect(regularSaveButton.prop('disabled')).toEqual(true);
@@ -108,7 +112,7 @@ describe('WidgetForm', () => {
   });
 
   it('disables submit buttons if form is invalid', () => {
-    invalid = true;
+    isValid = false;
     widgetForm = buildWidgetForm();
     const regularSaveButton = widgetForm.find('#regularSaveButton');
     expect(regularSaveButton.prop('disabled')).toEqual(true);
@@ -116,10 +120,10 @@ describe('WidgetForm', () => {
     expect(continueSaveButton.prop('disabled')).toEqual(true);
   });
 
-  it('on form submit calls handleSubmit', () => {
+  it('on form submit calls handleSubmit', async () => {
     widgetForm = buildWidgetForm();
     const preventDefault = jest.fn();
-    widgetForm.find('form').simulate('submit', { preventDefault });
+    await widgetForm.find('#regularSaveButton').simulate('click', { preventDefault });
     expect(handleSubmit).toHaveBeenCalled();
   });
 });
diff --git a/test/ui/widgets/edit/EditWidgetPageContainer.test.js b/test/ui/widgets/edit/EditWidgetPageContainer.test.js
index 8546960e4..421e48378 100644
--- a/test/ui/widgets/edit/EditWidgetPageContainer.test.js
+++ b/test/ui/widgets/edit/EditWidgetPageContainer.test.js
@@ -5,26 +5,47 @@ import { mapStateToProps } from 'ui/widgets/edit/EditWidgetPageContainer';
 // mocked
 import { returnedFuncMock } from 'redux-form';
 
+const LANGUAGES_MAP = {
+  it: {
+    code: 'it',
+    description: 'Italiano',
+    isActive: true,
+    isDefault: false,
+  },
+  en: {
+    code: 'en',
+    description: 'English',
+    isActive: true,
+    isDefault: true,
+  },
+};
+const LANGUAGES_LIST = [
+  'it',
+  'en',
+];
+
 const TEST_STATE = {
   mode: 'edit',
-  form: {
-    widget: {
-      values: {
-        code: 'test_widget',
-        name: 'Test Widget',
-        used: 0,
-        titles: {
-          it: 'Widget di Test',
-          en: 'Test Widget',
-        },
-        group: 'group',
-        customUi: '<p>Custom UI</p>',
-        defaultUi: '<p>Default UI</p>',
-        createdAt: '2018/02/22',
-        updatedAt: '2018/02/22',
+  widgets: {
+    selected: {
+      code: 'test_widget',
+      name: 'Test Widget',
+      used: 0,
+      titles: {
+        it: 'Widget di Test',
+        en: 'Test Widget',
       },
+      group: 'group',
+      customUi: '<p>Custom UI</p>',
+      defaultUi: '<p>Default UI</p>',
+      createdAt: '2018/02/22',
+      updatedAt: '2018/02/22',
     },
   },
+  languages: {
+    map: LANGUAGES_MAP,
+    list: LANGUAGES_LIST,
+  },
 };
 
 const ownProps = {