Remove silk-react-components module from build, show workflow executi…

…on reports directly instead of i-frame

.gitignore

@@ -18,14 +18,13 @@ target/
 myScripts
 ./scripts
 # Ignore generated JavaScript from React components
-silk-workbench/silk-workbench-core/public/libs/silk-react-components/
+silk-workbench/silk-workbench-core/public/libs/silk-legacy-ui/
 silk-workbench/silk-workbench-core/public/libs/dynep/
 silk-workbench/silk-workbench-core/public/main.js
 silk-workbench/silk-workbench-rules/public/js/
 silk-workbench/silk-workbench-workflow/public/editor/editor.js
 silk-workbench/silk-workbench-workflow/public/editor/serializeWorkflow.js
 silk-workbench/silk-workbench-workspace/public/workspace.js
-silk-react-components/mocha.json
 silk-workbench/silk-workbench-core/public/new-workspace/
 silk-workbench/silk-workbench-core/conf/reference.conf
 lerna-debug.log

.gitmodules

@@ -1,4 +1,4 @@
-[submodule "silk-react-components/src/libs/gui-elements"]
+[submodule "libs/gui-elements"]
 	path = libs/gui-elements
 	url = https://github.com/eccenca/gui-elements.git
 	branch = develop

build.sbt

@@ -234,97 +234,23 @@ lazy val plugins = (project in file("silk-plugins"))
   )
 
 //////////////////////////////////////////////////////////////////////////////
-// Silk React Components
+// Silk React Workbench
 //////////////////////////////////////////////////////////////////////////////
 
+/** Directories of the legacy UI code. */
 val silkWorkbenchRoot: Def.Initialize[File] = Def.setting {
   new File(baseDirectory.value, "../silk-workbench")
 }
 
 val silkDistRoot: Def.Initialize[File] = Def.setting {
-  new File(baseDirectory.value, "../silk-workbench/silk-workbench-core/public/libs/silk-react-components")
+  new File(baseDirectory.value, "../silk-workbench/silk-workbench-core/public/libs/silk-legacy-ui")
 }
 
-/** list of vendor libs we maintain in the package.json */
-val LIST_OF_VENDORS = "dialog-polyfill jquery jquery-migrate jsplumb jstree lodash mark.js @eccenca/material-design-lite mdl-selectfield twbs-pagination"
+val silkLegacyUiRoot: Def.Initialize[File] = Def.setting {
+  new File(baseDirectory.value, "../silk-legacy-ui")
+}
 
 val checkJsBuildTools = taskKey[Unit]("Check the commandline tools yarn")
