Issue 50836 - Port Schema UI tab to React

Description: Port the schema UI tab to React and preserve all
existing features.

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

Reviewed by: mreynolds (Thank you!!)

src/cockpit/389-console/src/css/ds.css

@@ -1021,6 +1021,11 @@ option {
     width: 120px;
 }
 
+.ds-schema-dropdown {
+    border-color: #06c !important;
+    color: #06c !important;
+}
+
 .treeview .list-group-item {
     /* remove focus border */
     outline: none;

src/cockpit/389-console/src/ds.js

@@ -12,7 +12,7 @@ var security_page_loaded = 1;
 var db_page_loaded = 1;
 var repl_page_loaded = 1;
 var plugin_page_loaded = 1;
-var schema_page_loaded = 0;
+var schema_page_loaded = 1;
 var monitor_page_loaded = 1;
 var config_loaded = 0;
 
@@ -412,10 +412,6 @@ function load_config (refresh){
     get_and_set_localpwp();
     update_progress();
 
-    // Schema page
-    get_and_set_schema_tables();
-    update_progress();
-
     // Initialize the tabs
     $(".ds-tab-list").css( 'color', '#777');
     $("#server-tab").css( 'color', '#228bc0');
@@ -472,6 +468,10 @@ $(window.document).ready(function() {
     $(".all-pages").hide();
     $("#security-content").show();
   });
+  $("#schema-tab").on("click", function() {
+    $(".all-pages").hide();
+    $("#schema-content").show();
+  });
   $("#replication-tab").on("click", function() {
     $(".all-pages").hide();
     $("#replication-content").show();

src/cockpit/389-console/src/index.es6

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import { Plugins } from "./plugins.jsx";
 import { Database } from "./database.jsx";
 import { Monitor } from "./monitor.jsx";
+import { Schema } from "./schema.jsx";
 import { Security } from "./security.jsx";
 import { Replication } from "./replication.jsx";
 
@@ -49,6 +50,12 @@ function renderReactDOM(clear) {
         <Security serverId={serverIdElem} key={tabKey} />,
         document.getElementById("security")
     );
+
+    // Schema tab
+    ReactDOM.render(
+        <Schema serverId={serverIdElem} key={tabKey} />,
+        document.getElementById("schema")
+    );
 }
 
 // We have to create the wrappers because this is no simple way

src/cockpit/389-console/src/index.html

@@ -18,7 +18,6 @@
   <script src="static/c3.min.js"></script>
   <script src="static/d3.min.js"></script>
   <script src="ds.js"></script>
-  <script src="schema.js"></script>
   <script src="servers.js"></script>
   <link href="static/bootstrap.min.css" rel="stylesheet">
   <link href="static/jquery.dataTables.min.css" type="text/css" rel="stylesheet">
@@ -109,15 +108,9 @@ <h2 class="ds-logo-style" id="main-banner"></h2>
 
             <!-- Schema navtab -->
             <li class="dropdown ds-nav-tab">
-              <a href="#0" class="ds-tab-list" data-toggle="dropdown" id="schema-tab">
+              <a href="#0" class="ds-tab-list ds-tab-standalone" id="schema-tab">
                 Schema
-                <b class="caret"></b>
               </a>
-              <ul class="dropdown-menu ds-nav-item">
-                <li><a href="#0"class="ds-nav-choice" id="objectclass-btn" parent-id="schema-tab">Objectclasses</a></li>
-                <li><a href="#0"class="ds-nav-choice" id="attribute-btn" parent-id="schema-tab">Attributes</a></li>
-                <li><a href="#0" class="ds-nav-choice" id="schema-mr-btn" parent-id="schema-tab">Matching Rules</a></li>
-              </ul>
             </li>
 
             <!-- Plugins navtab -->
@@ -514,6 +507,7 @@ <h3>This server instance is running, but we can not connect to it.  Check LDAPI
       </div>
 
       <div id="schema-content" class="all-pages" hidden>
+          <div id="schema"></div>
       </div>
 
       <div id="plugin-content" class="all-pages" hidden>