Change/upgraded to react18 CMEM-6639

package.json

@@ -9,8 +9,8 @@
   ],
   "scripts": {},
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {},
   "resolutions": {
@@ -22,10 +22,11 @@
     "**/minimist": "1.2.8",
     "**/moment": "2.29.4",
     "**/nanoid": "3.3.4",
-    "**/react": "^17.0.2",
-    "**/react-dom": "^17.0.2",
+    "**/react": "^18.2.0",
+    "**/react-dom": "^18.2.0",
     "**/semver-regex": "3.1.4",
-    "**/@types/react": "^17.0.85",
-    "**/url-parse": "1.5.9"
+    "**/@types/react": "^18.2.0",
+    "**/url-parse": "1.5.9",
+    "**/react-redux": "^9.1.2"
   }
 }

silk-workbench/silk-workbench-core/app/controllers/core/Branding.scala

@@ -18,11 +18,6 @@ class Branding @Inject() () extends InjectedController {
     Ok(bytes).as("image/png").withHeaders("Cache-Control" -> "public, max-age=86400")
   }
 
-  def aboutDialog = Action {
-    val aboutHtml = Html(WorkbenchConfig.get.about.loadAsString())
-    Ok(views.html.aboutDialog(aboutHtml))
-  }
-
   def mdlStyle = Action {
     val bytes = WorkbenchConfig.get.mdlStyle.get.loadAsBytes
     Ok(bytes).as("text/css")

silk-workbench/silk-workbench-core/app/views/clientError.scala.html

@@ -2,18 +2,23 @@
 @(errorMessage: String)(implicit request: RequestHeader, workspaceReact: WorkspaceReact)
 
 @content = {
-  <div class="mdl-grid mdl-grid--centered">
-    <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">
-      <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
-        <div class="mdl-card__title mdl-card--border">
+  <div style="max-width: 60rem; margin: 0 auto; padding: 1rem; ">
+    <div class="eccgui-card bp5-card">
+      <header>
+        <div class="eccgui-card__header">
           <h3 class="mdl-card__title-text">
             Error
           </h3>
         </div>
-        <div class="mdl-card__content">
-          <div class="mdl-alert mdl-alert--danger mdl-alert--border mdl-alert--spacing">
-            <div class="mdl-alert__content">
-              <p>@errorMessage</p>
+      </header>
+      <hr class="eccgui-separation__divider-horizontal">
+      <div class="eccgui-card__content">
+        <div class='@{s"bp5-toast eccgui-notification eccgui-intent--warning eccgui-notification--static"}'>
+          <div class="bp5-toast-message" role="alert">
+            <div class="eccgui-notification__content">
+              <div class="eccgui-notification__messagebody">
+                <p>@errorMessage</p>
+              </div>
             </div>
           </div>
         </div>

silk-workbench/silk-workbench-core/app/views/configView.scala.html

@@ -36,13 +36,31 @@
 }
 
 @content = {
-  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-    <input class="mdl-textfield__input" type="text" id="configRootSearch">
-    <label class="mdl-textfield__label" for="configRootSearch">Search</label>
-  </div>
-
-  <div id="configRoot">
-    @render(config.root())
+  <div style="max-width: 80rem; margin: 0 auto; padding: 1rem; ">
+    <div class="eccgui-card bp5-card">
+      <header>
+        <div class="eccgui-card__header">
+          <h3 class="mdl-card__title-text">
+            Configuration
+          </h3>
+        </div>
+      </header>
+      <hr class="eccgui-separation__divider-horizontal">
+      <div class="eccgui-card__content">
+        <div class="bp5-input-group bp5-fill bp5-round eccgui-textfield eccgui-textfield--searchinput">
+          <span class="bp5-input-left-container">
+            <span class="bp5-icon">
+              <svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true" class="eccgui-icon" xmlns="http://www.w3.org/2000/svg"><path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"></path></svg>
+            </span>
+          </span>
+          <input id="configRootSearch" type="search" class="bp5-input" dir="auto" placeholder="Enter search term" aria-label="Enter search term" value="" style="padding-left: 33px;">
+        </div>
+        <div class="eccgui-separation__spacing-horizontal eccgui-separation__spacing--medium"></div>
+        <div id="configRoot" style="max-height: 75vh; overflow: auto;">
+          @render(config.root())
+        </div>
+      </div>
+    </div>
   </div>
 }
 

silk-workbench/silk-workbench-core/app/views/frame.scala.html

@@ -10,14 +10,10 @@
   <head>
     <title>@config.workbench.title</title>
     <link rel="shortcut icon" type="image/png" href="@Assets.at("img/favicon.png")" />
-
-    <link rel="stylesheet" media="screen" href="@Assets.at("main.css")" />
     <link rel="stylesheet" href="@Assets.at("libs/jquery-ui/base/jquery-ui.css")" type="text/css" media="screen, projection"/>
     <link rel="stylesheet" href="@Assets.at("libs/jquery-ui/base/jquery-ui.structure.css")" type="text/css" media="screen, projection"/>
     <link rel="stylesheet" href="@Assets.at("libs/jquery-ui/base/jquery-ui.theme.css")" type="text/css" media="screen, projection"/>
-    <link rel="stylesheet" href="@Assets.at("libs/mdl-vertical-tabs/mdl-vertical-tabs.css")" type="text/css" media="screen, projection"/>
 
-    <script src="@Assets.at("libs/lodash/lodash.js")" type="text/javascript"></script>
     <script src="@Assets.at("libs/jquery/dist/jquery.js")" type="text/javascript"></script>
     <script src="@Assets.at("libs/jquery-migrate/dist/jquery-migrate.js")" type="text/javascript"></script>
     <script src="@Assets.at("libs/jquery-ui/jquery-ui.js")" type="text/javascript"></script>
@@ -28,27 +24,10 @@
         publicBaseUrl:"@{WorkbenchConfig.publicBaseUrl}"
       }
     </script>
