[DAT-3908] React upgrade

build.gradle

@@ -1,6 +1,6 @@
 plugins {
     id 'java'
-    id 'com.mendix.gradle.publish-module-plugin' version '1.16'
+    id 'com.mendix.gradle.publish-module-plugin' version '1.17'
     id 'net.researchgate.release' version '2.8.1'
 }
 
@@ -16,6 +16,7 @@ mxMarketplace {
     appName       = "Audittrail"
     filterWidgets = true
     appDirectory      = "."
+    includeFiles  = List.of(ossClearanceFile)
     versionPathPrefix = "__Version " // the path prefix within the module to the version folder
 }
 

environment.gradle

@@ -6,3 +6,4 @@ def mxInstallVersion = System.getenv('MODELER_VERSION') ?: System.getenv('MX_INS
 
 project.ext.mxInstallPath = "${mxPath}/${mxInstallVersion}"
 project.ext.mxRuntimeBundles = new File("${mxInstallPath}/runtime/bundles")
+project.ext.ossClearanceFile = file("SiemensMendixAudittrail__10.2.0__READMEOSS.html")

gradle.properties

@@ -1 +1 @@
-version=10.1.1
+version=10.2.0

javascriptsource/datawidgets/actions/Export_To_Excel.js

@@ -0,0 +1,82 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+import { utils, writeFileXLSX } from './xlsx-export-tools.js';
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} datagridName
+ * @param {string} fileName
+ * @param {string} sheetName
+ * @param {boolean} includeColumnHeaders
+ * @param {Big} chunkSize - The number of items fetched and exported per request.
+ * @returns {Promise.<boolean>}
+ */
+export async function Export_To_Excel(datagridName, fileName, sheetName, includeColumnHeaders, chunkSize) {
+	// BEGIN USER CODE
+    if (!fileName || !datagridName || !sheetName) {
+        return false;
+    }
+
+    const REGISTRY_NAME = "com.mendix.widgets.web.datagrid.export";
+    const registry = window[REGISTRY_NAME];
+    const controller = registry.get(datagridName);
+
+    if (controller === undefined) {
+        return false;
+    }
+
+    return new Promise((resolve) => {
+        function handler(req) {
+            let worksheet;
+            let headers;
+
+            req.on("headers", (hds) => {
+                headers = hds.map(header => header.name);
+                if (includeColumnHeaders) {
+                    worksheet = utils.aoa_to_sheet([headers]);
+                }
+            });
+
+            req.on("data", (data) => {
+                if (worksheet === undefined) {
+                    worksheet = utils.aoa_to_sheet(data)
+                } else {
+                    utils.sheet_add_aoa(worksheet, data, { origin: -1 });
+                }
+            });
+
+            req.on("end", () => {
+                if (worksheet) {
+                    // Set character width for each column
+                    // https://docs.sheetjs.com/docs/csf/sheet#worksheet-object
+                    worksheet["!cols"] = headers.map(header => ({
+                        wch: header.length + 10
+                    }));
+                    const workbook = utils.book_new();
+                    utils.book_append_sheet(workbook, worksheet, sheetName === "" ? "Data" : sheetName);
+                    writeFileXLSX(workbook, `${fileName}.xlsx`);
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            });
+
+            req.on("abort", () => resolve(false));
+        }
+
+        controller.exportData(handler, {
+            withHeaders: true,
+            limit: chunkSize.toNumber()
+        })
+    });
+	// END USER CODE
+}

javascriptsource/datawidgets/actions/Reset_All_Filters.js

@@ -0,0 +1,26 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import { Big } from "big.js";
+import "mx-global";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} targetName - Name of the widget for which filters should be reset. Valid targets are: Data grid 2, Gallery. You can find filter name in widget settings in the "Common" group (Properties>Common>Name).
+ * @param {boolean} setToDefault - Set to default value. If true, filter will be set to its default value, otherwise it will be set to empty.
+ * @returns {Promise.<void>}
+ */
+export async function Reset_All_Filters(targetName, setToDefault) {
+	// BEGIN USER CODE
+    const plugin = window["com.mendix.widgets.web.plugin.externalEvents"];
+    if (plugin) {
+        plugin.emit(targetName, "reset.filters", setToDefault);
+    }
+	// END USER CODE
+}