-val buildSilkReact = taskKey[Unit]("Builds silk React module")
-
-lazy val reactComponents = (project in file("silk-react-components"))
-  .settings(commonSettings: _*)
-  .settings(
-    name := "Silk React Components",
-    //////////////////////////////////////////////////////////////////////////////
-    // Silk React build pipeline
-    //////////////////////////////////////////////////////////////////////////////
-    /** Check that all necessary build tool for the JS pipeline are available */
-    checkJsBuildTools := Def.taskDyn {
-      if(!buildReactExternally) {
-        Def.task { ReactBuildHelper.checkReactBuildTool() }
-      } else {
-        Def.task { }
-      }
-    }.value,
-    yarnInstall := Def.taskDyn {
-      checkJsBuildTools.value
-      if(!buildReactExternally) {
-        Def.task { ReactBuildHelper.yarnInstall(baseDirectory.value) }
-      } else {
-        Def.task { }
-      }
-    }.value,
-    // Run when building silk react
-    /** Build Silk React */
-    buildSilkReact := {
-      // Build React components
-      yarnInstall.value // depend on check
-      val distRoot = silkDistRoot.value
-      val workbenchRoot = silkWorkbenchRoot.value
-      if(!buildReactExternally) {
-        val reactWatchConfig = WatchConfig(new File(baseDirectory.value, "src"), fileRegex = """\.(jsx|js|tsx|ts|scss|json)$""")
-
-        def distFile(name: String): File = new File(baseDirectory.value, "dist/" + name)
-        if (Watcher.staleTargetFiles(reactWatchConfig, Seq(distFile("main.js"), distFile("style.css")))) {
-          ReactBuildHelper.buildReactComponentsAndCopy(baseDirectory.value, distRoot, "Silk")
-        }
-        // Transpile pure JavaScript files
-        val silkReactWorkbenchRoot = new File(baseDirectory.value, "silk-workbench")
-        val changedJsFiles = Watcher.filesChanged(WatchConfig(silkReactWorkbenchRoot, fileRegex = """\.js$"""))
-
-        if(changedJsFiles.nonEmpty) {
-          // Transpile JavaScript files to ES5
-          for(file <- changedJsFiles) {
-            val relativePath = silkReactWorkbenchRoot.toURI().relativize(file.toURI()).getPath()
-            val targetFile = new File(workbenchRoot, relativePath)
-            ReactBuildHelper.transpileJavaScript(baseDirectory.value, file, targetFile)
-          }
-        }
-      }
-    },
-    (Compile / compile) := ((Compile / compile) dependsOn buildSilkReact).value,
-    watchSources ++= { // Watch all files under the silk-react-components/src directory for changes
-      if(buildReactExternally) {
-        Seq.empty
-      } else {
-        val paths = for(path <- Path.allSubpaths(baseDirectory.value / "src")) yield {
-          path._1
-        }
-        paths.toSeq
-      }
-    },
-    watchSources ++= { // Watch all JavaScript files under the silk-react-components/silk-workbench directory for changes
-      val paths = for(path <- Path.allSubpaths(baseDirectory.value / "silk-workbench")) yield {
-        path._1
-      }
-      paths.toSeq.filter(_.getName.endsWith(".js"))
-    }
-  )
-
-//////////////////////////////////////////////////////////////////////////////
-// Silk React Workbench
-//////////////////////////////////////////////////////////////////////////////
-
 val buildDiReact = taskKey[Unit]("Builds Workbench React module")
 val yarnInstall = taskKey[Unit]("Runs yarn install.")
 val generateLanguageFiles = taskKey[Unit]("Generate i18n language files.")
@@ -369,6 +295,8 @@ lazy val reactUI = (project in file("workspace"))
     /** Build DataIntegration React */
     buildDiReact := {
       generateLanguageFiles.value
+      val workbenchRoot = silkWorkbenchRoot.value
+      val legacyRoot = silkLegacyUiRoot.value
       if(!buildReactExternally) {
         // TODO: Add additional source directories
         val reactWatchConfig = WatchConfig(new File(baseDirectory.value, "src"), fileRegex = """\.(tsx|ts|scss|json)$""")
@@ -385,6 +313,19 @@ lazy val reactUI = (project in file("workspace"))
         if (Watcher.staleTargetFiles(reactWatchConfig, Seq(distFile("index.html")))) {
           ReactBuildHelper.buildReactComponents(baseDirectory.value, "Workbench")
         }
+
+        /** Transpile pure JavaScript files of the legacy UI */
+        val silkLegacyWorkbenchRoot = new File(legacyRoot, "silk-workbench")
+        val changedJsFiles = Watcher.filesChanged(WatchConfig(silkLegacyWorkbenchRoot, fileRegex = """\.js$"""))
+
+        if(changedJsFiles.nonEmpty) {
+          // Transpile JavaScript files to ES5
+          for(file <- changedJsFiles) {
+            val relativePath = silkLegacyWorkbenchRoot.toURI().relativize(file.toURI()).getPath()
+            val targetFile = new File(workbenchRoot, relativePath)
+            ReactBuildHelper.transpileJavaScript(baseDirectory.value, file, targetFile)
+          }
+        }
       }
     },
     (Compile / compile) := ((Compile / compile) dependsOn buildDiReact).value,
@@ -400,6 +341,12 @@ lazy val reactUI = (project in file("workspace"))
           new File(baseDirectory.value, "src/locales/generated/en.json")
         )
       }
+    },
+    watchSources ++= { // Watch all JavaScript files under the silk-legacy-ui/silk-workbench directory for changes
+      val paths = for(path <- Path.allSubpaths(silkLegacyUiRoot.value / "silk-workbench")) yield {
+        path._1
+      }
+      paths.toSeq.filter(_.getName.endsWith(".js"))
     }
   )
 
