feat(function-appaction-example): render parametersSchema via RJSF [EXT-6767] (#10125)

jjolton-contentful · web-flow · commit fa679da6e8f9 · 2025-09-22T10:42:28.000-06:00
diff --git a/examples/function-appaction/package.json b/examples/function-appaction/package.json
@@ -8,8 +8,10 @@
     "@contentful/f36-tokens": "4.2.0",
     "@contentful/react-apps-toolkit": "1.2.16",
     "@emotion/css": "^11.13.5",
+    "@rjsf/core": "^5.24.13",
+    "@rjsf/validator-ajv8": "^5.24.13",
     "@vitejs/plugin-react": "^4.3.4",
-    "contentful-management": "^11.57.2",
+    "contentful-management": "^11.57.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "vite": "^6.2.0",
diff --git a/examples/function-appaction/src/components/ActionFailure.tsx b/examples/function-appaction/src/components/ActionFailure.tsx
@@ -15,12 +15,10 @@ interface Props {
 const ActionFailure = (props: Props) => {
   const { actionResult, accordionState, handleCollapse, handleExpand } = props;
   const { error, timestamp, actionId } = actionResult;
-  const details: string | undefined = (actionResult.data as any)?.error?.details as
-    | string
-    | undefined;
-  const data: any = actionResult.data;
-  const createdAt = data?.sys?.createdAt;
-  const updatedAt = data?.sys?.updatedAt;
+  const details: string | undefined = actionResult.call?.error?.details as string | undefined;
+  const call = actionResult.call;
+  const createdAt = call?.sys?.createdAt;
+  const updatedAt = call?.sys?.updatedAt;
   const duration = computeDuration(createdAt, updatedAt);
   const { message, statusCode } = useParseError(error);
 
diff --git a/examples/function-appaction/src/components/ActionResult.tsx b/examples/function-appaction/src/components/ActionResult.tsx
@@ -12,7 +12,6 @@ interface Props {
 
 const ActionResult = (props: Props) => {
   const [accordionState, setAccordionState] = useState<any>({});
-  const sdk = useSDK<PageAppSDK>();
 
   const { actionResult } = props;
   const { success } = actionResult;
diff --git a/examples/function-appaction/src/components/ActionSuccess.tsx b/examples/function-appaction/src/components/ActionSuccess.tsx
@@ -15,18 +15,17 @@ interface Props {
 
 const ActionSuccess = (props: Props) => {
   const { actionResult, accordionState, handleCollapse, handleExpand, handleCopy } = props;
-  const { data, timestamp, actionId } = actionResult;
-  const statusCode = data?.response?.statusCode ?? (data as any)?.status;
+  const { call, response, timestamp, actionId } = actionResult;
+  const statusCode = response?.response?.statusCode;
 
   const responseContentType =
-    getHeaderValue((data as any)?.response?.headers as any, 'content-type') ||
-    getHeaderValue((data as any)?.response?.headers as any, 'Content-Type');
-  const responseSource = (data as any)?.response?.body ?? (data as any)?.result;
+    getHeaderValue(response?.response?.headers, 'content-type') ||
+    getHeaderValue(response?.response?.headers, 'Content-Type');
+  const responseSource = response?.response?.body ?? call?.result;
   const responseBody = formatBodyForDisplay(responseSource, responseContentType);
 
-  // Prefer structured call timestamps (sys.createdAt -> sys.updatedAt) only
-  const createdAt = (data as any)?.sys?.createdAt;
-  const updatedAt = (data as any)?.sys?.updatedAt;
+  const createdAt = call?.sys?.createdAt;
+  const updatedAt = call?.sys?.updatedAt;
   const duration = computeDuration(createdAt, updatedAt);
 
   return (
@@ -35,7 +34,9 @@ const ActionSuccess = (props: Props) => {
         title={
           <Text>
             <Badge variant="positive">Success</Badge>
-            <Text className={styles.accordionTitleMargin}>[{statusCode}]</Text> - {timestamp}
+            {statusCode && (
+              <Text className={styles.accordionTitleMargin}>[{statusCode}]</Text>
+            )} - {timestamp}
             {typeof duration === 'number' && (
               <Text className={styles.accordionTitleMargin}>
                 Duration: <strong>{duration}</strong> ms
@@ -69,10 +70,9 @@ const ActionSuccess = (props: Props) => {
                 </Flex>
               </Text>
               <Text>
-                {(data as any)?.sys?.updatedAt && (
+                {call?.sys?.updatedAt && (
                   <>
-                    <strong>Completed at:</strong>{' '}
-                    {new Date((data as any).sys.updatedAt).toLocaleString()}
+                    <strong>Completed at:</strong> {new Date(call.sys.updatedAt).toLocaleString()}
                   </>
                 )}
               </Text>
diff --git a/examples/function-appaction/src/components/AppActionCard.tsx b/examples/function-appaction/src/components/AppActionCard.tsx
@@ -6,17 +6,21 @@ import {
   CopyButton,
   Flex,
   FormControl,
+  SectionHeading,
   Stack,
   Subheading,
   Text,
   TextInput,
 } from '@contentful/f36-components';
 import { useSDK } from '@contentful/react-apps-toolkit';
-import { AppActionProps } from 'contentful-management';
+import { AppActionCallRawResponseProps, AppActionProps } from 'contentful-management';
 import { useState } from 'react';
-import { ActionResultData, ActionResultType } from '../locations/Page';
+import { ActionResultType } from '../locations/Page';
 import ActionResult from './ActionResult';
 import { styles } from './AppActionCard.styles';
+import Forma36Form from './rjsf/Forma36Form';
+import validator from '@rjsf/validator-ajv8';
+import type { IChangeEvent } from '@rjsf/core';
 
 interface Props {
   action: AppActionProps;
@@ -26,50 +30,66 @@ const AppActionCard = (props: Props) => {
   const [actionResults, setActionResults] = useState<ActionResultType[]>([]);
   const [loadingAction, setLoadingAction] = useState<string | null>(null);
   const [actionParameters, setActionParameters] = useState<any>({});
+  const [schemaErrorsByAction, setSchemaErrorsByAction] = useState<Record<string, number>>({});
 
   const sdk = useSDK<PageAppSDK>();
   const { action } = props;
 
   const callAction = async (action: AppActionProps) => {
     setLoadingAction(action.sys.id);
+    let response: AppActionCallRawResponseProps | undefined;
     try {
-      const result = (await sdk.cma.appActionCall.createWithResult(
+      const result = await sdk.cma.appActionCall.createWithResult(
         {
           appDefinitionId: sdk.ids.app || '',
           appActionId: action.sys.id,
         },
         {
           parameters: actionParameters[action.sys.id] || {},
         }
-      )) as unknown as ActionResultData;
+      );
 
       const timestamp = new Date().toLocaleString();
-      const call: any = result as any;
-      const callId = (call as any)?.sys?.id;
+      const call = result;
+      const callId = call?.sys?.id;
       const base = { timestamp, actionId: action.sys.id, callId } as const;
+      if (call.sys.appActionCallResponse) {
+        response = await sdk.cma.appActionCall.getResponse({
+          appDefinitionId: sdk.ids.app || '',
+          appActionId: action.sys.id,
+          callId,
+        });
+      }
 
       if (call?.status === 'succeeded') {
-        setActionResults((prev) => [{ success: true, data: call, ...base }, ...prev]);
+        setActionResults((prev) => [{ success: true, call, ...base }, ...prev]);
       } else if (call?.status === 'failed') {
         setActionResults((prev) => [
           {
             success: false,
-            data: call,
+            call,
+            response,
             error: call?.error || new Error('App action failed'),
             ...base,
           },
           ...prev,
         ]);
       } else {
         setActionResults((prev) => [
-          { success: false, data: call, error: new Error('App action still processing'), ...base },
+          {
+            success: false,
+            call,
+            response,
+            error: new Error('App action still processing'),
+            ...base,
+          },
           ...prev,
         ]);
       }
     } catch (error) {
       const timestamp = new Date().toLocaleString();
       setActionResults((prev) => [
-        { success: false, error, timestamp, actionId: action.sys.id },
+        { success: false, error, timestamp, actionId: action.sys.id, response },
         ...prev,
       ]);
     } finally {
@@ -136,12 +156,31 @@ const AppActionCard = (props: Props) => {
   };
 
   const isButtonDisabled = () => {
-    const parameters = (action as any).parameters as any[] | undefined;
-    const requiredParameters = parameters?.filter((param: any) => param.required) ?? [];
+    const actionId = action.sys.id;
+    const formData = actionParameters[actionId] || {};
 
-    const hasEmptyRequiredParameters = requiredParameters.find((param: any) => {
-      const paramValue = actionParameters[action.sys.id]?.[param.id];
-      return !paramValue;
+    const hasSchema = action.parametersSchema;
+    if (hasSchema) {
+      const schema = action.parametersSchema;
+      const requiredKeys: string[] = Array.isArray(schema?.required) ? schema.required : [];
+      const hasEmptyRequired = requiredKeys.some((key) => {
+        const value = formData?.[key];
+        if (value === undefined || value === null) return true;
+        if (typeof value === 'string' && value.trim() === '') return true;
+        if (typeof value === 'number' && Number.isNaN(value)) return true;
+        return false;
+      });
+      const hasErrors = Boolean(schemaErrorsByAction[actionId]);
+      return hasErrors || hasEmptyRequired;
+    }
+
+    const customAction = action as unknown as {
+      parameters?: Array<{ id: string; required?: boolean }>;
+    };
+    const requiredParameters = customAction.parameters?.filter((param) => param.required) || [];
+    const hasEmptyRequiredParameters = requiredParameters.some((param) => {
+      const paramValue = formData?.[param.id];
+      return paramValue === undefined || paramValue === null || paramValue === '';
     });
 
     return Boolean(hasEmptyRequiredParameters);
@@ -175,8 +214,34 @@ const AppActionCard = (props: Props) => {
           </Button>
         </Box>
       </Flex>
-      {Array.isArray((action as any).parameters) &&
-      (action as { parameters: any[] }).parameters.length ? (
+      {action.parametersSchema ? (
+        <Box marginTop="spacingS">
+          <Box marginBottom="spacingS">
+            <SectionHeading as="h4">Parameters</SectionHeading>
+          </Box>
+          <Forma36Form
+            schema={action.parametersSchema}
+            formData={actionParameters[action.sys.id] || {}}
+            validator={validator}
+            liveValidate
+            showErrorList={false}
+            uiSchema={{ 'ui:submitButtonOptions': { norender: true } }}
+            onChange={(e: IChangeEvent<Record<string, unknown>>) => {
+              setActionParameters({
+                ...actionParameters,
+                [action.sys.id]: e.formData,
+              });
+              const errorCount = Array.isArray(e.errors) ? e.errors.length : 0;
+              setSchemaErrorsByAction({
+                ...schemaErrorsByAction,
+                [action.sys.id]: errorCount,
+              });
+            }}>
+            <></>
+          </Forma36Form>
+        </Box>
+      ) : Array.isArray((action as any).parameters) &&
+        (action as { parameters: any[] }).parameters.length ? (
         <Box marginTop="spacingS">
           <Box marginBottom="spacingM">
             <Subheading as="h4">Parameters</Subheading>
diff --git a/examples/function-appaction/src/components/RawResponseViewer.tsx b/examples/function-appaction/src/components/RawResponseViewer.tsx
@@ -34,22 +34,18 @@ const RawResponseViewer = ({
     setLoading(true);
     setError(undefined);
     try {
-      const response = (await sdk.cma.appActionCall.getResponse({
+      const response = await sdk.cma.appActionCall.getResponse({
         appDefinitionId: sdk.ids.app || '',
         appActionId: actionId,
         callId,
-      })) as any;
+      });
       setRaw(response);
       const contentType =
-        getHeaderValue(response?.response?.headers as any, 'content-type') ||
-        getHeaderValue(response?.response?.headers as any, 'Content-Type') ||
-        getHeaderValue(response?.response?.headers as any, 'contentType');
+        getHeaderValue(response?.response?.headers, 'content-type') ||
+        getHeaderValue(response?.response?.headers, 'Content-Type') ||
+        getHeaderValue(response?.response?.headers, 'contentType');
       const formatted = formatBodyForDisplay(response?.response?.body, contentType);
-      const duration = computeDuration(
-        response?.sys?.createdAt ?? response?.requestAt,
-        response?.sys?.updatedAt ?? response?.responseAt
-      );
-      onLoaded?.({ contentType, body: formatted, duration });
+      onLoaded?.({ contentType, body: formatted });
     } catch (e: any) {
       setError(e?.message || 'Failed to fetch raw response');
     } finally {
@@ -58,9 +54,9 @@ const RawResponseViewer = ({
   };
 
   const contentType =
-    getHeaderValue(raw?.response?.headers as any, 'content-type') ||
-    getHeaderValue(raw?.response?.headers as any, 'Content-Type') ||
-    getHeaderValue(raw?.response?.headers as any, 'contentType');
+    getHeaderValue(raw?.response?.headers, 'content-type') ||
+    getHeaderValue(raw?.response?.headers, 'Content-Type') ||
+    getHeaderValue(raw?.response?.headers, 'contentType');
 
   return (
     <>
diff --git a/examples/function-appaction/src/components/rjsf/Forma36Form.tsx b/examples/function-appaction/src/components/rjsf/Forma36Form.tsx
diff --git a/examples/function-appaction/src/locations/Page.tsx b/examples/function-appaction/src/locations/Page.tsx