javascriptsource/datawidgets/actions/Reset_Filter.js

@@ -0,0 +1,26 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} targetName - Name of the filter to reset. Valid targets are: Number filter, Date filter, Text filter, Drop-down filter. You can find filter name in widget settings in the "Common" group (Properties>Common>Name).
+ * @param {boolean} setToDefault - Set to default value. If true, filter will be set to its default value, otherwise it will be set to empty.
+ * @returns {Promise.<void>}
+ */
+export async function Reset_Filter(targetName, setToDefault) {
+	// BEGIN USER CODE
+    const plugin = window["com.mendix.widgets.web.plugin.externalEvents"];
+    if (plugin) {
+        plugin.emit(targetName, "reset.value", setToDefault);
+    }
+	// END USER CODE
+}

javascriptsource/datawidgets/actions/Set_Filter.js

@@ -0,0 +1,34 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} targetName - Name of the filter to set. Valid targets are: Number filter, Date filter, Text filter, Drop-down filter. You can find filter name in widget settings in the "Common" group (Properties>Common>Name).
+ * @param {boolean} useDefaultValue - Determine the use of default value provided by the filter component itself.
+If true, "Value" section will be ignored
+ * @param {"DataWidgets.Filter_Operators.contains"|"DataWidgets.Filter_Operators.startsWith"|"DataWidgets.Filter_Operators.endsWith"|"DataWidgets.Filter_Operators.between"|"DataWidgets.Filter_Operators.greater"|"DataWidgets.Filter_Operators.greaterEqual"|"DataWidgets.Filter_Operators.equal"|"DataWidgets.Filter_Operators.notEqual"|"DataWidgets.Filter_Operators.smaller"|"DataWidgets.Filter_Operators.smallerEqual"|"DataWidgets.Filter_Operators.empty"|"DataWidgets.Filter_Operators.notEmpty"} operators - Selected operators value. If filter has operators, this value will be applied.
+ * @param {string} stringValue - Value set for dropdown filter or text filter. Choose empty if not use.
+ * @param {Big} numberValue - Number value for number filter. Choose empty if not use.
+ * @param {Date} dateTimeValue - Date time value for date filter, can also be use as "start date". Choose empty if not use.
+ * @param {Date} dateTimeValue_2 - End date time value for range filter. Choose empty if not use.
+ * @returns {Promise.<void>}
+ */
+export async function Set_Filter(targetName, useDefaultValue, operators, stringValue, numberValue, dateTimeValue, dateTimeValue_2) {
+	// BEGIN USER CODE
+	const plugin = window["com.mendix.widgets.web.plugin.externalEvents"];
+    if (plugin) {
+        plugin.emit(targetName, "set.value", useDefaultValue, {
+			operators, stringValue, numberValue, dateTimeValue, dateTimeValue2: dateTimeValue_2
+		});
+    }
+	// END USER CODE
+}

marketplace/release-notes/10.2.0.txt

@@ -0,0 +1,2 @@
+We upgraded all widgets to pluggable widgets that use React
+We removed the ability to export to CSV in LogOverviewSnippet due to no support for it in data grid 2. It is still possible to export to Excel

theme/web/index.html

@@ -1,31 +1,29 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Mendix</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        {{themecss}}
-        {{appicons}}
-        {{manifest}}
-        {{startupimages}}
-    </head>
-    <body dir="ltr">
-        <noscript>To use this application, please enable JavaScript.</noscript>
-        <div id="content"></div>
-        <script>
-            dojoConfig = {
-                isDebug: false,
-                useCustomLogger: true,
-                async: true,
-                baseUrl: "mxclientsystem/dojo/",
-                cacheBust: "{{cachebust}}",
-                rtlRedirect: "index-rtl.html"
-            };
-        </script>
-        <script>
-            if (!document.cookie || !document.cookie.match(/(^|;)originURI=/gi))
-                document.cookie = "originURI=/login.html" + (window.location.protocol === "https:" ? ";SameSite=None;Secure" : "");
-        </script>
-        <script src="mxclientsystem/mxui/mxui.js?{{cachebust}}"></script>
-    </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{unsupportedbrowser}}
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Mendix</title>
+    {{themecss}}
+    {{appicons}}
+    {{manifest}}
+    {{startupimages}}
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script src="dist/index.js?{{cachebust}}" type="module"></script>
+    <script>  
+      if (!document.cookie || !document.cookie.match(/(^|;) *originURI=/gi)) {
+        const url = new URL(window.location.href);
+        const subPath = url.pathname.substring(0, url.pathname.lastIndexOf("/"));
+
+        document.cookie = `originURI=${subPath}/login.html${window.location.protocol === "https:" ? ";SameSite=None;Secure" : ""}`;
+      }
+    </script>
+  </body>
+</html>

