TRA-4276 Folder structure refactor (#1131 )

* mizu-common folder structure refactor * no message * change images import from absolute to relative * relative sass imports * no message * remove tgz * spinner style
TRA-4596_Update material UI to v5 (#1132 )
2026-02-15 02:19:54 +00:00 · 2022-06-12 11:20:47 +03:00 · 2022-06-08 15:32:34 +03:00 · 2022-06-06 17:53:12 +03:00 · 2022-06-06 16:40:23 +03:00 · 2022-06-06 16:26:07 +03:00
101 changed files with 1032 additions and 993 deletions
--- a/acceptanceTests/Makefile
+++ b/acceptanceTests/Makefile
@@ -1,2 +1,3 @@
 test: ## Run acceptance tests.
+	@npm install cypress@10.0.1 -y
 	@go test ./... -timeout 1h -v
--- a/acceptanceTests/cypress.config.js
+++ b/acceptanceTests/cypress.config.js
@@ -0,0 +1,31 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  watchForFileChanges: false,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  video: false,
+  screenshotOnRunFailure: false,
+  defaultCommandTimeout: 6000,
+  env: {
+    testUrl: 'http://localhost:8899/',
+    redactHeaderContent: 'User-Header[REDACTED]',
+    redactBodyContent: '{ "User": "[REDACTED]" }',
+    regexMaskingBodyContent: '[REDACTED]',
+    greenFilterColor: 'rgb(210, 250, 210)',
+    redFilterColor: 'rgb(250, 214, 220)',
+    bodyJsonClass: '.hljs',
+    mizuWidth: 1920,
+    normalMizuHeight: 1080,
+    hugeMizuHeight: 3500,
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    // setupNodeEvents(on, config) {
+    //   return require('./cypress/plugins/index.js')(on, config)
+    // },
+    specPattern: 'cypress/e2e/tests/*.js',
+    supportFile: false
+  },
+})
--- a/acceptanceTests/cypress.json
+++ b/acceptanceTests/cypress.json
@@ -1,34 +0,0 @@
-{
-  "watchForFileChanges":false,
-  "viewportWidth": 1920,
-  "viewportHeight": 1080,
-  "video": false,
-  "screenshotOnRunFailure": false,
-  "defaultCommandTimeout": 6000,
-  "testFiles": [
-    "tests/GuiPort.js",
-    "tests/MultipleNamespaces.js",
-    "tests/Redact.js",
-    "tests/NoRedact.js",
-    "tests/Regex.js",
-    "tests/RegexMasking.js",
-    "tests/IgnoredUserAgents.js",
-    "tests/UiTest.js",
-    "tests/Redis.js",
-    "tests/Rabbit.js",
-    "tests/serviceMapFunction.js"
-  ],
-
-  "env": {
-    "testUrl": "http://localhost:8899/",
-    "redactHeaderContent": "User-Header[REDACTED]",
-    "redactBodyContent": "{ \"User\": \"[REDACTED]\" }",
-    "regexMaskingBodyContent": "[REDACTED]",
-    "greenFilterColor": "rgb(210, 250, 210)",
-    "redFilterColor": "rgb(250, 214, 220)",
-    "bodyJsonClass": ".hljs",
-    "mizuWidth": 1920,
-    "normalMizuHeight": 1080,
-    "hugeMizuHeight": 3500
-  }
-}
--- a/acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js
+++ b/acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js
--- a/acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js
+++ b/acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js
@@ -4,8 +4,6 @@ export const valueTabs = {
    none: null
 }

-const maxEntriesInDom = 13;
-
 export function isValueExistsInElement(shouldInclude, content, domPathToContainer){
    it(`should ${shouldInclude ? '' : 'not'} include '${content}'`, function () {
        cy.get(domPathToContainer).then(htmlText => {
--- a/acceptanceTests/cypress/integration/tests/GuiPort.js
+++ b/acceptanceTests/cypress/integration/tests/GuiPort.js
--- a/acceptanceTests/cypress/integration/tests/IgnoredUserAgents.js
+++ b/acceptanceTests/cypress/integration/tests/IgnoredUserAgents.js
--- a/acceptanceTests/cypress/integration/tests/MultipleNamespaces.js
+++ b/acceptanceTests/cypress/integration/tests/MultipleNamespaces.js
--- a/acceptanceTests/cypress/integration/tests/NoRedact.js
+++ b/acceptanceTests/cypress/integration/tests/NoRedact.js
--- a/acceptanceTests/cypress/integration/tests/Rabbit.js
+++ b/acceptanceTests/cypress/integration/tests/Rabbit.js
--- a/acceptanceTests/cypress/integration/tests/Redact.js
+++ b/acceptanceTests/cypress/integration/tests/Redact.js
--- a/acceptanceTests/cypress/integration/tests/Redis.js
+++ b/acceptanceTests/cypress/integration/tests/Redis.js
--- a/acceptanceTests/cypress/integration/tests/Regex.js
+++ b/acceptanceTests/cypress/integration/tests/Regex.js
--- a/acceptanceTests/cypress/integration/tests/RegexMasking.js
+++ b/acceptanceTests/cypress/integration/tests/RegexMasking.js
--- a/acceptanceTests/cypress/integration/tests/UiTest.js
+++ b/acceptanceTests/cypress/integration/tests/UiTest.js
--- a/acceptanceTests/extensions_test.go
+++ b/acceptanceTests/extensions_test.go
@@ -105,7 +105,7 @@ func TestRedis(t *testing.T) {
 		}
 	}

-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Redis.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Redis.js\"")
 }

 func TestAmqp(t *testing.T) {
@@ -236,5 +236,5 @@ func TestAmqp(t *testing.T) {
 		ch.Close()
 	}

-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Rabbit.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Rabbit.js\"")
 }
--- a/acceptanceTests/setup.sh
+++ b/acceptanceTests/setup.sh
@@ -27,7 +27,7 @@ else
 fi

 echo "Starting minikube..."
-minikube start
+minikube start --cpus 2 --memory 6946

 echo "Creating mizu tests namespaces"
 kubectl create namespace mizu-tests --dry-run=client -o yaml | kubectl apply -f -
--- a/acceptanceTests/tap_test.go
+++ b/acceptanceTests/tap_test.go
@@ -78,7 +78,7 @@ func basicTapTest(t *testing.T, shouldCheckSrcAndDest bool, extraArgs... string)
 				expectedPodsStr += fmt.Sprintf("Name:%vNamespace:%v", expectedPods[i].Name, expectedPods[i].Namespace)
 			}

-			RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/UiTest.js\" --env entriesCount=%d,arrayDict=%v,shouldCheckSrcAndDest=%v",
+			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/UiTest.js\" --env entriesCount=%d,arrayDict=%v,shouldCheckSrcAndDest=%v",
 				entriesCount, expectedPodsStr, shouldCheckSrcAndDest))
 		})
 	}
@@ -135,7 +135,7 @@ func TestTapGuiPort(t *testing.T) {
 				}
 			}

-			RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec \"cypress/integration/tests/GuiPort.js\" --env name=%v,namespace=%v,port=%d",
+			RunCypressTests(t, fmt.Sprintf("npx cypress run --spec \"cypress/e2e/tests/GuiPort.js\" --env name=%v,namespace=%v,port=%d",
 				"httpbin", "mizu-tests", guiPort))
 		})
 	}
@@ -182,7 +182,7 @@ func TestTapAllNamespaces(t *testing.T) {
 		return
 	}

-	RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
 		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }

@@ -231,7 +231,7 @@ func TestTapMultipleNamespaces(t *testing.T) {
 		return
 	}

-	RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
 		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }

@@ -277,7 +277,7 @@ func TestTapRegex(t *testing.T) {
 		return
 	}

-	RunCypressTests(t, fmt.Sprintf("npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Regex.js\" --env name=%v,namespace=%v",
+	RunCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/e2e/tests/Regex.js\" --env name=%v,namespace=%v",
 		expectedPods[0].Name, expectedPods[0].Namespace))
 }

@@ -376,7 +376,7 @@ func TestTapRedact(t *testing.T) {
 		}
 	}

-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/Redact.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/Redact.js\"")
 }

 func TestTapNoRedact(t *testing.T) {
@@ -426,7 +426,7 @@ func TestTapNoRedact(t *testing.T) {
 		}
 	}

-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/NoRedact.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/NoRedact.js\"")
 }

 func TestTapRegexMasking(t *testing.T) {
@@ -479,7 +479,7 @@ func TestTapRegexMasking(t *testing.T) {
 		}
 	}

