From ce05f24635d7f1aeaa6ac4fb20a2e5bb46553377 Mon Sep 17 00:00:00 2001
From: Simon Pichugin <spichugi@redhat.com>
Date: Nov 08 2018 17:46:03 +0000
Subject: Issue 49999 - Finish up the transfer to React


Description: Move plugins.es6 to index.es6 so we can
properly navigate using old nav-bar. New React entry points
should be added to the index.es6.
Add a make target for manual Cockpit UI building:
'make 389-console' and a target to node_modules.mk 'eslint-fix'.
Fix a few CSS issues.

https://pagure.io/389-ds-base/issue/49999

Reviewed by: mreynolds, mhonek (Thanks!)

---

diff --git a/Makefile.am b/Makefile.am
index 61973d3..1fa4b71 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -758,6 +758,7 @@ libexec_SCRIPTS = ldap/admin/src/scripts/ds_selinux_enabled \
 
 install-data-hook:
 	if [ "$(srcdir)" != "." ]; then cp -r $(srcdir)/src/cockpit src ; fi
+	mkdir -p src/cockpit/389-console/cockpit_dist/
 	mkdir -p $(DESTDIR)$(cockpitdir)
 	rsync -rupE src/cockpit/389-console/cockpit_dist/ $(DESTDIR)$(cockpitdir)
 	mkdir -p $(DESTDIR)$(metainfodir)
@@ -2392,12 +2393,14 @@ $(NODE_MODULES_TEST):
 $(WEBPACK_TEST): $(NODE_MODULES_TEST)
 	cd src/cockpit/389-console; make -f node_modules.mk build-cockpit-plugin
 
+389-console: $(WEBPACK_TEST)
+
 # This requires a built source tree and avoids having to install anything system-wide
 389-console-devel-install:
 	cd $(srcdir)/src/cockpit/389-console; \
 	rm ~/.local/share/cockpit/389-console; \
 	mkdir -p ~/.local/share/cockpit/; \
-	ln -s `pwd`/dist ~/.local/share/cockpit/389-console
+	ln -s $$(pwd)/dist ~/.local/share/cockpit/389-console
 
 389-console-clean:
 	cd $(srcdir)/src/cockpit/389-console; make -f node_modules.mk clean
diff --git a/src/cockpit/389-console/node_modules.mk b/src/cockpit/389-console/node_modules.mk
index 4e8e77b..4924900 100644
--- a/src/cockpit/389-console/node_modules.mk
+++ b/src/cockpit/389-console/node_modules.mk
@@ -4,6 +4,9 @@ install: package.json
 build-cockpit-plugin: webpack.config.js
 	npm run build; cp -r dist cockpit_dist
 
+eslint-fix:
+	npm run eslint:fix
+
 clean:
 	rm -rf ./dist/ ./cockpit_dist/
 
diff --git a/src/cockpit/389-console/package.json b/src/cockpit/389-console/package.json
index b1ea2da..6f155dd 100644
--- a/src/cockpit/389-console/package.json
+++ b/src/cockpit/389-console/package.json
@@ -20,6 +20,7 @@
     "compression-webpack-plugin": "^1.1.11",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^0.28.11",
+    "style-loader": "^0.23.1",
     "eslint": "^5.4.0",
     "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-react": "^6.0.0",
@@ -42,7 +43,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
-    "@patternfly/react-core": "^1.29.0",
+    "patternfly-react": "^2.22.1",
     "node-sass": "^4.9.0",
     "react": "^16.4.2",
     "react-dom": "^16.4.2"
diff --git a/src/cockpit/389-console/src/css/ds.css b/src/cockpit/389-console/src/css/ds.css
index fd1e239..de35f07 100644
--- a/src/cockpit/389-console/src/css/ds.css
+++ b/src/cockpit/389-console/src/css/ds.css
@@ -29,7 +29,7 @@
 }
 
 .ds-inline {
-  display: inline-block; !important;
+  display: inline-block !important;
   vertical-align: top !important;
 }
 
@@ -152,7 +152,7 @@
 }
 
 .ds-oc-must-buttons {
-  padding 0 !important;
+  padding: 0 !important;
   padding-left: 3px;
   margin-top: 70px;
   margin-bottom: 75px;
@@ -161,7 +161,7 @@
 }
 
 .ds-oc-may-buttons {
-  padding 0 !important;
+  padding 0: !important;
   padding-left: 3px;
   margin-top: 4px;
   margin-left: 5px;
@@ -1256,7 +1256,7 @@ option {
 }
 
 .ds-gap {
-  margin-bottom: 40px !important:
+  margin-bottom: 40px !important;
 }
 
 .ds-tree-content {
diff --git a/src/cockpit/389-console/src/ds.js b/src/cockpit/389-console/src/ds.js
index 83d64df..1051425 100644
--- a/src/cockpit/389-console/src/ds.js
+++ b/src/cockpit/389-console/src/ds.js
@@ -387,8 +387,7 @@ $(window.document).ready(function() {
     });
   }
   $("#plugin-tab").on("click", function() {
-    cockpit.jump("/389-console/plugins", cockpit.transport.host);
+    $(".all-pages").hide();
+    $("#plugin-content").show();
   });
 });
