feat/web view native request method headers

packages/pluggableWidgets/web-view-native/CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added GET and POST request method selection for the url
+-   We added the option to pass a list of headers with the request
+
 ## [4.1.0] - 2024-12-3
 
 ### Changed

packages/pluggableWidgets/web-view-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "web-view-native",
   "widgetName": "WebView",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/web-view-native/src/WebView.tsx

@@ -27,10 +27,25 @@ export class WebView extends Component<Props> {
             );
         }
 
+        const source = html
+            ? { html }
+            : {
+                  uri: uri!,
+                  method: this.props.requestMethod,
+                  ...(this.props.requestMethod === "POST" &&
+                      this.props.postBody && { body: this.props.postBody.value }),
+                  ...(this.props.headerList.length && {
+                      headers: Object.assign(
+                          {},
+                          ...this.props.headerList.map(h => ({ [h.headerName.value!]: h.headerValue.value }))
+                      )
+                  })
+              };
+
         return (
             <View style={this.styles.container} testID={this.props.name}>
                 <RNWebView
-                    source={html ? { html } : { uri: uri! }}
+                    source={source}
                     style={{
                         width: "100%",
                         height: "100%"

packages/pluggableWidgets/web-view-native/src/WebView.xml

@@ -18,11 +18,11 @@
         <propertyGroup caption="Events">
             <property key="onLoad" type="action" required="false">
                 <caption>On load</caption>
-                <description/>
+                <description />
             </property>
             <property key="onError" type="action" required="false">
                 <caption>On error</caption>
-                <description/>
+                <description />
             </property>
         </propertyGroup>
         <propertyGroup caption="Callback">
@@ -34,11 +34,41 @@
                 <caption>Message attribute</caption>
                 <description>The attribute where the input message will be stored. This can be used to read the input in the onMessage event.</description>
                 <attributeTypes>
-                    <attributeType name="String"/>
+                    <attributeType name="String" />
                 </attributeTypes>
             </property>
         </propertyGroup>
         <propertyGroup caption="Advanced">
+            <property key="requestMethod" type="enumeration" defaultValue="GET">
+                <caption>Request method</caption>
+                <description>The method verb for the request</description>
+                <enumerationValues>
+                    <enumerationValue key="GET">GET</enumerationValue>
+                    <enumerationValue key="POST">POST</enumerationValue>
+                </enumerationValues>
+            </property>
+            <property key="postBody" type="textTemplate" required="false">
+                <caption>POST Body</caption>
+                <description>The body that will be send in the POST request</description>
+            </property>
+            <property key="headerList" type="object" isList="true" required="false">
+                <caption>Header list</caption>
+                <description>On Android, header pass-through is only supported with the GET method</description>
+                <properties>
+                    <propertyGroup caption="Header list group">
+                        <property key="headerName" type="expression" required="true">
+                            <caption>Header name</caption>
+                            <description>Name of the header</description>
+                            <returnType type="String" />
+                        </property>
+                        <property key="headerValue" type="expression" required="true">
+                            <caption>Header value</caption>
+                            <description>Value of the header</description>
+                            <returnType type="String" />
+                        </property>
+                    </propertyGroup>
+                </properties>
+            </property>
             <property key="userAgent" type="string" required="false">
                 <caption>User agent</caption>
                 <description>A custom user agent string will be included with the request.</description>

packages/pluggableWidgets/web-view-native/src/__tests__/WebView.spec.tsx

@@ -19,6 +19,8 @@ describe("WebView", () => {
             name: "webview-test",
             style: [],
             url: dynamicValue("https://mendix.com"),
+            requestMethod: "GET",
+            headerList: [],
             userAgent: "",
             openLinksExternally: false
         };
@@ -29,6 +31,26 @@ describe("WebView", () => {
         expect(component.toJSON()).toMatchSnapshot();
     });
 
+    it("renders a web view when a url with POST method and body is provided", () => {
+        const component = render(
+            <WebView {...defaultProps} requestMethod="POST" postBody={dynamicValue('{ testKey: "testValue" }')} />
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("renders a web view when a url with headers is provided", () => {
+        const component = render(
+            <WebView
+                {...defaultProps}
+                headerList={[
+                    { headerName: dynamicValue("testName1"), headerValue: dynamicValue("testValue1") },
+                    { headerName: dynamicValue("testName2"), headerValue: dynamicValue("testValue2") }
+                ]}
+            />
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
     it("renders a web view when html content is provided", () => {
         const component = render(<WebView {...defaultProps} content={dynamicValue("Hello, world!")} />);
         expect(component.toJSON()).toMatchSnapshot();

packages/pluggableWidgets/web-view-native/src/__tests__/__snapshots__/WebView.spec.tsx.snap

@@ -48,6 +48,7 @@ exports[`WebView renders a web view when a url is provided 1`] = `
       setSupportMultipleWindows={true}
       source={
         {
+          "method": "GET",
           "uri": "https://mendix.com",
         }
       }
@@ -73,7 +74,7 @@ exports[`WebView renders a web view when a url is provided 1`] = `
 </View>
 `;
 
-exports[`WebView renders a web view when html content is provided 1`] = `
+exports[`WebView renders a web view when a url with POST method and body is provided 1`] = `
 <View
   style={
     {
@@ -119,6 +120,159 @@ exports[`WebView renders a web view when html content is provided 1`] = `
       setBuiltInZoomControls={true}
       setDisplayZoomControls={false}
       setSupportMultipleWindows={true}
+      source={
+        {
+          "body": "{ testKey: "testValue" }",
+          "method": "POST",
+          "uri": "https://mendix.com",
+        }
+      }
+      style={
+        [
+          {
+            "flex": 1,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": "#ffffff",
+          },
+          {
+            "height": "100%",
+            "width": "100%",
+          },
+        ]
+      }
+      thirdPartyCookiesEnabled={true}
+      userAgent=""
+    />
+  </View>
+</View>
+`;
+
+exports[`WebView renders a web view when a url with headers is provided 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "height": "100%",
+      "minHeight": 300,
+    }
+  }
+  testID="webview-test"
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <RNCWebView
+      allowFileAccess={false}
+      allowsFullscreenVideo={false}
+      androidHardwareAccelerationDisabled={false}
+      androidLayerType="none"
+      cacheEnabled={true}
+      javaScriptEnabled={true}
+      messagingEnabled={true}
+      messagingModuleName="WebViewMessageHandler3"
+      nestedScrollEnabled={false}
+      onHttpError={[Function]}
+      onLoadingError={[Function]}
+      onLoadingFinish={[Function]}
+      onLoadingProgress={[Function]}
+      onLoadingStart={[Function]}
+      onMessage={[Function]}
+      onRenderProcessGone={[Function]}
+      onShouldStartLoadWithRequest={[Function]}
+      overScrollMode="always"
+      saveFormDataDisabled={false}
+      scalesPageToFit={true}
+      setBuiltInZoomControls={true}
+      setDisplayZoomControls={false}
+      setSupportMultipleWindows={true}
+      source={
+        {
+          "headers": {
+            "testName1": "testValue1",
+            "testName2": "testValue2",
+          },
+          "method": "GET",
+          "uri": "https://mendix.com",
+        }
+      }
+      style={
+        [
+          {
+            "flex": 1,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": "#ffffff",
+          },
+          {
+            "height": "100%",
+            "width": "100%",
+          },
+        ]
+      }
+      thirdPartyCookiesEnabled={true}
+      userAgent=""
+    />
+  </View>
+</View>
+`;
+
+exports[`WebView renders a web view when html content is provided 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "height": "100%",
+      "minHeight": 300,
+    }
+  }
+  testID="webview-test"
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <RNCWebView
+      allowFileAccess={false}
+      allowsFullscreenVideo={false}
+      androidHardwareAccelerationDisabled={false}
+      androidLayerType="none"
+      cacheEnabled={true}
+      javaScriptEnabled={true}
+      messagingEnabled={true}
+      messagingModuleName="WebViewMessageHandler4"
+      nestedScrollEnabled={false}
+      onHttpError={[Function]}
+      onLoadingError={[Function]}
+      onLoadingFinish={[Function]}
+      onLoadingProgress={[Function]}
+      onLoadingStart={[Function]}
+      onMessage={[Function]}
+      onRenderProcessGone={[Function]}
+      onShouldStartLoadWithRequest={[Function]}
+      overScrollMode="always"
+      saveFormDataDisabled={false}
+      scalesPageToFit={true}
+      setBuiltInZoomControls={true}
+      setDisplayZoomControls={false}
+      setSupportMultipleWindows={true}
       source={
         {
           "html": "Hello, world!",

packages/pluggableWidgets/web-view-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="WebView" version="4.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="WebView" version="4.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="WebView.xml" />
         </widgetFiles>

packages/pluggableWidgets/web-view-native/typings/WebViewProps.d.ts

@@ -6,6 +6,18 @@
 import { CSSProperties } from "react";
 import { ActionValue, DynamicValue, EditableValue } from "mendix";
 
+export type RequestMethodEnum = "GET" | "POST";
+
+export interface HeaderListType {
+    headerName: DynamicValue<string>;
+    headerValue: DynamicValue<string>;
+}
+
+export interface HeaderListPreviewType {
+    headerName: string;
+    headerValue: string;
+}
+
 export interface WebViewProps<Style> {
     name: string;
     style: Style[];
@@ -15,6 +27,9 @@ export interface WebViewProps<Style> {
     onError?: ActionValue;
     onMessage?: ActionValue;
     onMessageInput?: EditableValue<string>;
+    requestMethod: RequestMethodEnum;
+    postBody?: DynamicValue<string>;
+    headerList: HeaderListType[];
     userAgent: string;
     openLinksExternally: boolean;
 }
@@ -35,6 +50,9 @@ export interface WebViewPreviewProps {
     onError: {} | null;
     onMessage: {} | null;
     onMessageInput: string;
+    requestMethod: RequestMethodEnum;
+    postBody: string;
+    headerList: HeaderListPreviewType[];
     userAgent: string;
     openLinksExternally: boolean;
 }