-    <script src="@Assets.at("main.js")" type="text/javascript"></script>
 
     @header
 
-    <!-- MDL inclusions: -->
     @coreLinks.mainStyles()
-
-    @if(config.workbench.mdlStyle.isDefined) {
-      @* This indicates that Silk is running in a modified version which can supply an alternative version of MDL. *@
-      <link type="text/css" href="@config.baseUrl/core/mdlStyle" rel="stylesheet" />
-    }
-
-    <link type="text/css" href="@Assets.at("mdl-adjustments.css")" rel="stylesheet" />
-    <link type="text/css" href="@Assets.at("libs/mdl-selectfield/dist/mdl-selectfield.css")" rel="stylesheet" />
-    <link type="text/css" href="@Assets.at("libs/dialog-polyfill/dialog-polyfill.css")" rel="stylesheet" />
-
-
-    <script src="@Assets.at("libs/material-design-lite/material.js")" type="text/javascript"></script>
-    <script src="@Assets.at("libs/mdl-selectfield/dist/mdl-selectfield.js")" type="text/javascript"></script>
-    <script src="@Assets.at("libs/dialog-polyfill/dialog-polyfill.js")" type="text/javascript"></script>
-
   </head>
   <body>
     @content

silk-workbench/silk-workbench-core/app/views/main.scala.html

@@ -1,39 +1,12 @@
-@import config.WorkbenchConfig
-@import controllers.core.Start
+@import config.WorkbenchConfig.WorkspaceReact
 @import org.silkframework.config.TaskSpec
 @import org.silkframework.workbench.Context
-
-@import config.WorkbenchConfig.WorkspaceReact
 @(context: Option[Context[_ <: TaskSpec]], selectedTab: String = "", titleLabel: String = "")(header: Html)(toolbar: Html)(content: Html)(implicit request: RequestHeader, workspaceReact: WorkspaceReact)
 
 @frame(header) {
-    <dialog id="primary_dialog" class="mdl-dialog__container">
-      @* Filled with template dialog.scala.html *@
-    </dialog>
-    <dialog id="secondary_dialog" class="mdl-dialog__container">
-      @* Filled with template dialog.scala.html *@
-    </dialog>
-
-    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-      <div class="mdl-layout__inner-container">
-
-      @if(config.workbench.showHeader(request)) {
-        @tabbar(context, selectedTab, titleLabel)
-      }
-      @if(toolbar != null) {
-        <div id="toolbar" class="clearfix">
-        @toolbar
-        </div>
-      }
-      <main class="mdl-layout__content">
-        <div id="content" class="mdl-tabs__panel is-active">
-          @content
-        </div>
-        <div id="dialogContainer">
-          <div class="dialog">
-          </div>
-        </div>
+    <div class="eccgui-application__container">
+      <main class="cds--content eccgui-application__content">
+        @content
       </main>
     </div>
-    </div>
 }