-
-
diff --git a/src/cockpit/389-console/src/index.es6 b/src/cockpit/389-console/src/index.es6
new file mode 100644
index 0000000..4188848
--- /dev/null
+++ b/src/cockpit/389-console/src/index.es6
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Plugins } from "./plugins.jsx";
+
+document.addEventListener("DOMContentLoaded", function() {
+    ReactDOM.render(
+        React.createElement(Plugins, {}),
+        document.getElementById("plugins")
+    );
+});
diff --git a/src/cockpit/389-console/src/index.html b/src/cockpit/389-console/src/index.html
index 895c4ad..13c3462 100644
--- a/src/cockpit/389-console/src/index.html
+++ b/src/cockpit/389-console/src/index.html
@@ -535,6 +535,7 @@
       </div>
 
       <div id="plugin-content" class="all-pages" hidden>
+        <div id="plugins"></div>
       </div>
 
       <div id="monitor-content" class="all-pages" hidden>
@@ -543,6 +544,6 @@
     </div>
 
   </div>
+  <script src="index.js"></script>
 </body>
 </html>
-
diff --git a/src/cockpit/389-console/src/plugins.es6 b/src/cockpit/389-console/src/plugins.es6
deleted file mode 100644
index 4188848..0000000
--- a/src/cockpit/389-console/src/plugins.es6
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { Plugins } from "./plugins.jsx";
-
-document.addEventListener("DOMContentLoaded", function() {
-    ReactDOM.render(
-        React.createElement(Plugins, {}),
-        document.getElementById("plugins")
-    );
-});
diff --git a/src/cockpit/389-console/src/plugins.html b/src/cockpit/389-console/src/plugins.html
deleted file mode 100644
index 42a3ce2..0000000
--- a/src/cockpit/389-console/src/plugins.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<html lang="en">
-<head>
-    <title translatable="yes">Plugins</title>
-    <meta charset="utf-8">
-    <meta name="description" content="Plugins tab">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="stylesheet" href="../base1/patternfly.css">
-    <link rel="stylesheet" href="plugins.css">
-
-    <script type="text/javascript" src="../base1/cockpit.js"></script>
-    <script type="text/javascript" src="plugins.js"></script>
-</head>
-
-<body>
-    <div id="plugins"></div>
-</body>
-</html>
diff --git a/src/cockpit/389-console/src/plugins.jsx b/src/cockpit/389-console/src/plugins.jsx
index ffef0af..c0a43ce 100644
--- a/src/cockpit/389-console/src/plugins.jsx
+++ b/src/cockpit/389-console/src/plugins.jsx
@@ -1,7 +1,6 @@
 import cockpit from "cockpit";
 import React from "react";
 import "./plugins.scss";
-import { Checkbox } from "@patternfly/react-core";
 
 const _ = cockpit.gettext;
 
@@ -9,10 +8,8 @@ export class Plugins extends React.Component {
     constructor() {
         super();
         this.state = {
-            hostname: _("Unknown"),
-            checked: true
+            hostname: _("Unknown")
         };
-        this.handleChange = this.handleChange.bind(this);
 
         cockpit
                 .file("/etc/hostname")
@@ -22,31 +19,16 @@ export class Plugins extends React.Component {
                 });
     }
 
-    handleChange(event) {
-        this.setState({ checked: event.checked });
-    }
-
     render() {
-        function go_up() {
-            cockpit.jump("/389-console", cockpit.transport.host);
-        }
         return (
             <div className="container-fluid">
                 <h2>Plugins</h2>
                 <p>
-                    <a onClick={go_up}>{_("Back to main screen")}</a>
-                </p>
-                <p>
                     {cockpit.format(
                         _("Setting up plugins on server $0"),
                         this.state.hostname
                     )}
                 </p>
-                <Checkbox
-                    label="React component checkbox"
-                    checked={this.state.checked}
-                    onChange={this.handleChange}
-                />
             </div>
         );
     }
diff --git a/src/cockpit/389-console/webpack.config.js b/src/cockpit/389-console/webpack.config.js
index f0f8127..6d7cbec 100644
--- a/src/cockpit/389-console/webpack.config.js
+++ b/src/cockpit/389-console/webpack.config.js
@@ -21,8 +21,8 @@ var production = process.env.NODE_ENV === 'production';
 
 var info = {
     entries: {
-        "plugins": [
-            "./plugins.es6"
+        "index": [
+            "./index.es6"
         ]
     },
     files: [
@@ -46,7 +46,6 @@ var info = {
         "servers.html",
         "servers.js",
         "static",
-        "plugins.html",
         "manifest.json",
     ],
 };
@@ -154,6 +153,10 @@ module.exports = {
                 exclude: /node_modules/,
                 loader: extract.extract('css-loader!sass-loader'),
                 test: /\.scss$/
+            },
+            {
+                test: /\.css$/,
+                use: [ 'style-loader', 'css-loader' ]
             }
         ]
     },