-	RunCypressTests(t, "npx cypress@9.5.4 run --spec \"cypress/integration/tests/RegexMasking.js\"")
+	RunCypressTests(t, "npx cypress run --spec \"cypress/e2e/tests/RegexMasking.js\"")

 }

@@ -541,7 +541,7 @@ func TestTapIgnoredUserAgents(t *testing.T) {
 		}
 	}

-	RunCypressTests(t, "npx cypress@9.5.4 run --spec  \"cypress/integration/tests/IgnoredUserAgents.js\"")
+	RunCypressTests(t, "npx cypress run --spec  \"cypress/e2e/tests/IgnoredUserAgents.js\"")
 }

 func TestTapDumpLogs(t *testing.T) {
--- a/ui-common/package-lock.json
+++ b/ui-common/package-lock.json
@@ -10,6 +10,12 @@
      "license": "MIT",
      "dependencies": {
        "@craco/craco": "^6.4.3",
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.8.2",
+        "@mui/lab": "^5.0.0-alpha.84",
+        "@mui/material": "^5.8.2",
+        "@mui/styles": "^5.8.0",
        "@types/lodash": "^4.14.182",
        "@uiw/react-textarea-code-editor": "^1.6.0",
        "axios": "^0.27.2",
@@ -57,9 +63,6 @@
      },
      "peerDependencies": {
        "@craco/craco": "^6.4.3",
-        "@material-ui/core": "^4.12.4",
-        "@material-ui/icons": "^4.11.3",
-        "@material-ui/lab": "^4.0.0-alpha.60",
        "@types/jest": "^26.0.24",
        "@types/node": "^12.20.54",
        "node-sass": "^6.0.1",
@@ -1962,6 +1965,75 @@
      "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==",
      "peer": true
    },
+    "node_modules/@date-io/core": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz",
+      "integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz",
+      "integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==",
+      "dependencies": {
+        "@date-io/core": "^2.14.0"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/dayjs": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz",
+      "integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==",
+      "dependencies": {
+        "@date-io/core": "^2.14.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/luxon": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz",
+      "integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==",
+      "dependencies": {
+        "@date-io/core": "^2.14.0"
+      },
+      "peerDependencies": {
+        "luxon": "^1.21.3 || ^2.x"
+      },
+      "peerDependenciesMeta": {
+        "luxon": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz",
+      "integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==",
+      "dependencies": {
+        "@date-io/core": "^2.14.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@egjs/hammerjs": {
      "version": "2.0.17",
      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -1974,6 +2046,47 @@
        "node": ">=0.8.0"
      }
    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/@emotion/cache": {
      "version": "11.7.1",
      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
@@ -2004,11 +2117,79 @@
      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
    },
+    "node_modules/@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
    "node_modules/@emotion/sheet": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
    },
+    "node_modules/@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@emotion/stylis": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -2963,213 +3144,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/@material-ui/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.5",
-        "@material-ui/system": "^4.12.2",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/core/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "peer": true
-    },
-    "node_modules/@material-ui/icons": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
-      "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.4.4"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "@material-ui/core": "^4.0.0",
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/lab": {
-      "version": "4.0.0-alpha.61",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz",
-      "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "@material-ui/core": "^4.12.1",
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/lab/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "peer": true
-    },
-    "node_modules/@material-ui/styles": {
-      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
-      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/system": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "peer": true,
-      "peerDependencies": {
-        "@types/react": "*"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      }
-    },
-    "node_modules/@material-ui/utils/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "peer": true
-    },
    "node_modules/@mui/base": {
      "version": "5.0.0-alpha.83",
      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
@@ -3232,6 +3206,70 @@
        }
      }
    },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.84",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.84.tgz",
+      "integrity": "sha512-HLYD6E3PAlzKMGZkkpiPI7trHP3WYDvrjQstEsFwdaGy9AMWPmyTxhwUyfB4VVHOx3zcj4p/a36kECDtEOAJ+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/base": "5.0.0-alpha.83",
+        "@mui/system": "^5.8.2",
+        "@mui/utils": "^5.8.0",
+        "@mui/x-date-pickers": "5.0.0-alpha.1",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "date-fns": "^2.25.0",
+        "dayjs": "^1.10.7",
+        "luxon": "^1.28.0 || ^2.0.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
    "node_modules/@mui/material": {
      "version": "5.8.2",
      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",
@@ -3471,6 +3509,53 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "5.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.1.tgz",
+      "integrity": "sha512-dLPkRiIn2Gr0momblxiOnIwrxn4SijVix+8e08mwAGWhiWcmWep1O9XTRDpZsjB0kjHYCf+kZjlRX4dxnj2acg==",
+      "dependencies": {
+        "@date-io/date-fns": "^2.11.0",
+        "@date-io/dayjs": "^2.11.0",
+        "@date-io/luxon": "^2.11.1",
+        "@date-io/moment": "^2.11.0",
+        "@mui/utils": "^5.6.0",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.2.3",
+        "@mui/system": "^5.2.3",
+        "date-fns": "^2.25.0",
+        "dayjs": "^1.10.7",
+        "luxon": "^1.28.0 || ^2.0.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -6257,7 +6342,6 @@
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
-      "dev": true,
      "dependencies": {
        "@babel/runtime": "^7.7.2",
        "cosmiconfig": "^6.0.0",
@@ -6268,7 +6352,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-      "dev": true,
      "dependencies": {
        "@types/parse-json": "^4.0.0",
        "import-fresh": "^3.1.0",
@@ -9084,12 +9167,6 @@
      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
      "peer": true
    },
-    "node_modules/csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
-      "peer": true
-    },
    "node_modules/cyclist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -11864,6 +11941,11 @@
        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
      }
    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "node_modules/find-up": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -21321,12 +21403,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==",
-      "peer": true
-    },
    "node_modules/portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -26617,6 +26693,14 @@
      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
    },
+    "node_modules/rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
    "node_modules/rimraf": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -35208,6 +35292,43 @@
      "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==",
      "peer": true
    },
+    "@date-io/core": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz",
+      "integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz",
+      "integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz",
+      "integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz",
+      "integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz",
+      "integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
    "@egjs/hammerjs": {
      "version": "2.0.17",
      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -35217,6 +35338,37 @@
        "@types/hammerjs": "^2.0.36"
      }
    },
+    "@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
    "@emotion/cache": {
      "version": "11.7.1",
      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
@@ -35247,11 +35399,56 @@
      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
    },
+    "@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+        }
+      }
+    },
    "@emotion/sheet": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
    },
+    "@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      }
+    },
    "@emotion/stylis": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -36002,126 +36199,6 @@
        "unist-util-visit": "^2.0.3"
      }
    },
-    "@material-ui/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.5",
-        "@material-ui/system": "^4.12.2",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "peer": true
-        }
-      }
-    },
-    "@material-ui/icons": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
-      "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.4.4"
-      }
-    },
-    "@material-ui/lab": {
-      "version": "4.0.0-alpha.61",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz",
-      "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "peer": true
-        }
-      }
-    },
-    "@material-ui/styles": {
-      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
-      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/system": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "peer": true,
-      "requires": {}
-    },
-    "@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "peer": true
-        }
-      }
-    },
    "@mui/base": {
      "version": "5.0.0-alpha.83",
      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
@@ -36152,6 +36229,30 @@
        "@babel/runtime": "^7.17.2"
      }
    },
+    "@mui/lab": {
+      "version": "5.0.0-alpha.84",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.84.tgz",
+      "integrity": "sha512-HLYD6E3PAlzKMGZkkpiPI7trHP3WYDvrjQstEsFwdaGy9AMWPmyTxhwUyfB4VVHOx3zcj4p/a36kECDtEOAJ+g==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/base": "5.0.0-alpha.83",
+        "@mui/system": "^5.8.2",
+        "@mui/utils": "^5.8.0",
+        "@mui/x-date-pickers": "5.0.0-alpha.1",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
    "@mui/material": {
      "version": "5.8.2",
      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",
@@ -36281,6 +36382,22 @@
        }
      }
    },