silk-workbench/silk-workbench-core/app/views/serverError.scala.html

@@ -11,70 +11,71 @@
 @frame {
 
 } {
-  <div class="mdl-grid mdl-grid--centered">
-    <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">
-      <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
-        <div class="mdl-card__title mdl-card--border">
-          <h3 class="mdl-card__title-text">
-            @{title.getOrElse(exception.title)}
-          </h3>
-        </div>
-        <div class="mdl-card__content">
-          <div class="@{s"mdl-alert mdl-alert--$intent mdl-alert--border mdl-alert--spacing"}">
-            <div class="mdl-alert__content">
-              <p>@{details.getOrElse(exception.description)}</p>
-            </div>
+  <div style="max-width: 60rem; margin: 0 auto; padding: 1rem; ">
+      <div class="eccgui-card bp5-card">
+        <header>
+          <div class="eccgui-card__header">
+            <h3 class="mdl-card__title-text">
+              @{title.getOrElse(exception.title)}
+            </h3>
           </div>
-          @if(showExceptionId) {
-            <div>
-              This exception has been logged with id <strong>@exception.id</strong>.
+        </header>
+        <hr class="eccgui-separation__divider-horizontal">
+        <div class="eccgui-card__content">
+          <div class='@{s"bp5-toast eccgui-notification eccgui-intent--$intent eccgui-notification--static"}'>
+            <div class="bp5-toast-message" role="alert">
+              <div class="eccgui-notification__content">
+                <div class="eccgui-notification__messagebody">
+                  <p>@{details.getOrElse(exception.description)}</p>
+                  @if(showExceptionId) {
+                  <p>
+                    This exception has been logged with id <strong>@exception.id</strong>.
+                  </p>
+                  }
+                </div>
+                <div class="eccgui-notification__actions error-details-buttons-without-style">
+                  <button type="button" class="bp5-button eccgui-button">
+                    <span class="bp5-button-text">Show details</span>
+                  </button>
+                  <button type="button" class="bp5-button eccgui-button" style="display: none;">
+                    <span class="bp5-button-text">Hide details</span>
+                  </button>
+                </div>
+                <script type="text/javascript">
+                  $(function () {
+                    $(".error-details-buttons-without-style button").click(function() {
+                      $(".error-details-without-style").slideToggle(300, function() {
+                        $(".error-details-buttons-without-style button").toggle();
+                      });
+                    });
+                  });
+                </script>
+                <div class="bp5-button-group bp5-minimal"></div>
+              </div>
             </div>
-          }
+          </div>
           @if(showDetails) {
-            <div class="error-details-buttons">
-              <button class="mdl-button mdl-js-button mdl-button--raised">
-                Show Details
-              </button>
-              <button class="mdl-button mdl-js-button mdl-button--raised" style="display: none;">
-                Hide Details
-              </button>
-            </div>
-          }
-        </div>
-        @if(showDetails) {
-          <div class="error-details" style="display: none;">
+          <div class="error-details-without-style eccgui-typography__contentblock" style="display: none;">
+            <div class="eccgui-separation__spacing-horizontal eccgui-separation__spacing--medium"></div>
             <h4>Details:</h4>
-
-            <div class="error-details-scrollbox">
-            @for(cause <- Option(exception.cause)) {
+            <pre class="error-details-scrollbox" style="max-height: 50vh; overflow: auto;">
+              @for(cause <- Option(exception.cause)) {
               @stacktrace(exception.cause)
-            }
-            </div>
+              }
+            </pre>
           </div>
-        }
+          }
+        </div>
       </div>
-    </div>
-
   </div>
-  <script type="text/javascript">
-    $(function () {
-      $(".error-details-buttons button").click(function() {
-        $(".error-details").slideToggle(300, function() {
-          $(".error-details-buttons button").toggle();
-        });
-      });
-    });
-  </script>
-
 }
 
 @stacktrace(ex: Throwable) = {
-  <p class="error-details-stacktrace">
+  <code class="error-details-stacktrace">
   @for(el <- ex.getStackTrace) {
     @el.toString
-    <br/>
   }
-  </p>
+  </code>
   @if(ex.getCause != null) {
     <strong>Cause:</strong>
     @ex.getCause.getMessage