@@ -409,8 +356,8 @@ lazy val reactUI = (project in file("workspace"))
 
 lazy val workbenchCore = (project in file("silk-workbench/silk-workbench-core"))
   .enablePlugins(PlayScala)
-  .dependsOn(workspace, workspace % "test -> test", core % "test->test", serializationJson, reactComponents, pluginsXml % "test->compile", pluginsRdf % "test->compile")
-  .aggregate(workspace, reactComponents)
+  .dependsOn(workspace, workspace % "test -> test", core % "test->test", serializationJson, pluginsXml % "test->compile", pluginsRdf % "test->compile")
+  .aggregate(workspace)
   .settings(commonSettings: _*)
   .settings(
     name := "Silk Workbench Core",

package.json

@@ -1,7 +1,7 @@
 
 {
   "name": "silk",
-  "description": "We use Lerna and Yarn workspace to use the gui-elements sub-module in the workspace and silk-react-components projects without duplication.",
+  "description": "We use Yarn workspaces in order to use the gui-elements as dependency.",
   "private": true,
   "license": "Apache 2.0",
   "workspaces": [

silk-react-components/README.md → silk-legacy-ui/README.md

@@ -1,13 +1,12 @@
-# silk-react-components
+# silk-legacy-ui
 
-> JavaScript & React components of the silk project.
+> Legacy JavaScript components of the silk project.
 
 This project is part of the effort to modernize the javascript build process and asset management in the silk project.
 It serves three main purposes at the moment:
 
-1. Providing a build and development environment for new React components
-2. Providing an environment to manage other JavaScript assets for silk
-3. Providing a way to manage external libraries
+1. Providing an environment to manage other JavaScript assets for silk
+2. Providing a way to manage external libraries
 
 ## Usage
 
@@ -37,16 +36,3 @@ Furthermore you are able to check, that all files are ecmascript 5 compatible wi
 External library scripts are maintained with the help of yarn and the npm registry.
 They are defined as dependencies in the `package.json`.
 `make vendors` installs those dependencies and copies them to their respective location.
-
-### React development
-
-**Build command**: `make build-react`
-
-- With `yarn start` you start a local development environment which mocks all APIs.
-- With `make build-react` you can build all React components of silk and copy them to their respective locations
-
-### React development with Silk backend
-
-Run in Silk root directory: sbt "project workbench" ~run
-
-This will start the Silk workbench with file watchers active that watch for source changes in the Silk React subproject and trigger builds of the component.

silk-react-components/package.json → silk-legacy-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "silk-react-components",
+  "name": "silk-legacy-ui",
   "version": "1.0.0",
   "description": "JavaScript & React components of the silk project.",
   "main": "index.js",

silk-react-components/silk-workbench/silk-workbench-core/public/main.js → silk-legacy-ui/silk-workbench/silk-workbench-core/public/main.js

@@ -19,8 +19,6 @@
  */
 
 /* exported contentWidth
-silk-react-components/silk-workbench/silk-workbench-rules/public/js/links.js
-silk-react-components/silk-workbench/silk-workbench-rules/public/js/population.js
 */
 var helpWidth = 170;
 var contentWidth;

silk-react-components/silk-workbench/silk-workbench-rules/public/js/editor/status.js → silk-legacy-ui/silk-workbench/silk-workbench-rules/public/js/editor/status.js

@@ -4,9 +4,6 @@ if (!highlightElement) {
     throw new Error('status.js must be imported as well as editor.js');
 }
 
-/* exported updateStatus showPendingIcon
-silk-react-components/silk-workbench/silk-workbench-rules/public/js/editor/editor.js
-*/
 
 /**
  * Displays messages.

silk-react-components/webpack.dev.watch.config.js → silk-legacy-ui/webpack.dev.watch.config.js

@@ -6,7 +6,7 @@ const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 const merge = require('webpack-merge');
 const baseConfig = require('./webpack.base.config.js');
 
-baseConfig.output.path = resolveApp('../../target/web/public/main/lib/silk-workbench-core/libs/silk-react-components/')
+baseConfig.output.path = resolveApp('../../target/web/public/main/lib/silk-workbench-core/libs/silk-legacy-ui/')
 
 module.exports = merge(baseConfig, {
   mode: 'development',

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

@@ -27,7 +27,7 @@
     @header
 
     <!-- MDL inclusions: -->
-    <link type="text/css" href="@Assets.at("libs/silk-react-components/style.css")" rel="stylesheet" />
+    <link type="text/css" href="@Assets.at("libs/silk-legacy-ui/style.css")" rel="stylesheet" />
 
     @if(config.workbench.mdlStyle.isDefined) {
       @* This indicates that Silk is running in a modified version which can supply an alternative version of MDL. *@

silk-workbench/silk-workbench-core/public/libs/README.md

@@ -4,16 +4,16 @@ This folder contains (mostly) external libraries, these can be broken down to th
 
 ## Internal libraries
 
-These libraries are written by silk maintainers and managed in the [silk-react-components](../../../../silk-react-components/)
+These libraries are written by silk maintainers and managed in the [silk-legacy-ui](../../../../silk-legacy-ui/)
 
 > ATTENTION: Changes committed to files in this directory are likely to be overwritten. DO NOT COMMIT DIRECTLY.
 
 - dynep
-- silk-react-components
+- silk-legacy-ui
 
 ## External libraries, managed
 
-These external libraries are managed via npm in the [silk-react-components](../../../../silk-react-components/).
+These external libraries are managed via npm in the [silk-legacy-ui](../../../../silk-legacy-ui/).
 
 > ATTENTION: Changes committed to files in this directory are likely to be overwritten. DO NOT COMMIT DIRECTLY.
 

silk-workbench/silk-workbench-rules/app/views/editor/transformRules.scala.html

@@ -11,7 +11,7 @@
 
 @content = {
   <div id="react-hierarchicalMapping"></div>
-  <script src="@CoreAssets.at("libs/silk-react-components/main.js")" type="text/javascript"></script>
+  <script src="@CoreAssets.at("libs/silk-legacy-ui/main.js")" type="text/javascript"></script>
   <script type="text/javascript">
 
       silkReactComponents.hierarchicalMapping(

silk-workbench/silk-workbench-rules/app/views/evaluateTransform/evaluateTransform.scala.html

@@ -6,7 +6,7 @@
 @(context: Context[TransformSpec], selectedRule: String, offset: Int, limit: Int)(implicit request: RequestHeader)
 
 @header = {
-  <script src="@CoreAssets.at("libs/silk-react-components/main.js")" type="text/javascript"></script>
+  <script src="@CoreAssets.at("libs/silk-legacy-ui/main.js")" type="text/javascript"></script>
   <link type="text/css" href="@Assets.at("stylesheets/evaluateTransform/evaluateTransform.css")" rel="stylesheet" />
 }
 

silk-workbench/silk-workbench-rules/app/views/executeLinking/linkingReport.scala.html

@@ -5,7 +5,7 @@
 @(task: ProjectTask[LinkSpec])
 
 <div>
-  <script src="@CoreAssets.at("libs/silk-react-components/main.js")" type="text/javascript"></script>
+  <script src="@CoreAssets.at("libs/silk-legacy-ui/main.js")" type="text/javascript"></script>
   <script type="text/javascript">
     silkReactComponents.linkingExecutionReport(
       'react-linkingExecutionReport',

silk-workbench/silk-workbench-rules/app/views/executeTransform/executeTransform.scala.html

@@ -11,7 +11,7 @@
 @(context: Context[TransformSpec])(implicit session: play.api.mvc.Session, request: RequestHeader)
 
 @header = {
-  <script src="@CoreAssets.at("libs/silk-react-components/main.js")" type="text/javascript"></script>
+  <script src="@CoreAssets.at("libs/silk-legacy-ui/main.js")" type="text/javascript"></script>
 }
 
 @toolbar = {

silk-workbench/silk-workbench-rules/app/views/executeTransform/transformReport.scala.html

@@ -12,7 +12,7 @@
 @(task: ProjectTask[TransformSpec])
 
 <div>
-  <script src="@CoreAssets.at("libs/silk-react-components/main.js")" type="text/javascript"></script>
+  <script src="@CoreAssets.at("libs/silk-legacy-ui/main.js")" type="text/javascript"></script>
   <script type="text/javascript">
     silkReactComponents.transformExecutionReport(
       'react-transformExecutionReport',

silk-workbench/silk-workbench-workflow/app/views/workflow/executionReport.scala.html

@@ -7,7 +7,7 @@
 @(context: Context[Workflow], report: Option[String])(implicit request: RequestHeader, userContext: UserContext)
 
 @header = {
-  <script src="@CoreAssets.at("libs/silk-react-components/main.js")" type="text/javascript"></script>
+  <script src="@CoreAssets.at("libs/silk-legacy-ui/main.js")" type="text/javascript"></script>
 }
 
 @content = {

silk-workbench/silk-workbench-workflow/app/views/workflow/workflowNodeExecutionReport.scala.html

@@ -7,7 +7,7 @@
 @(context: Context[Workflow], nodeId: String)(implicit request: RequestHeader, userContext: UserContext)
 
 @header = {
-  <script src="@CoreAssets.at("libs/silk-react-components/main.js")" type="text/javascript"></script>
+  <script src="@CoreAssets.at("libs/silk-legacy-ui/main.js")" type="text/javascript"></script>
   <style>
     html, body { background-color: #f5f5f5 !important }
   </style>

silk-workbench/silk-workbench-workspace/app/controllers/workspaceApi/search/ItemType.scala

@@ -68,11 +68,9 @@ object ItemType {
         ItemLink("Learning", s"$context/linking/$projectId/$itemId/learnStart")
       )
       case ItemType.workflow if !WorkbenchConfig().tabs.legacyWorkflowEditor => Seq(
-        ItemLink("Workflow report", s"$context/workflow/report/$projectId/$itemId")
       )
       case ItemType.workflow => Seq(
         ItemLink("Workflow editor (legacy)", s"$context/workflow/editor/$projectId/$itemId"),
-        ItemLink("Workflow report", s"$context/workflow/report/$projectId/$itemId")
       )
       case _: ItemType if taskSpec.isDefined =>
         taskSpec.get.taskLinks.map(taskLink => ItemLink(taskLink.id, taskLink.url))

workspace/package.json

@@ -19,7 +19,8 @@
         "test": "node scripts/test.js",
         "test-ci": "export CI=true && node scripts/test.js --coverage --reporters=\"default\" --reporters=\"jest-junit\" --no-colors",
         "sync-trans": "sync-i18n --files 'src/locales/manual/*.json' --primary en --languages de --space 4 -- --check",
-        "i18n-parser": "node scripts/i18next-scanner.js"
+        "i18n-parser": "node scripts/i18next-scanner.js",
+        "babel": "cross-env NODE_ENV=production babel --no-babelrc --presets=babel-preset-env,babel-preset-react"
     },
     "dependencies": {
         "@blueprintjs/core": "^3.49.1",
@@ -56,6 +57,7 @@
         "redux": "^4.0.0",
         "redux-logger": "^3.0.6",
         "store": "^2.0.12",
+
         "@eccenca/superagent": "^1.4.1",
         "ecc-utils": "^1.4.0",
         "gui-elements-deprecated": "npm:@eccenca/gui-elements@^5.1.1",
@@ -190,13 +192,16 @@
         "@typescript-eslint/parser": "^4.33.0",
         "@welldone-software/why-did-you-render": "^4.0.5",
         "axios-mock-adapter": "^1.18.1",
+        "babel-cli": "^6.26.0",
         "babel-eslint": "10.1.0",
         "babel-jest": "^24.9.0",
         "babel-loader": "8.1.0",
         "babel-plugin-named-asset-import": "^0.3.6",
         "babel-preset-env": "^1.7.0",
+        "babel-preset-react": "^6.24.1",
         "babel-preset-react-app": "^9.1.2",
         "case-sensitive-paths-webpack-plugin": "2.3.0",
+        "cross-env": "^5.2.0",
         "css-loader": "^5.2.7",
         "dotenv": "8.2.0",
         "dotenv-expand": "5.1.0",