+    "@mui/x-date-pickers": {
+      "version": "5.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.1.tgz",
+      "integrity": "sha512-dLPkRiIn2Gr0momblxiOnIwrxn4SijVix+8e08mwAGWhiWcmWep1O9XTRDpZsjB0kjHYCf+kZjlRX4dxnj2acg==",
+      "requires": {
+        "@date-io/date-fns": "^2.11.0",
+        "@date-io/dayjs": "^2.11.0",
+        "@date-io/luxon": "^2.11.1",
+        "@date-io/moment": "^2.11.0",
+        "@mui/utils": "^5.6.0",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      }
+    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -38422,7 +38539,6 @@
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
-      "dev": true,
      "requires": {
        "@babel/runtime": "^7.7.2",
        "cosmiconfig": "^6.0.0",
@@ -38433,7 +38549,6 @@
          "version": "6.0.0",
          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-          "dev": true,
          "requires": {
            "@types/parse-json": "^4.0.0",
            "import-fresh": "^3.1.0",
@@ -40653,12 +40768,6 @@
        }
      }
    },
-    "csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
-      "peer": true
-    },
    "cyclist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -42786,6 +42895,11 @@
        "pkg-dir": "^4.1.0"
      }
    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "find-up": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -49994,12 +50108,6 @@
        "@babel/runtime": "^7.17.8"
      }
    },
-    "popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==",
-      "peer": true
-    },
    "portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -54111,6 +54219,12 @@
      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
    },
+    "rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "requires": {}
+    },
    "rimraf": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