themesource/administration/native/design-properties.json

@@ -0,0 +1,3 @@
+{
+
+}

themesource/administration/native/main.js

@@ -0,0 +1 @@
+

themesource/administration/web/design-properties.json

@@ -0,0 +1,3 @@
+{
+
+}

themesource/atlas_core/.version

@@ -0,0 +1 @@
+3.18.0

themesource/atlas_core/locales/en-US/com.mendix.widget.custom.badge.badge.json

@@ -0,0 +1,10 @@
+{
+    "Type": "Type",
+    "Render it as either a badge or a color label": "Render it as either a badge or a color label",
+    "Value": "Value",
+    "General": "General",
+    "On click": "On click",
+    "Events": "Events",
+    "Visibility": "Visibility",
+    "Common": "Common"
+}

themesource/atlas_core/locales/en-US/com.mendix.widget.custom.badgebutton.badgebutton.json

@@ -0,0 +1,10 @@
+{
+    "Caption": "Caption",
+    "General": "General",
+    "Value": "Value",
+    "Badge": "Badge",
+    "Visibility": "Visibility",
+    "On click": "On click",
+    "Events": "Events",
+    "Common": "Common"
+}

themesource/atlas_core/locales/en-US/com.mendix.widget.custom.carousel.carousel.json

@@ -0,0 +1,17 @@
+{
+    "Carousel displaying images": "Carousel displaying images",
+    "Data source": "Data source",
+    "Content": "Content",
+    "Data Source": "Data Source",
+    "Pagination": "Pagination",
+    "Navigation controls": "Navigation controls",
+    "Auto play": "Auto play",
+    "Delay": "Delay",
+    "The amount of time to delay between automatically cycling an item (ms)": "The amount of time to delay between automatically cycling an item (ms)",
+    "Infinite loop": "Infinite loop",
+    "Animation": "Animation",
+    "Display": "Display",
+    "On click action": "On click action",
+    "Events": "Events",
+    "General": "General"
+}

themesource/atlas_core/locales/en-US/com.mendix.widget.custom.colorpicker.colorpicker.json

@@ -0,0 +1,24 @@
+{
+    "Pick a color from color input": "Pick a color from color input",
+    "Color attribute": "Color attribute",
+    "The attribute containing a valid color, supported color formats are hexadecimal, rgb and rgba. Non-color formats such as ‘red’ are not supported.": "The attribute containing a valid color, supported color formats are hexadecimal, rgb and rgba. Non-color formats such as ‘red’ are not supported.",
+    "Data source": "Data source",
+    "Enable advanced options": "Enable advanced options",
+    "Display mode": "Display mode",
+    "The presentation of the color picker": "The presentation of the color picker",
+    "Picker type": "Picker type",
+    "The various different styles, for how the color picker should look when clicked.": "The various different styles, for how the color picker should look when clicked.",
+    "Color format": "Color format",
+    "The format that which the selected color will be saved as.": "The format that which the selected color will be saved as.",
+    "Default colors": "Default colors",
+    "This is a list of pre-defined colors used within the color picker.": "This is a list of pre-defined colors used within the color picker.",
+    "Color": "Color",
+    "Valid color value: #d0d0d0, rgb(115,159,159) or rgba(195,226,226,1)": "Valid color value: #d0d0d0, rgb(115,159,159) or rgba(195,226,226,1)",
+    "Invalid format message": "Invalid format message",
+    "Message shown when the user provides a wrong input, :colors: will be replaced by a sample format.": "Message shown when the user provides a wrong input, :colors: will be replaced by a sample format.",
+    "General": "General",
+    "Editability": "Editability",
+    "On change": "On change",
+    "Events": "Events",
+    "Visibility": "Visibility"
+}