Merge pull request #1291 from plone/fix-datatables

Datatables fixes
plone · Feb 15, 2023 · 8d548ca · 8d548ca
2 parents c4bf6ca + 2efac91
commit 8d548ca
Show file tree

Hide file tree

Showing 6 changed files with 484 additions and 485 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -3,7 +3,7 @@ const config = require("@patternslib/dev/jest.config.js");
 
 config.setupFilesAfterEnv.push(path.resolve(__dirname, "./src/setup-tests.js"));
 config.transformIgnorePatterns = [
-    "/node_modules/(?!@patternslib/)(?!@plone/)(?!preact/)(?!screenfull/)(?!bootstrap/)(?!datatable/)(?!regenerator-runtime/).+\\.[t|j]sx?$",
+    "/node_modules/(?!@patternslib/)(?!@plone/)(?!preact/)(?!screenfull/)(?!bootstrap/)(?!datatable/).+\\.[t|j]sx?$",
 ];
 
 module.exports = config;
diff --git a/package.json b/package.json
@@ -16,8 +16,8 @@
         "bootstrap": "^5.2.3",
         "bootstrap-icons": "^1.10.0",
         "cs-jqtree-contextmenu": "0.1.0",
-        "datatables.net": "1.13.2",
-        "datatables.net-bs5": "1.13.2",
+        "datatables.net": "<1.13",
+        "datatables.net-bs5": "<1.13",
         "datatables.net-buttons": "2.3.4",
         "datatables.net-buttons-bs5": "2.3.4",
         "datatables.net-colreorder": "1.6.1",
@@ -55,6 +55,8 @@
     "resolutions": {
         "@patternslib/patternslib": "9.8.1",
         "backbone": "1.4.1",
+        "datatables.net": "<1.13",
+        "datatables.net-bs5": "<1.13",
         "jquery": "3.6.3",
         "underscore": "1.13.6"
     },

diff --git a/src/pat/datatables/datatables.js b/src/pat/datatables/datatables.js
@@ -1,4 +1,4 @@
-import "regenerator-runtime/runtime"; // needed for ``await`` support
+import $ from "jquery";
 import Base from "@patternslib/patternslib/src/core/base";
 
 export default Base.extend({
@@ -15,29 +15,29 @@ export default Base.extend({
         import("datatables.net-bs5/css/dataTables.bootstrap5.min.css");
         import("datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css");
         import("datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css");
+        import("datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css"); // prettier-ignore
+        import("datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css"); // prettier-ignore
         import("datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css");
         import("datatables.net-select-bs5/css/select.bootstrap5.min.css");
-        import("datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css"); // prettier-ignore
-        import("datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css"); // prettier-ignore
 
         await import("datatables.net");
         await import("datatables.net-bs5");
         await import("datatables.net-buttons");
-        //await import("datatables.net-buttons-bs5");
+        await import("datatables.net-buttons-bs5");
         await import("datatables.net-buttons/js/buttons.colVis");
         await import("datatables.net-buttons/js/buttons.html5");
         await import("datatables.net-buttons/js/buttons.print");
         await import("datatables.net-colreorder");
-        //await import("datatables.net-colreorder-bs5");
+        await import("datatables.net-colreorder-bs5");
         await import("datatables.net-fixedcolumns");
-        //await import("datatables.net-fixedcolumns-bs5");
+        await import("datatables.net-fixedcolumns-bs5");
         await import("datatables.net-fixedheader");
-        //await import("datatables.net-fixedheader-bs5");
+        await import("datatables.net-fixedheader-bs5");
         await import("datatables.net-rowreorder");
-        //await import("datatables.net-rowreorder-bs5");
+        await import("datatables.net-rowreorder-bs5");
         await import("datatables.net-select");
-        //await import("datatables.net-select-bs5");
+        await import("datatables.net-select-bs5");
 
-        this.$el.DataTable(this.options);
+        $(this.el).DataTable(this.options);
     },
 });
diff --git a/src/pat/structure/structure.test.js b/src/pat/structure/structure.test.js
@@ -1,5 +1,4 @@
 import $ from "jquery";
-import DataTables from "datatables.net";
 import sinon from "sinon";
 import registry from "@patternslib/patternslib/src/core/registry";
 import utils from "@patternslib/patternslib/src/core/utils";
@@ -48,10 +47,6 @@ var extraDataJsonItem = null;
 ========================== */
 describe("AppView internals correctness", function () {
     beforeEach(function () {
-        // new to instantinate DataTables here in order to make
-        // pat-datatables work in jest tests.
-        new DataTables(window, window.$);
-
         this.server = sinon.fakeServer.create();
         this.server.autoRespond = true;
         this.server.autoRespondAfter = 0;
@@ -128,8 +123,6 @@ describe("Structure", function () {
         Cookies.remove("_fc_activeColumns");
         Cookies.remove("_fc_activeColumnsCustom");
 
-        new DataTables(window, window.$);
-
         this.server = sinon.fakeServer.create();
         this.server.autoRespond = true;
         this.server.autoRespondAfter = 0;

diff --git a/src/setup-tests.js b/src/setup-tests.js
@@ -1,5 +1,6 @@
 // Extra test setup.
 
+// provide jquery
 import jquery from "jquery";
 global.$ = global.jQuery = jquery;
 
@@ -19,3 +20,6 @@ import dom from "@patternslib/patternslib/src/core/dom";
 dom.is_visible = (el) => {
     return !el.hidden && el.style.display !== "none";
 };
+
+// Attach datatables to jQuery, as in tests it is not done by just importing.
+window.dt = require("datatables.net")();