- Update MUI v4 to v5

- Remove the SCSS dependency completely and use MUI for theming.
- Update - date-fns, @date-io, notistack. Remove - popper.js, sass-loader.
- Cleanup webpack config.
- Port PSQL tool to use MUI themes instead of SCSS theme.
- Theme change will reflect realtime without refreshing pgAdmin.

web/pgadmin/browser/static/js/node.js

@@ -664,7 +664,7 @@ define('pgadmin.browser.node', [
           t = pgBrowser.tree,
           i = input.item || t.selected(),
           d = i  ? t.itemData(i) : undefined;
-        pgBrowser.psql.psql_tool(d, i, true);
+        pgAdmin.Tools.Psql.openPsqlTool(d, i);
       },
 
       // Logic to change the server background colour

web/pgadmin/browser/static/scss/_browser.scss

@@ -1,65 +0,0 @@
-.browser-tab-bar {
-    padding-left: 5px;
-    padding-top: 5px;
-    background-color: $color-gray-lighter;
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: $font-family-editor !important;
-}
-
-.sql-editor-grid-container {
-  font-family: $font-family-primary !important;
-}
-
-.select2-btn-container {
-    padding: 3px 0px;
-    background-color: $color-primary;
-    margin-bottom: 3px;
-}
-
-.pg-sp-container {
-  position: absolute;
-  min-width: 100%;
-  min-height: 100%;
-  background: $loading-bg;
-  z-index: 1056;
-  top: 0;
-
-  .pg-sp-content {
-    position: absolute;
-    width: 100%;
-    top: 40%;
-  }
-}
-.pg-sp-icon {
-  background: $loader-icon center center no-repeat;
-  height: 75px;
-  width: 100%;
-  text-align: center;
-}
-.pg-sp-text {
-  font-size: 20px;
-  text-align: center;
-  color: $loading-fg;
-}
-
-.pg-toolbar-btn {
-  margin-left: 0.25rem;
-  border-style: solid;
-  border-width: 1px;
-  font-size: 1.15em;
-
-  color: $color-fg;
-  border-color: $border-color;
-  background-color: $color-secondary;
-}
-
-.pg-toolbar-psql {
-  padding-top: 0em;
-  font-size: inherit;
-  align-items: center;
-}

web/pgadmin/browser/static/scss/_wizard.scss

@@ -1,51 +0,0 @@
-.wizard-header {
-  padding: 6px!important;
-  min-height: $title-height;
-  max-height: $title-height;
-  background-color: $alert-header-bg;
-  font-size: $font-size-base;
-  font-weight: bold;
-  color: $alert-header-fg;
-  overflow: hidden;
-  white-space: nowrap;
-  border-radius: 0rem;
-  border-top-left-radius: $panel-border-radius;
-  border-top-right-radius: $panel-border-radius;
-  border-bottom: none;
-}
-
-.wizard-content {
-  position: absolute;
-  overflow: auto;
-  top: $title-height;
-  bottom: $footer-height-calc;
-  left: 0;
-  right: 0;
-}
-
-.pgadmin-wizard .wizard-buttons {
-  border-top: $panel-border;
-  padding: $footer-padding
-}
-
-/* match the footer */
-.pgadmin-wizard .wizard-footer {
-  min-height: $footer-min-height;
-  border: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: 0;
-}
-
-/* Error message css */
-.pgadmin-wizard .error_msg_div {
-  background: $color-bg;
-  font-size: 13px;
-}
-
-.pgadmin-wizard .error_msg_div p {
-  background: $color-bg;
-  color: $color-danger;
-}