#50011 Issue 49999 - Finish up the transfer to React
Closed 3 years ago by spichugi. Opened 5 years ago by spichugi.
spichugi/389-ds-base react_trans_finish  into  master

file modified
+4 -1
@@ -758,6 +758,7 @@ 

  

  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 @@ 

  $(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

@@ -4,6 +4,9 @@ 

  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/

  

@@ -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"

@@ -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 @@ 

  }

  

  .ds-gap {

-   margin-bottom: 40px !important:

+   margin-bottom: 40px !important;

  }

  

  .ds-tree-content {

@@ -387,8 +387,7 @@ 

      });

    }

    $("#plugin-tab").on("click", function() {

-     cockpit.jump("/389-console/plugins", cockpit.transport.host);

+     $(".all-pages").hide();

+     $("#plugin-content").show();

    });

  });

- 

- 

src/cockpit/389-console/src/index.es6 src/cockpit/389-console/src/plugins.es6
file renamed
file was moved with no change to the file
@@ -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>

- 

@@ -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>

@@ -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 @@ 

      constructor() {

          super();

          this.state = {

-             hostname: _("Unknown"),

-             checked: true

+             hostname: _("Unknown")

          };

-         this.handleChange = this.handleChange.bind(this);

  

          cockpit

                  .file("/etc/hostname")
@@ -22,31 +19,16 @@ 

                  });

      }

  

-     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>

          );

      }

@@ -21,8 +21,8 @@ 

  

  var info = {

      entries: {

-         "plugins": [

-             "./plugins.es6"

+         "index": [

+             "./index.es6"

          ]

      },

      files: [
@@ -46,7 +46,6 @@ 

          "servers.html",

          "servers.js",

          "static",

-         "plugins.html",

          "manifest.json",

      ],

  };
@@ -154,6 +153,10 @@ 

                  exclude: /node_modules/,

                  loader: extract.extract('css-loader!sass-loader'),

                  test: /\.scss$/

+             },

+             {

+                 test: /\.css$/,

+                 use: [ 'style-loader', 'css-loader' ]

              }

          ]

      },

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: ?

From this PR, you'll be able to fully join the UI development in React. :)
You can start to add your modules as 'secutiry.jsx', etc. and include it as it's done with 'plugins.jsx' Plugins.

I'm getting some console errors:

index.html:547 GET http://localhost.localdomain:9090/cockpit/@localhost/389-console/index.js net::ERR_ABORTED 404 (Not Found)

index.html:547 GET http://localhost.localdomain:9090/cockpit/@localhost/389-console/index.js net::ERR_ABORTED 404 (Not Found)

I'm getting some console errors:
index.html:547 GET http://localhost.localdomain:9090/cockpit/@localhost/389-console/index.js net::ERR_ABORTED 404 (Not Found)

index.html:547 GET http://localhost.localdomain:9090/cockpit/@localhost/389-console/index.js net::ERR_ABORTED 404 (Not Found)

Weird... Do you have the file? index.js
It should be generated after 'npm run build' (which is run in Makefile target)

How do you install it?
If you just do it locally you can run:

make 389-console-clean
make 389-console

There is no index.js I was just running it from my .local directory.

Also those commands do not work:

[mareynol@localhost 389-ds-base]$ make -f rpm.mk 389-console-clean
make: *** No rule to make target '389-console-clean'. Stop.

[mareynol@localhost 389-ds-base]$ make -f rpm.mk 389-console
make: *** No rule to make target '389-console'. Stop.

Either way LGTM - we can address any other issues later

There is no index.js I was just running it from my .local directory.
Also those commands do not work:
[mareynol@localhost 389-ds-base]$ make -f rpm.mk 389-console-clean
make: No rule to make target '389-console-clean'. Stop.
[mareynol@localhost 389-ds-base]$ make -f rpm.mk 389-console
make:
No rule to make target '389-console'. Stop.

Okay.

The targets '389-console-clean', '389-console' and '389-console-devel-install' are in Makefile.am.

'make -f rpm.mk' is used for creating 'srpms' or 'dist-bz2' tarball (that are the places where cockpit is involved too)

So you need to run:

make 389-console-clean
make 389-console
make 389-console-devel-install  # if you haven't run it yet

rebased onto fb293b78cd7c9348c47fd9a2c451e819184ae29c

5 years ago

rebased onto ce05f24

5 years ago

Pull-Request has been merged by spichugi

5 years ago

389-ds-base is moving from Pagure to Github. This means that new issues and pull requests
will be accepted only in 389-ds-base's github repository.

This pull request has been cloned to Github as issue and is available here:
- https://github.com/389ds/389-ds-base/issues/3070

If you want to continue to work on the PR, please navigate to the github issue,
download the patch from the attachments and file a new pull request.

Thank you for understanding. We apologize for all inconvenience.

Pull-Request has been closed by spichugi

3 years ago