[WTF-2115] Generate types for editable images and files

packages/pluggable-widgets-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mendix/pluggable-widgets-tools",
-  "version": "11.3.1",
+  "version": "11.8.0",
   "description": "Mendix Pluggable Widgets Tools",
   "engines": {
     "node": ">=20"
@@ -78,7 +78,7 @@
     "jest-jasmine2": "^29.0.3",
     "jest-junit": "^13.0.0",
     "make-dir": "^3.1.0",
-    "mendix": "^10.21.64362",
+    "mendix": "^11.8.0",
     "mime": "^3.0.0",
     "node-fetch": "^2.6.1",
     "postcss": "^8.3.11",

packages/pluggable-widgets-tools/src/typings-generator/WidgetXml.ts

@@ -51,6 +51,7 @@ export interface Property {
         isDefault?: string;
         dataSource?: string;
         onChange?: string;
+        allowUpload?: string;
     };
     caption?: string[];
     category?: string[];

packages/pluggable-widgets-tools/src/typings-generator/__tests__/index.spec.ts

@@ -45,6 +45,8 @@ import { associationMetaDataNativeInput, associationMetaDataWebInput } from "./i
 import { associationMetaDataNativeOutput, associationMetaDataWebOutput } from "./outputs/metadata-association";
 import {listActionWithVariablesInput, listActionWithVariablesInputNative} from "./inputs/list-action-with-variables";
 import {listActionWithVariablesOutput, listActionWithVariablesOutputNative} from "./outputs/list-action-with-variables";
+import {imageWebInput, imageNativeInput} from "./inputs/image";
+import {imageWebOutput, imageNativeOutput} from "./outputs/image";
 
 describe("Generating tests", () => {
     it("Generates a parsed typing from XML for native", () => {
@@ -236,6 +238,16 @@ describe("Generating tests", () => {
         const newContent = generateNativeTypesFor(associationMetaDataNativeInput);
         expect(newContent).toBe(associationMetaDataNativeOutput);
     });
+
+    it("Generates a parsed typing from XML for web using images", () => {
+        const newContent = generateFullTypesFor(imageWebInput);
+        expect(newContent).toBe(imageWebOutput);
+    });
+
+     it("Generates a parsed typing from XML for native using images", () => {
+        const newContent = generateNativeTypesFor(imageNativeInput);
+        expect(newContent).toBe(imageNativeOutput);
+    });
 });
 
 function generateFullTypesFor(xml: string) {

packages/pluggable-widgets-tools/src/typings-generator/__tests__/inputs/file.ts

@@ -12,6 +12,10 @@ export const fileInput = `<?xml version="1.0" encoding="utf-8"?>
                 <caption>File 2</caption>
                 <description />
             </property>
+            <property key="file3" type="file" allowUpload="true">
+                <caption>File 3</caption>
+                <description />
+            </property>
         </propertyGroup>
         <propertyGroup caption="Actions">
             <property key="description" type="attribute">
@@ -49,6 +53,10 @@ export const fileInputNative = `<?xml version="1.0" encoding="utf-8"?>
                 <caption>File 2</caption>
                 <description />
             </property>
+             <property key="file3" type="file" allowUpload="true">
+                <caption>File 3</caption>
+                <description />
+            </property>
         </propertyGroup>
         <propertyGroup caption="Actions">
             <property key="description" type="attribute">

packages/pluggable-widgets-tools/src/typings-generator/__tests__/inputs/image.ts

@@ -0,0 +1,81 @@
+export const imageWebInput = `<?xml version="1.0" encoding="utf-8"?>
+<widget id="mendix.mywidget.MyWidget" needsEntityContext="true" offlineCapable="true" pluginWidget="true"
+        xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../xsd/widget.xsd">
+    <properties>
+        <propertyGroup caption="General">
+            <property key="image" type="image">
+                <caption>Image</caption>
+                <description />
+            </property>
+            <property key="image2" type="image" required="false">
+                <caption>Image 2</caption>
+                <description />
+            </property>
+            <property key="image3" type="image" allowUpload="true">
+                <caption>Image 3</caption>
+                <description />
+            </property>
+        </propertyGroup>
+        <propertyGroup caption="Actions">
+            <property key="description" type="attribute">
+                <caption>Action</caption>
+                <description />
+                <attributeTypes>
+                    <attributeType name="String"/>
+                </attributeTypes>    
+            </property>
+            <property key="action" type="action">
+                <caption>Action</caption>
+                <description />
+            </property>
+        </propertyGroup>
+        <propertyGroup caption="Other">
+            <propertyGroup caption="System Properties">
+                <systemProperty key="Label"></systemProperty>
+                <systemProperty key="TabIndex"></systemProperty>
+            </propertyGroup>
+        </propertyGroup>
+    </properties>
+</widget>`;
+
+export const imageNativeInput = `<?xml version="1.0" encoding="utf-8"?>
+<widget id="mendix.mywidget.MyWidget" needsEntityContext="true" offlineCapable="true" pluginWidget="true" supportedPlatform="Native"
+        xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../xsd/widget.xsd">
+    <properties>
+         <propertyGroup caption="General">
+            <property key="image" type="image">
+                <caption>Image</caption>
+                <description />
+            </property>
+            <property key="image2" type="image" required="false">
+                <caption>Image 2</caption>
+                <description />
+            </property>
+             <property key="image3" type="image" allowUpload="true">
+                <caption>Image 3</caption>
+                <description />
+            </property>
+        </propertyGroup>
+        <propertyGroup caption="Actions">
+            <property key="description" type="attribute">
+                <caption>Action</caption>
+                <description />
+                <attributeTypes>
+                    <attributeType name="String"/>
+                </attributeTypes>    
+            </property>
+            <property key="action" type="action">
+                <caption>Action</caption>
+                <description />
+            </property>
+        </propertyGroup>
+        <propertyGroup caption="Other">
+            <propertyGroup caption="System Properties">
+                <systemProperty key="Label"></systemProperty>
+                <systemProperty key="TabIndex"></systemProperty>
+            </propertyGroup>
+        </propertyGroup>
+    </properties>
+</widget>`;

packages/pluggable-widgets-tools/src/typings-generator/__tests__/outputs/file.ts

@@ -3,14 +3,15 @@ export const fileWebOutput = `/**
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix Widgets Framework Team
  */
-import { ActionValue, DynamicValue, EditableValue, FileValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, EditableFileValue, FileValue } from "mendix";
 
 export interface MyWidgetContainerProps {
     name: string;
     tabIndex?: number;
     id: string;
     file: DynamicValue<FileValue>;
     file2?: DynamicValue<FileValue>;
+    file3: EditableFileValue<FileValue>;
     description: EditableValue<string>;
     action?: ActionValue;
 }
@@ -21,6 +22,7 @@ export interface MyWidgetPreviewProps {
     translate: (text: string) => string;
     file: string;
     file2: string;
+    file3: string;
     description: string;
     action: {} | null;
 }
@@ -30,6 +32,7 @@ export const fileNativeOutput = `export interface MyWidgetProps<Style> {
     style: Style[];
     file: DynamicValue<FileValue>;
     file2?: DynamicValue<FileValue>;
+    file3: EditableFileValue<FileValue>;
     description: EditableValue<string>;
     action?: ActionValue;
 }`;

packages/pluggable-widgets-tools/src/typings-generator/__tests__/outputs/image.ts

@@ -0,0 +1,38 @@
+export const imageWebOutput = `/**
+ * This file was generated from MyWidget.xml
+ * WARNING: All changes made to this file will be overwritten
+ * @author Mendix Widgets Framework Team
+ */
+import { ActionValue, DynamicValue, EditableValue, EditableImageValue, WebImage } from "mendix";
+
+export interface MyWidgetContainerProps {
+    name: string;
+    tabIndex?: number;
+    id: string;
+    image: DynamicValue<WebImage>;
+    image2?: DynamicValue<WebImage>;
+    image3: EditableImageValue<WebImage>;
+    description: EditableValue<string>;
+    action?: ActionValue;
+}
+
+export interface MyWidgetPreviewProps {
+    readOnly: boolean;
+    renderMode: "design" | "xray" | "structure";
+    translate: (text: string) => string;
+    image: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
+    image2: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
+    image3: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
+    description: string;
+    action: {} | null;
+}
+`;
+export const imageNativeOutput = `export interface MyWidgetProps<Style> {
+    name: string;
+    style: Style[];
+    image: DynamicValue<NativeImage>;
+    image2?: DynamicValue<NativeImage>;
+    image3: EditableImageValue<NativeImage>;
+    description: EditableValue<string>;
+    action?: ActionValue;
+}`;

packages/pluggable-widgets-tools/src/typings-generator/generate.ts

@@ -10,6 +10,8 @@ const mxExports = [
     "DynamicValue",
     "EditableValue",
     "EditableListValue",
+    "EditableFileValue",
+    "EditableImageValue",
     "FileValue",
     "ListValue",
     "NativeIcon",

packages/pluggable-widgets-tools/src/typings-generator/generateClientTypes.ts

@@ -128,12 +128,15 @@ function toClientPropType(
             return "number";
         case "decimal":
             return "Big";
-        case "icon":
+        case "icon": 
             return isNative ? "DynamicValue<NativeIcon>" : "DynamicValue<WebIcon>";
-        case "image":
-            return isNative ? "DynamicValue<NativeImage>" : "DynamicValue<WebImage>";
+        case "image": {
+            const allowUpload = prop.$.allowUpload === "true";
+            const imageType = isNative ? "NativeImage" : "WebImage";
+            return allowUpload ? `EditableImageValue<${imageType}>` : `DynamicValue<${imageType}>`;
+        }
         case "file":
-            return "DynamicValue<FileValue>";
+            return prop.$.allowUpload ? "EditableFileValue<FileValue>" : "DynamicValue<FileValue>";
         case "datasource":
             return "ListValue";
         case "attribute": {