--- a/ui-common/package.json
+++ b/ui-common/package.json
@@ -24,9 +24,6 @@
  },
  "peerDependencies": {
    "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.54",
    "node-sass": "^6.0.1",
@@ -37,6 +34,12 @@
  },
  "dependencies": {
    "@craco/craco": "^6.4.3",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.2",
+    "@mui/lab": "^5.0.0-alpha.84",
+    "@mui/material": "^5.8.2",
+    "@mui/styles": "^5.8.0",
    "@types/lodash": "^4.14.182",
    "@uiw/react-textarea-code-editor": "^1.6.0",
    "axios": "^0.27.2",
--- a/ui-common/src/components/EntriesList/EntriesList.module.sass
+++ b/ui-common/src/components/EntriesList/EntriesList.module.sass
--- a/ui-common/src/components/TrafficViewer/EntriesList.tsx
+++ b/ui-common/src/components/TrafficViewer/EntriesList.tsx
@@ -1,15 +1,15 @@
 import React, {useCallback, useEffect, useMemo, useState} from "react";
-import styles from '../style/EntriesList.module.sass';
+import styles from './EntriesList.module.sass';
 import ScrollableFeedVirtualized from "react-scrollable-feed-virtualized";
 import Moment from 'moment';
-import {EntryItem} from "./EntryListItem/EntryListItem";
-import down from "assets/downImg.svg";
-import spinner from 'assets/spinner.svg';
+import {EntryItem} from "../EntryListItem/EntryListItem";
+import down from "../assets/downImg.svg";
+import spinner from '../assets/spinner.svg';
 import {RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
 import entriesAtom from "../../recoil/entries";
 import queryAtom from "../../recoil/query";
 import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi";
-import TrafficViewerApi from "./TrafficViewerApi";
+import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import {toast} from "react-toastify";
 import {MAX_ENTRIES, TOAST_CONTAINER_ID} from "../../configs/Consts";
--- a/ui-common/src/components/EntryDetailed/EntryDetailed.tsx
+++ b/ui-common/src/components/EntryDetailed/EntryDetailed.tsx
@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from "react";
-import EntryViewer from "./EntryDetailed/EntryViewer";
-import { EntryItem } from "./EntryListItem/EntryListItem";
-import { makeStyles } from "@material-ui/core";
-import Protocol from "../UI/Protocol"
-import Queryable from "../UI/Queryable";
+import EntryViewer from "./EntryViewer/EntryViewer";
+import { EntryItem } from "../EntryListItem/EntryListItem";
+import makeStyles from '@mui/styles/makeStyles';
+import Protocol from "../UI/Protocol/Protocol"
+import Queryable from "../UI/Queryable/Queryable";
 import { toast } from "react-toastify";
 import { RecoilState, useRecoilValue } from "recoil";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
-import TrafficViewerApi from "./TrafficViewerApi";
+import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
 import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
 import queryAtom from "../../recoil/query/atom";
 import useWindowDimensions, { useRequestTextByWidth } from "../../hooks/WindowDimensionsHook";
 import { TOAST_CONTAINER_ID } from "../../configs/Consts";
-import spinner from "assets/spinner.svg";
+import spinner from "../assets/spinner.svg";

 const useStyles = makeStyles(() => ({
    entryTitle: {
--- a/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.module.sass
+++ b/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.module.sass
--- a/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx
+++ b/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx
@@ -1,10 +1,10 @@
 import styles from "./EntrySections.module.sass";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
-import CollapsibleContainer from "../../UI/CollapsibleContainer";
-import FancyTextDisplay from "../../UI/FancyTextDisplay";
-import Queryable from "../../UI/Queryable";
-import Checkbox from "../../UI/Checkbox";
+import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter";
+import CollapsibleContainer from "../../UI/CollapsibleContainer/CollapsibleContainer";
+import FancyTextDisplay from "../../UI/FancyTextDisplay/FancyTextDisplay";
+import Queryable from "../../UI/Queryable/Queryable";
+import Checkbox from "../../UI/Checkbox/Checkbox";
 import ProtobufDecoder from "protobuf-decoder";
 import { default as jsonBeautify } from "json-beautify";
 import { default as xmlBeautify } from "xml-formatter";
--- a/ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.module.sass
+++ b/ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.module.sass
--- a/ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import styles from './EntryViewer.module.sass';
-import Tabs from "../../UI/Tabs";
-import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "./EntrySections";
+import Tabs from "../../UI/Tabs/Tabs";
+import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "../EntrySections/EntrySections";

 enum SectionTypes {
    SectionTable = "table",
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
@@ -1,4 +1,4 @@
-@import '../../../variables.module'
+@import '../../variables.module'

 .row
  display: flex
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
@@ -1,21 +1,21 @@
 import React from "react";
 import Moment from 'moment';
-import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import styles from './EntryListItem.module.sass';
-import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
-import Protocol, {ProtocolInterface} from "../../UI/Protocol"
-import eBPFLogo from 'assets/lock.svg';
-import {Summary} from "../../UI/Summary";
-import Queryable from "../../UI/Queryable";
-import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
-import ingoingIconFailure from "assets/ingoing-traffic-failure.svg"
-import ingoingIconNeutral from "assets/ingoing-traffic-neutral.svg"
-import outgoingIconSuccess from "assets/outgoing-traffic-success.svg"
-import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
-import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
+import StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode/StatusCode";
+import Protocol, {ProtocolInterface} from "../UI/Protocol/Protocol"
+import eBPFLogo from './assets/lock.svg';
+import {Summary} from "../UI/Summary/Summary";
+import Queryable from "../UI/Queryable/Queryable";
+import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg"
+import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
+import ingoingIconNeutral from "./assets/ingoing-traffic-neutral.svg"
+import outgoingIconSuccess from "./assets/outgoing-traffic-success.svg"
+import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
+import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
 import {useRecoilState} from "recoil";
-import focusedEntryIdAtom from "../../../recoil/focusedEntryId";
-import queryAtom from "../../../recoil/query";
+import focusedEntryIdAtom from "../../recoil/focusedEntryId";
+import queryAtom from "../../recoil/query";

 interface TCPInterface {
    ip: string
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-failure.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-failure.svg
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-neutral.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-neutral.svg
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-success.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-success.svg
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/lock.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/lock.svg
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-failure.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-failure.svg
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-neutral.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-neutral.svg
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-success.svg
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-success.svg
--- a/ui-common/src/components/Filters/Filters.module.sass
+++ b/ui-common/src/components/Filters/Filters.module.sass
--- a/ui-common/src/components/TrafficViewer/Filters.tsx
+++ b/ui-common/src/components/TrafficViewer/Filters.tsx
@@ -1,36 +1,43 @@
-import React, {useRef, useState} from "react";
-import styles from '../style/Filters.module.sass';
-import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider} from "@material-ui/core";
+import React, { FC, useEffect, useMemo, useRef, useState } from "react";
+import styles from './Filters.module.sass';
+import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider, debounce} from "@mui/material";
 import CodeEditor from '@uiw/react-textarea-code-editor';
-import MenuBookIcon from '@material-ui/icons/MenuBook';
-import {SyntaxHighlighter} from "../UI/SyntaxHighlighter/index";
-import filterUIExample1 from "assets/filter-ui-example-1.png"
-import filterUIExample2 from "assets/filter-ui-example-2.png"
+import MenuBookIcon from '@mui/icons-material/MenuBook';
+import { SyntaxHighlighter } from "../UI/SyntaxHighlighter";
+import filterUIExample1 from "../TrafficViewer/assets/filter-ui-example-1.png"
+import filterUIExample2 from "../TrafficViewer/assets/filter-ui-example-2.png"
 import variables from '../../variables.module.scss';
-import {useRecoilState, useRecoilValue} from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import queryAtom from "../../recoil/query";
 import useKeyPress from "../../hooks/useKeyPress"
 import shortcutsKeyboard from "../../configs/shortcutsKeyboard"
-import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
+import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";


 interface FiltersProps {
-    backgroundColor: string
    reopenConnection: any;
 }

-export const Filters: React.FC<FiltersProps> = ({backgroundColor, reopenConnection}) => {
+export const Filters: React.FC<FiltersProps> = ({ reopenConnection }) => {
+    const [query, setQuery] = useRecoilState(queryAtom);
+    const api: any = useRecoilValue(TrafficViewerApiAtom)
+
    return <div className={styles.container}>
        <QueryForm
-            backgroundColor={backgroundColor}
+            query={query}
            reopenConnection={reopenConnection}
-        />
+            onQueryChange={(query) => { setQuery(query?.trim()); }} validateQuery={api?.validateQuery} />
    </div>;
 };

+type OnQueryChange = { valid: boolean, message: string, query: string }
+
 interface QueryFormProps {
-    backgroundColor: string
-    reopenConnection: any;
+    reopenConnection?: any;
+    query: string
+    onQueryChange?: (query: string) => void
+    validateQuery: (query: string) => Promise<{ valid: boolean, message: string }>;
+    onValidationChanged?: (event: OnQueryChange) => void
 }

 export const modalStyle = {
@@ -47,20 +54,57 @@ export const modalStyle = {
    color: '#000',
 };

-export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, reopenConnection}) => {
+export const CodeEditorWrap: FC<QueryFormProps> = ({ query, onQueryChange, validateQuery, onValidationChanged }) => {
+    const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
+    const handleQueryChange = useMemo(
+        () =>
+            debounce(async (query: string) => {
+                if (!query) {
+                    setQueryBackgroundColor("#f5f5f5");
+                    onValidationChanged && onValidationChanged({ query: query, message: "", valid: true })
+                } else {
+                    const data = await validateQuery(query);
+                    if (!data) {
+                        return;
+                    }
+                    if (data.valid) {
+                        setQueryBackgroundColor("#d2fad2");
+                    } else {
+                        setQueryBackgroundColor("#fad6dc");
+                    }
+                    onValidationChanged && onValidationChanged({ query: query, message: data.message, valid: data.valid })
+                }
+            }, 500),
+        [onValidationChanged, validateQuery]
+    ) as (query: string) => void;
+
+    useEffect(() => {
+        handleQueryChange(query);
+    }, [query, handleQueryChange]);
+
+    return <CodeEditor
+        value={query}
+        language="py"
+        placeholder="Mizu Filter Syntax"
+        onChange={(event) => onQueryChange(event.target.value)}
+        padding={8}
+        style={{
+            fontSize: 14,
+            backgroundColor: `${queryBackgroundColor}`,
+            fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
+        }}
+    />
+}
+
+export const QueryForm: React.FC<QueryFormProps> = ({ validateQuery, reopenConnection, query, onQueryChange, onValidationChanged }) => {

    const formRef = useRef<HTMLFormElement>(null);
-    const [query, setQuery] = useRecoilState(queryAtom);

    const [openModal, setOpenModal] = useState(false);

    const handleOpenModal = () => setOpenModal(true);
    const handleCloseModal = () => setOpenModal(false);

-    const handleChange = async (e) => {
-        setQuery(e.target.value.trim());
-    }
-
    const handleSubmit = (e) => {
        reopenConnection();
        e.preventDefault();
@@ -86,18 +130,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, reopenConn
                    }}
                >
                    <label>
-                        <CodeEditor
-                            value={query}
-                            language="py"
-                            placeholder="Mizu Filter Syntax"
-                            onChange={handleChange}
-                            padding={8}
-                            style={{
-                                fontSize: 14,
-                                backgroundColor: `${backgroundColor}`,
-                                fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
-                            }}
-                        />
+                        <CodeEditorWrap validateQuery={validateQuery} query={query} onQueryChange={onQueryChange} onValidationChanged={onValidationChanged} />
                    </label>
                </Grid>
                <Grid item xs={4}>
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
@@ -1,4 +1,4 @@
-@import 'src/variables.module'
+@import '../../variables.module'

 .TrafficPage
    width: 100%
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@@ -1,24 +1,23 @@
-import React, {useEffect, useMemo, useRef, useState} from "react";
-import {Filters} from "./Filters";
-import {EntriesList} from "./EntriesList";
-import {makeStyles} from "@material-ui/core";
+import React, { useEffect, useRef, useState } from "react";
+import { Filters } from "../Filters/Filters";
+import { EntriesList } from "../EntriesList/EntriesList";
+import makeStyles from '@mui/styles/makeStyles';
 import TrafficViewerStyles from "./TrafficViewer.module.sass";
-import styles from '../style/EntriesList.module.sass';
-import {EntryDetailed} from "./EntryDetailed";
+import styles from '../EntriesList/EntriesList.module.sass';
+import { EntryDetailed } from "../EntryDetailed/EntryDetailed";
 import playIcon from 'assets/run.svg';
 import pauseIcon from 'assets/pause.svg';
 import variables from '../../variables.module.scss';
-import {ToastContainer} from 'react-toastify';
-import debounce from 'lodash/debounce';
-import {RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
+import { ToastContainer } from 'react-toastify';
+import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import entriesAtom from "../../recoil/entries";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import queryAtom from "../../recoil/query";
 import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
 import TrafficViewerApi from "./TrafficViewerApi";
-import {StatusBar} from "../UI/StatusBar";
+import { StatusBar } from "../UI/StatusBar/StatusBar";
 import tappingStatusAtom from "../../recoil/tappingStatus/atom";
-import {TOAST_CONTAINER_ID} from "../../configs/Consts";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 import leftOffTopAtom from "../../recoil/leftOffTop";
 import { DEFAULT_LEFTOFF, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS } from '../../hooks/useWS';

@@ -70,34 +69,12 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
  const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
  const [wsReadyState, setWsReadyState] = useState(0);

-  const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
-
  const setLeftOffTop = useSetRecoilState(leftOffTopAtom);
  const scrollableRef = useRef(null);

-  const handleQueryChange = useMemo(
-    () =>
-      debounce(async (query: string) => {
-        if (!query) {
-          setQueryBackgroundColor("#f5f5f5");
-        } else {
-          const data = await trafficViewerApiProp.validateQuery(query);
-          if (!data) {
-            return;
-          }
-          if (data.valid) {
-            setQueryBackgroundColor("#d2fad2");
-          } else {
-            setQueryBackgroundColor("#fad6dc");
-          }
-        }
-      }, 500),
-    []
-  ) as (query: string) => void;

-  useEffect(() => {
-    handleQueryChange(query);
-  }, [query, handleQueryChange]);
+
+

  useEffect(() => {
    if(shouldCloseWebSocket){
@@ -262,7 +239,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
      {<div className={TrafficViewerStyles.TrafficPageContainer}>
        <div className={TrafficViewerStyles.TrafficPageListContainer}>
          <Filters
-            backgroundColor={queryBackgroundColor}
            reopenConnection={reopenConnection}
          />
          <div className={styles.container}>
--- a/ui-common/src/components/TrafficViewer/assets/spinner.svg
+++ b/ui-common/src/components/TrafficViewer/assets/spinner.svg
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<circle cx="50" cy="50" fill="none" stroke="#1d3f72" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(275.903 50 50)">
-  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
-</circle>
-<!-- [ldio] generated by https://loading.io/ --></svg>
--- a/ui-common/src/components/UI/Checkbox/Checkbox.tsx
+++ b/ui-common/src/components/UI/Checkbox/Checkbox.tsx
--- a/ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.module.sass
+++ b/ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.module.sass
--- a/ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.tsx
+++ b/ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import collapsedImg from "assets/collapsed.svg";
-import expandedImg from "assets/expanded.svg";
-import styles from "./style/CollapsibleContainer.module.sass";
+import collapsedImg from "../assets/collapsed.svg";
+import expandedImg from "../assets/expanded.svg";
+import styles from "./CollapsibleContainer.module.sass";

 interface Props {
    title: string | React.ReactNode,
--- a/ui-common/src/components/UI/CustomModal/CustomModal.tsx
+++ b/ui-common/src/components/UI/CustomModal/CustomModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { makeStyles, Modal, Backdrop, Fade, Box } from '@material-ui/core';
-import {useCommonStyles} from "../../helpers/commonStyle";
+import { Modal, Backdrop, Fade, Box } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import {useCommonStyles} from "../../../helpers/commonStyle";

 const useStyles = makeStyles({
    modal: {
@@ -9,10 +10,10 @@ const useStyles = makeStyles({
        justifyContent: "center"
    },
    modalContents: {
-        borderRadius: "5px",      
+        borderRadius: "5px",
        outline: "none",
        minWidth: "300px",
-        backgroundColor: "rgb(255, 255, 255)",       
+        backgroundColor: "rgb(255, 255, 255)",
    },
    modalBackdrop :{
        background : "rgba(24, 51, 121, 0.8)"
@@ -32,16 +33,16 @@ export interface CustomModalProps {
 const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className}) => {
    const classes = useStyles({});
    const globals = useCommonStyles().modal
-     
+

    const onModalClose = (reason) => {
        if(reason === 'backdropClick' && disableBackdropClick)
-            return;   
+            return;
        onClose();
    }

    return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)}
-                  className={`${classes.modal}`}     
+                  className={`${classes.modal}`}
                  closeAfterTransition
                  BackdropComponent={Backdrop}
                  BackdropProps={{
@@ -58,4 +59,4 @@ const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false,
            </Modal>
 }

-export default CustomModal;
+export default CustomModal;
--- a/ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.module.sass
+++ b/ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.module.sass
--- a/ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.tsx
+++ b/ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import duplicateImg from "assets/duplicate.svg";
-import styles from './style/FancyTextDisplay.module.sass';
+import duplicateImg from "../assets/duplicate.svg";
+import styles from './FancyTextDisplay.module.sass';

 interface Props {
    text: string | number,
--- a/ui-common/src/components/UI/InformationIcon/InformationIcon.module.sass
+++ b/ui-common/src/components/UI/InformationIcon/InformationIcon.module.sass
--- a/ui-common/src/components/UI/InformationIcon/InformationIcon.tsx
+++ b/ui-common/src/components/UI/InformationIcon/InformationIcon.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./style/InformationIcon.module.sass"
+import styles from "./InformationIcon.module.sass"

 const DEFUALT_LINK = "https://getmizu.io/docs"

@@ -19,4 +19,4 @@ export const InformationIcon: React.FC<LinkProps> = ({ className }) => {
    return <Link title="documentation" className={`${styles.linkStyle} ${className}`} link={DEFUALT_LINK}>
        <span>Docs</span>
    </Link>
-}
+}
--- a/ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.module.sass
+++ b/ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.module.sass
--- a/ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.tsx
+++ b/ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import style from '../style/LoadingOverlay.module.sass';
+import style from './LoadingOverlay.module.sass';

 const SpinnerShowDelayMs = 350;

--- a/ui-common/src/components/UI/NoDataMessage/NoDataMessage.module.sass
+++ b/ui-common/src/components/UI/NoDataMessage/NoDataMessage.module.sass
--- a/ui-common/src/components/UI/NoDataMessage/NoDataMessage.tsx
+++ b/ui-common/src/components/UI/NoDataMessage/NoDataMessage.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import circleImg from 'assets/dotted-circle.svg';
-import styles from './style/NoDataMessage.module.sass'
+import circleImg from '../assets/dotted-circle.svg';
+import styles from './NoDataMessage.module.sass'

 export interface Props {
    messageText: string;
@@ -10,7 +10,7 @@ const NoDataMessage: React.FC<Props> = ({ messageText = "No data found" }) => {
    return (
        <div data-cy="noDataMessage" className={styles.messageContainer__noData}>
            <div className={styles.container}>
-                <img src={circleImg} alt="No data Found"></img>
+                <img src={circleImg} alt="No data Found"/>
                <div className={styles.messageContainer__noDataMessage}>{messageText}</div>
            </div>
        </div>
--- a/ui-common/src/components/UI/Protocol/Protocol.module.sass
+++ b/ui-common/src/components/UI/Protocol/Protocol.module.sass
--- a/ui-common/src/components/UI/Protocol/Protocol.tsx
+++ b/ui-common/src/components/UI/Protocol/Protocol.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import styles from './style/Protocol.module.sass';
-import Queryable from "./Queryable";
+import styles from './Protocol.module.sass';
+import Queryable from "../Queryable/Queryable";

 export interface ProtocolInterface {
    name: string
--- a/ui-common/src/components/UI/Queryable/Queryable.module.sass
+++ b/ui-common/src/components/UI/Queryable/Queryable.module.sass
--- a/ui-common/src/components/UI/Queryable/Queryable.tsx
+++ b/ui-common/src/components/UI/Queryable/Queryable.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
-import QueryableStyle from './style/Queryable.module.sass';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import QueryableStyle from './Queryable.module.sass';
 import {useRecoilState} from "recoil";
-import queryAtom from "../../recoil/query";
+import queryAtom from "../../../recoil/query";

 interface Props {
    query: string,
--- a/ui-common/src/components/UI/Radio/Radio.tsx
+++ b/ui-common/src/components/UI/Radio/Radio.tsx
--- a/ui-common/src/components/UI/Resizeable/Resizeable.module.sass
+++ b/ui-common/src/components/UI/Resizeable/Resizeable.module.sass
--- a/ui-common/src/components/UI/Resizeable/Resizeable.tsx
+++ b/ui-common/src/components/UI/Resizeable/Resizeable.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";

-import styles from './style/Resizeable.module.sass'
+import styles from './Resizeable.module.sass'

 export interface Props {
    children
@@ -56,4 +56,4 @@ const Resizeable: React.FC<Props> = ({ children, minWidth, maxWidth }) => {
    );
 };

-export default Resizeable;
+export default Resizeable;
--- a/ui-common/src/components/UI/SearchableDropdown/SearchableDropdown.tsx
+++ b/ui-common/src/components/UI/SearchableDropdown/SearchableDropdown.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import { Autocomplete } from "@material-ui/lab";
-import { Checkbox, TextField } from "@material-ui/core";
-import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
-import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import makeStyles from '@mui/styles/makeStyles';
+import { Autocomplete } from "@mui/material";
+import { Checkbox, TextField } from "@mui/material";
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import DefaultIconDown from "DefaultIconDown.svg";
 import styles from "./SearchableDropdown.module.sass";

@@ -56,8 +56,9 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({ options, select
        onChange={(event, val) => onChange(val)}
        size={"small"}
        popupIcon={<img style={{ padding: 7 }} alt="iconDown" src={DefaultIconDown} />}
-        renderOption={(option, { selected }) => (
-            <div id={`option-${option}`} className={styles.optionItem}>
+        renderOption={(props, option, { selected }) => (
+            <li {...props}>
+            <div id={`option-${option}`} className={styles.optionItem} key={option}>
                {multiple && <Checkbox
                    icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
                    checkedIcon={<CheckBoxIcon fontSize="small" />}
@@ -66,6 +67,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({ options, select
                />}
                <div title={option} className={styles.title}>{option}</div>
            </div>
+            </li>
        )}
        renderTags={() => <div className={styles.optionListItem}>
            <div title={selectedValues?.length > 0 ? `${selectedValues[0]} (+${selectedValues.length - 1})` : ""} className={styles.optionListItemTitle}>
--- a/ui-common/src/components/UI/Select/Select.module.sass
+++ b/ui-common/src/components/UI/Select/Select.module.sass
--- a/ui-common/src/components/UI/Select/Select.tsx
+++ b/ui-common/src/components/UI/Select/Select.tsx
@@ -1,8 +1,7 @@
-import {ReactComponent as DefaultIconDown} from './assets/default_icon_down.svg';
-import {MenuItem, Select as MUISelect} from '@material-ui/core';
+import {ReactComponent as DefaultIconDown} from '../assets/default_icon_down.svg';
+import {MenuItem, Select as MUISelect, SelectProps as MUISelectProps} from '@mui/material';
 import React from 'react';
-import {SelectProps as MUISelectProps} from '@material-ui/core/Select/Select';
-import styles from './style/Select.module.sass';
+import styles from './Select.module.sass';

 export const ALL_KEY= 'All';

--- a/ui-common/src/components/UI/SelectList/SelectList.module.sass
+++ b/ui-common/src/components/UI/SelectList/SelectList.module.sass
@@ -3,7 +3,7 @@

 .selectListTable
    user-select: none // when resizble moved we get unwanted beheviour
-    height: 100%
+    height: calc(100% - 53px)

    table
        width: 100%
--- a/ui-common/src/components/UI/SelectList/SelectList.tsx
+++ b/ui-common/src/components/UI/SelectList/SelectList.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import Radio from "./Radio";
-import styles from './style/SelectList.module.sass'
-import NoDataMessage from "./NoDataMessage";
-import Checkbox from "./Checkbox";
-import { useCommonStyles } from "../../helpers/commonStyle";
+import Radio from "../Radio/Radio";
+import styles from './SelectList.module.sass'
+import NoDataMessage from "../NoDataMessage/NoDataMessage";
+import Checkbox from "../Checkbox/Checkbox";
+import { useCommonStyles } from "../../../helpers/commonStyle";


 export interface Props {
@@ -21,7 +21,7 @@ export interface Props {
 const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], multiSelect = true, setCheckedValues, tableClassName,
    checkBoxWidth = 50 ,inputSearchClass,isFilterable = true}) => {
    const commonClasses = useCommonStyles();
-    const [searchValue, setSearchValue] = useState("")  
+    const [searchValue, setSearchValue] = useState("")
    const noItemsMessage = "No items to show";
    const [headerChecked, setHeaderChecked] = useState(false)

--- a/ui-common/src/components/UI/StatusBar/StatusBar.module.sass
+++ b/ui-common/src/components/UI/StatusBar/StatusBar.module.sass
--- a/ui-common/src/components/UI/StatusBar/StatusBar.tsx
+++ b/ui-common/src/components/UI/StatusBar/StatusBar.tsx
@@ -1,11 +1,11 @@
-import style from './style/StatusBar.module.sass';
+import style from './StatusBar.module.sass';
 import React, {useState} from "react";
-import warningIcon from 'assets/warning_icon.svg';
-import failIcon from 'assets/failed.svg';
-import successIcon from 'assets/success.svg';
+import warningIcon from '../assets/warning_icon.svg';
+import failIcon from '../assets/failed.svg';
+import successIcon from '../assets/success.svg';
 import {useRecoilValue} from "recoil";
-import tappingStatusAtom, {tappingStatusDetails} from "../../recoil/tappingStatus";
-import Tooltip from "./Tooltip";
+import tappingStatusAtom, {tappingStatusDetails} from "../../../recoil/tappingStatus";
+import Tooltip from "../Tooltip/Tooltip";

 const pluralize = (noun: string, amount: number) => {
    return `${noun}${amount !== 1 ? 's' : ''}`
--- a/ui-common/src/components/UI/StatusCode/StatusCode.module.sass
+++ b/ui-common/src/components/UI/StatusCode/StatusCode.module.sass
--- a/ui-common/src/components/UI/StatusCode/StatusCode.tsx
+++ b/ui-common/src/components/UI/StatusCode/StatusCode.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import styles from './style/StatusCode.module.sass';
-import Queryable from "./Queryable";
+import styles from './StatusCode.module.sass';
+import Queryable from "../Queryable/Queryable";

 export enum StatusCodeClassification {
    SUCCESS = "success",
--- a/ui-common/src/components/UI/Summary/Summary.module.sass
+++ b/ui-common/src/components/UI/Summary/Summary.module.sass
--- a/ui-common/src/components/UI/Summary/Summary.tsx
+++ b/ui-common/src/components/UI/Summary/Summary.tsx
@@ -1,7 +1,7 @@
-import miscStyles from "./style/misc.module.sass";
+import miscStyles from "./misc.module.sass";
 import React from "react";
-import styles from './style/Summary.module.sass';
-import Queryable from "./Queryable";
+import styles from './Summary.module.sass';
+import Queryable from "../Queryable/Queryable";

 interface SummaryProps {
    method: string
--- a/ui-common/src/components/UI/Summary/misc.module.sass
+++ b/ui-common/src/components/UI/Summary/misc.module.sass
--- a/ui-common/src/components/UI/Tabs/Tabs.tsx
+++ b/ui-common/src/components/UI/Tabs/Tabs.tsx
@@ -1,7 +1,9 @@
-import Tooltip from "./Tooltip";
+import Tooltip from "../Tooltip/Tooltip";
 import React from "react";
-import { makeStyles, Theme,createStyles } from '@material-ui/core/styles';
-import variables from '../../variables.module.scss';
+import { createStyles } from '@mui/styles';
+import { Theme } from '@mui/material/styles'
+import makeStyles from '@mui/styles/makeStyles';
+import variables from '../../../variables.module.scss';

 interface Tab {
    tab: string,
--- a/ui-common/src/components/UI/Tooltip/Tooltip.tsx
+++ b/ui-common/src/components/UI/Tooltip/Tooltip.tsx
@@ -1,4 +1,5 @@
-import {Tooltip as MUITooltip, Fade, TooltipProps as MUITooltipProps, makeStyles} from "@material-ui/core";
+import {Tooltip as MUITooltip, Fade, TooltipProps as MUITooltipProps } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import React from "react";

 export interface TooltipProps extends MUITooltipProps {
@@ -36,7 +37,6 @@ const Tooltip: React.FC<TooltipProps> = (props) => {
    return (
        <MUITooltip
            classes={{tooltip: `${backgroundClass} ` + classes[variant]}}
-            interactive={true}
            enterDelay={200}
            TransitionComponent={Fade}
            {..._props}
--- a/ui-common/src/components/UI/index.ts
+++ b/ui-common/src/components/UI/index.ts
@@ -1,14 +1,13 @@
-import LoadingOverlay from "./LoadingOverlay";
-import { Select } from "./Select";
-import Tabs from "./Tabs";
-import Tooltip from "./Tooltip";
-import Checkbox from "./Checkbox"
-import { StatusBar } from "./StatusBar";
-import CustomModal from "./CustomModal";
-import { InformationIcon, Link } from "./InformationIcon";
-import SelectList from "./SelectList";
-import NoDataMessage from "./NoDataMessage";
+import LoadingOverlay from "./LoadingOverlay/LoadingOverlay";
+import { Select } from "./Select/Select";
+import Tabs from "./Tabs/Tabs";
+import Tooltip from "./Tooltip/Tooltip";
+import Checkbox from "./Checkbox/Checkbox"
+import { StatusBar } from "./StatusBar/StatusBar";
+import CustomModal from "./CustomModal/CustomModal";
+import { InformationIcon, Link } from "./InformationIcon/InformationIcon";
+import SelectList from "./SelectList/SelectList";
+import NoDataMessage from "./NoDataMessage/NoDataMessage";

-
-export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link }
-export { StatusBar }
+export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link };
+export { StatusBar }
--- a/ui-common/src/components/UI/style/FilterSelect.module.sass
+++ b/ui-common/src/components/UI/style/FilterSelect.module.sass
@@ -1,3 +0,0 @@
-.SelectLabel
-    color: #8f9bb2
-    font-size: 11px
--- a/ui-common/src/components/UI/style/Spinner.module.sass
+++ b/ui-common/src/components/UI/style/Spinner.module.sass
@@ -1,6 +0,0 @@
-@import "../../../variables.module"
-
-.spinnerContainer
-  display: flex
-  justify-content: center
-  margin-bottom: 10px
--- a/ui-common/src/components/TrafficViewer/assets/downImg.svg
+++ b/ui-common/src/components/TrafficViewer/assets/downImg.svg
--- a/ui-common/src/components/ServiceMapModal/assets/spinner.svg
+++ b/ui-common/src/components/ServiceMapModal/assets/spinner.svg
--- a/ui-common/src/components/modals/OasModal/OasModal.module.sass
+++ b/ui-common/src/components/modals/OasModal/OasModal.module.sass
@@ -1,4 +1,4 @@
-@import '../../variables.module.scss'
+@import '../../../variables.module'

 .closeIcon
    cursor: pointer
--- a/ui-common/src/components/modals/OasModal/OasModal.tsx
+++ b/ui-common/src/components/modals/OasModal/OasModal.tsx
@@ -1,14 +1,14 @@
-import { Box, Fade, FormControl, Modal, Backdrop } from "@material-ui/core";
+import { Box, Fade, FormControl, Modal, Backdrop } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
-import closeIcon from "assets/closeIcon.svg";
+import closeIcon from "./assets/closeIcon.svg";
 import { toast } from 'react-toastify';
 import style from './OasModal.module.sass';
-import openApiLogo from 'assets/openApiLogo.png'
+import openApiLogo from './assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { TOAST_CONTAINER_ID } from "../../configs/Consts";
-import SearchableDropdown from "../UI/SearchableDropdown/SearchableDropdown";
+import { TOAST_CONTAINER_ID } from "../../../configs/Consts";
+import SearchableDropdown from "../../UI/SearchableDropdown/SearchableDropdown";


 const modalStyle = {
@@ -112,4 +112,4 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
  );
 };

-export default OasModal;
+export default OasModal;
--- a/ui-common/src/components/modals/OasModal/assets/closeIcon.svg
+++ b/ui-common/src/components/modals/OasModal/assets/closeIcon.svg
--- a/ui-common/src/components/modals/OasModal/assets/openApiLogo.png
+++ b/ui-common/src/components/modals/OasModal/assets/openApiLogo.png
--- a/ui-common/src/components/modals/OasModal/redocThemeOptions.ts
+++ b/ui-common/src/components/modals/OasModal/redocThemeOptions.ts
--- a/ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass
+++ b/ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass
@@ -1,5 +1,5 @@
-@import "../../variables.module"
-@import "../../components"
+@import "../../../variables.module"
+@import "../../../components"

 .closeIcon
  position: absolute
@@ -94,3 +94,8 @@

 .servicesFilterList
  height: calc(100% - 30px - 52px)
+
+.spinnerContainer
+  display: flex
+  justify-content: center
+  margin-bottom: 10px
--- a/ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.tsx
@@ -1,22 +1,21 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Box, Fade, Modal, Backdrop, Button } from "@material-ui/core";
+import { Box, Fade, Modal, Backdrop, Button } from "@mui/material";
 import { toast } from "react-toastify";
-import spinnerStyle from '../UI/style/Spinner.module.sass';
-import spinnerImg from 'assets/spinner.svg';
+import spinnerImg from '../../assets/spinner.svg';
 import Graph from "react-graph-vis";
 import debounce from 'lodash/debounce';
 import ServiceMapOptions from './ServiceMapOptions'
-import { useCommonStyles } from "../../helpers/commonStyle";
-import refreshIcon from "assets/refresh.svg";
-import filterIcon from "assets/filter-icon.svg";
-import filterIconClicked from "assets/filter-icon-clicked.svg";
-import closeIcon from "assets/close.svg"
+import { useCommonStyles } from "../../../helpers/commonStyle";
+import refreshIcon from "./assets/refresh.svg";
+import filterIcon from "./assets/filter-icon.svg";
+import filterIconClicked from "./assets/filter-icon-clicked.svg";
+import closeIcon from "./assets/close.svg"
 import styles from './ServiceMapModal.module.sass'
-import SelectList from "../UI/SelectList";
+import SelectList from "../../UI/SelectList/SelectList";
 import { GraphData, ServiceMapGraph } from "./ServiceMapModalTypes"
-import { Utils } from "../../helpers/Utils";
-import { TOAST_CONTAINER_ID } from "../../configs/Consts";
-import Resizeable from "../UI/Resizeable"
+import { Utils } from "../../../helpers/Utils";
+import { TOAST_CONTAINER_ID } from "../../../configs/Consts";
+import Resizeable from "../../UI/Resizeable/Resizeable"

 const modalStyle = {
    position: 'absolute',
@@ -244,7 +243,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                        <div className={styles.graphSection}>
                            <div style={{ display: "flex", justifyContent: "space-between" }}>
                            </div>
-                            {isLoading && <div className={spinnerStyle.spinnerContainer}>
+                            {isLoading && <div className={styles.spinnerContainer}>
                                <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
                            </div>}
                            {!isLoading && <div style={{ height: "100%", width: "100%" }}>
--- a/ui-common/src/components/modals/ServiceMapModal/ServiceMapModalTypes.ts
+++ b/ui-common/src/components/modals/ServiceMapModal/ServiceMapModalTypes.ts
--- a/ui-common/src/components/modals/ServiceMapModal/ServiceMapOptions.ts
+++ b/ui-common/src/components/modals/ServiceMapModal/ServiceMapOptions.ts
--- a/ui-common/src/components/modals/ServiceMapModal/assets/close.svg
+++ b/ui-common/src/components/modals/ServiceMapModal/assets/close.svg
--- a/ui-common/src/components/modals/ServiceMapModal/assets/filter-icon-clicked.svg
+++ b/ui-common/src/components/modals/ServiceMapModal/assets/filter-icon-clicked.svg
--- a/ui-common/src/components/modals/ServiceMapModal/assets/filter-icon.svg
+++ b/ui-common/src/components/modals/ServiceMapModal/assets/filter-icon.svg
--- a/ui-common/src/components/modals/ServiceMapModal/assets/refresh.svg
+++ b/ui-common/src/components/modals/ServiceMapModal/assets/refresh.svg
--- a/ui-common/src/helpers/commonStyle.ts
+++ b/ui-common/src/helpers/commonStyle.ts
@@ -1,5 +1,4 @@
-import { makeStyles } from "@material-ui/core";
-import variables from "../variables.module.scss"
+import makeStyles from '@mui/styles/makeStyles';

 // @ts-ignore
 export const useCommonStyles = makeStyles(() => ({
--- a/ui-common/src/index.tsx
+++ b/ui-common/src/index.tsx
@@ -2,9 +2,10 @@ import TrafficViewer from './components/TrafficViewer/TrafficViewer';
 import * as UI from "./components/UI"
 import { StatusBar } from './components/UI';
 import useWS, { DEFAULT_LEFTOFF } from './hooks/useWS';
-import OasModal from './components/OasModal/OasModal';
-import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal';
+import OasModal from './components/modals/OasModal/OasModal';
+import { ServiceMapModal } from './components/modals/ServiceMapModal/ServiceMapModal';

+export { CodeEditorWrap as QueryForm } from './components/Filters/Filters';
 export { UI, StatusBar, OasModal, ServiceMapModal }
 export { useWS, DEFAULT_LEFTOFF }
 export default TrafficViewer;
--- a/ui-common/src/recoil/TrafficViewerApi/atom.ts
+++ b/ui-common/src/recoil/TrafficViewerApi/atom.ts
@@ -3,7 +3,7 @@ import TrafficViewerApi from "../../components/TrafficViewer/TrafficViewerApi";

 const TrafficViewerApiAtom = atom({
    key: "TrafficViewerApiAtom",
-    default: {} as TrafficViewerApi
+    default: {}
 });

 export default TrafficViewerApiAtom;
--- a/ui/craco.config.js
+++ b/ui/craco.config.js
@@ -13,7 +13,8 @@ module.exports = {
                instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;

            webpackConfig.resolve.alias['react']= path.resolve(__dirname, 'node_modules/react'); // solve 2  react instances
-            webpackConfig.resolve.alias['@material-ui/styles']= path.resolve("node_modules", "@material-ui/styles");
+            webpackConfig.resolve.alias['@emotion/react']= path.resolve("node_modules", "@emotion/react");
+            webpackConfig.resolve.alias['@mui/styles']= path.resolve("node_modules", "@mui/styles");

            return webpackConfig;
        }
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -9,9 +9,10 @@
      "version": "0.1.0",
      "dependencies": {
        "@craco/craco": "^6.4.3",
-        "@material-ui/core": "^4.12.4",
-        "@material-ui/icons": "^4.11.3",
-        "@material-ui/lab": "^4.0.0-alpha.60",
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.8.2",
+        "@mui/styles": "^5.8.0",
        "@types/jest": "^26.0.24",
        "@types/node": "^12.20.54",
        "@uiw/react-textarea-code-editor": "^1.6.0",
@@ -54,10 +55,17 @@
      }
    },
    "../ui-common": {
+      "name": "@up9/mizu-common",
      "version": "0.0.0",
      "license": "MIT",
      "dependencies": {
        "@craco/craco": "^6.4.3",
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.8.2",
+        "@mui/lab": "^5.0.0-alpha.84",
+        "@mui/material": "^5.8.2",
+        "@mui/styles": "^5.8.0",
        "@types/lodash": "^4.14.182",
        "@uiw/react-textarea-code-editor": "^1.6.0",
        "axios": "^0.27.2",
@@ -105,9 +113,6 @@
      },
      "peerDependencies": {
        "@craco/craco": "^6.4.3",
-        "@material-ui/core": "^4.12.4",
-        "@material-ui/icons": "^4.11.3",
-        "@material-ui/lab": "^4.0.0-alpha.60",
        "@types/jest": "^26.0.24",
        "@types/node": "^12.20.54",
        "node-sass": "^6.0.1",
@@ -478,7 +483,6 @@
      "version": "7.17.12",
      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
      "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
-      "peer": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -1127,7 +1131,6 @@
      "version": "7.17.12",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz",
      "integrity": "sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==",
-      "peer": true,
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.17.12"
      },
@@ -2237,6 +2240,72 @@
        "node": ">=0.8.0"
      }
    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/@emotion/cache": {
      "version": "11.7.1",
      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
@@ -2267,11 +2336,79 @@
      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
    },
+    "node_modules/@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
    "node_modules/@emotion/sheet": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
    },
+    "node_modules/@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@emotion/stylis": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -2899,203 +3036,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/@material-ui/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.5",
-        "@material-ui/system": "^4.12.2",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/core/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
-    "node_modules/@material-ui/icons": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
-      "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "@material-ui/core": "^4.0.0",
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/lab": {
-      "version": "4.0.0-alpha.61",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz",
-      "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "@material-ui/core": "^4.12.1",
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/lab/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
-    "node_modules/@material-ui/styles": {
-      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
-      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/system": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "peerDependencies": {
-        "@types/react": "*"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      }
-    },
-    "node_modules/@material-ui/utils/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
    "node_modules/@mui/base": {
      "version": "5.0.0-alpha.83",
      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
@@ -7406,7 +7346,6 @@
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-      "peer": true,
      "dependencies": {
        "safe-buffer": "~5.1.1"
      }
@@ -7414,8 +7353,7 @@
    "node_modules/convert-source-map/node_modules/safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "peer": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
    "node_modules/cookie": {
      "version": "0.5.0",
@@ -8127,11 +8065,6 @@
      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
      "peer": true
    },
-    "node_modules/csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
-    },
    "node_modules/cyclist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -10777,6 +10710,11 @@
        "node": ">=6"
      }
    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "node_modules/find-up": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -17979,11 +17917,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
-    },
    "node_modules/portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -28650,8 +28583,7 @@
    "@babel/helper-plugin-utils": {
      "version": "7.17.12",
      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
-      "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
-      "peer": true
+      "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA=="
    },
    "@babel/helper-remap-async-to-generator": {
      "version": "7.16.8",
@@ -29098,7 +29030,6 @@
      "version": "7.17.12",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz",
      "integrity": "sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==",
-      "peer": true,
      "requires": {
        "@babel/helper-plugin-utils": "^7.17.12"
      }
@@ -29860,6 +29791,59 @@
        "@types/hammerjs": "^2.0.36"
      }
    },
+    "@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "babel-plugin-macros": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "cosmiconfig": "^6.0.0",
+            "resolve": "^1.12.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
    "@emotion/cache": {
      "version": "11.7.1",
      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
@@ -29890,11 +29874,56 @@
      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
    },
+    "@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+        }
+      }
+    },
    "@emotion/sheet": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
    },
+    "@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      }
+    },
    "@emotion/stylis": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -30407,116 +30436,6 @@
        "unist-util-visit": "^2.0.3"
      }
    },
-    "@material-ui/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.5",
-        "@material-ui/system": "^4.12.2",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-        }
-      }
-    },
-    "@material-ui/icons": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
-      "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
-      "requires": {
-        "@babel/runtime": "^7.4.4"
-      }
-    },
-    "@material-ui/lab": {
-      "version": "4.0.0-alpha.61",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz",
-      "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-        }
-      }
-    },
-    "@material-ui/styles": {
-      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
-      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/system": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "requires": {}
-    },
-    "@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-        }
-      }
-    },
    "@mui/base": {
      "version": "5.0.0-alpha.83",
      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
@@ -31570,6 +31489,12 @@
      "version": "file:../ui-common",
      "requires": {
        "@craco/craco": "^6.4.3",
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.8.2",
+        "@mui/lab": "^5.0.0-alpha.84",
+        "@mui/material": "^5.8.2",
+        "@mui/styles": "^5.8.0",
        "@rollup/plugin-node-resolve": "^13.3.0",
        "@svgr/rollup": "^6.2.1",
        "@types/lodash": "^4.14.182",
@@ -33914,7 +33839,6 @@
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-      "peer": true,
      "requires": {
        "safe-buffer": "~5.1.1"
      },
@@ -33922,8 +33846,7 @@
        "safe-buffer": {
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "peer": true
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
        }
      }
    },
@@ -34483,11 +34406,6 @@
        }
      }
    },
-    "csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
-    },
    "cyclist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -36508,6 +36426,11 @@
        "pkg-dir": "^3.0.0"
      }
    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "find-up": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -42052,11 +41975,6 @@
        "@babel/runtime": "^7.17.8"
      }
    },
-    "popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
-    },
    "portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,9 +4,10 @@
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.2",
+    "@mui/styles": "^5.8.0",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.54",
    "@uiw/react-textarea-code-editor": "^1.6.0",
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -7,6 +7,7 @@ import serviceMapModalOpenAtom from "./recoil/serviceMapModalOpen";
 import oasModalOpenAtom from './recoil/oasModalOpen/atom';
 import { OasModal } from '@up9/mizu-common';
 import Api from './helpers/api';
+import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material';

 const api = Api.getInstance()

@@ -16,21 +17,25 @@ const App = () => {
    const [oasModalOpen, setOasModalOpen] = useRecoilState(oasModalOpenAtom)

    return (
-        <div className="mizuApp">
-            <Header />
-            <TrafficPage />
-            {window["isServiceMapEnabled"] && <ServiceMapModal
-                isOpen={serviceMapModalOpen}
-                onOpen={() => setServiceMapModalOpen(true)}
-                onClose={() => setServiceMapModalOpen(false)}
-                getServiceMapDataApi={api.serviceMapData} />}
-            {window["isOasEnabled"] && <OasModal
-                getOasServices={api.getOasServices}
-                getOasByService={api.getOasByService}
-                openModal={oasModalOpen}
-                handleCloseModal={() => setOasModalOpen(false)}
-            />}
-        </div>
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={createTheme(({}))}>
+                <div className="mizuApp">
+                    <Header />
+                    <TrafficPage />
+                    {window["isServiceMapEnabled"] && <ServiceMapModal
+                        isOpen={serviceMapModalOpen}
+                        onOpen={() => setServiceMapModalOpen(true)}
+                        onClose={() => setServiceMapModalOpen(false)}
+                        getServiceMapDataApi={api.serviceMapData} />}
+                    {window["isOasEnabled"] && <OasModal
+                        getOasServices={api.getOasServices}
+                        getOasByService={api.getOasByService}
+                        openModal={oasModalOpen}
+                        handleCloseModal={() => setOasModalOpen(false)}
+                    />}
+                </div>
+            </ThemeProvider>
+        </StyledEngineProvider>
    );
 }

--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import Api, { MizuWebsocketURL } from "../../../helpers/api";
 import debounce from 'lodash/debounce';
 import { useRecoilState } from "recoil";
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
lirazyehezkel	e41488ef3e	TRA-4276 Folder structure refactor (#1131 ) * mizu-common folder structure refactor * no message * change images import from absolute to relative * relative sass imports * no message * remove tgz * spinner style	2022-06-12 11:20:47 +03:00
AmitUp9	533fb71bf4	TRA-4596_Update material UI to v5 (#1132 ) * install @mui v5 and change imports * upgrade MUI v5 in mizu community * package-lock of mizu community and ui-common * fix ui-common path * #run_acceptance_tests * remove comment * cr fixes	2022-06-08 15:32:34 +03:00
RoyUP9	6f8aad83e6	Minikube start with more memory&cpu (#1130 )	2022-06-06 17:53:12 +03:00
leon-up9	6e6bcec77e	Ui/TRA-4586_add-insertion-filter-to-settings-page (#1127 ) * working query input * removed prop * splited to diffrent events * export alias * PR comments Co-authored-by: Leon <>	2022-06-06 16:40:23 +03:00
leon-up9	71db792a4e	list takes 100% from parent (#1129 ) Co-authored-by: Leon <>	2022-06-06 16:26:07 +03:00
gadotroee	f7f61c1217	Fix cypress files to cypress version 10 (#1124 )	2022-06-06 11:13:20 +03:00