Merge pull request #1420 from dpc-sdp/feature/SD-604-unsupported-inpu…

…t-message [SD-604] - Changed the 'unsupported input message' in webforms to only show up in draft mode
dpc-sdp · Jan 13, 2025 · d546ab2 · d546ab2
2 parents cbc7f23 + a8232e0
commit d546ab2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 17 deletions.
diff --git a/examples/nuxt-app/layers/ripple-ui-forms-ext/__test__/forms-ext.feature b/examples/nuxt-app/layers/ripple-ui-forms-ext/__test__/forms-ext.feature
@@ -14,7 +14,7 @@ Feature: Forms, extended
     And a field labelled "Extended" should exist with the CSS class ".rpl-form__input--type-item"
 
   @mockserver
-  Scenario: Unsupported input
+  Scenario: Unsupported input (draft page)
     Given I visit the page "/webform"
     Then the landing page component "TideLandingPageWebForm" should exist
     And an input of type "signature" is not yet supported
diff --git a/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts
@@ -1,12 +1,20 @@
 import type { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
 import { TidePageApi } from '@dpc-sdp/ripple-tide-api'
-import type { TideWebform, ApiField } from '@dpc-sdp/ripple-tide-webform/types'
+import type {
+  TideWebform,
+  ApiField,
+  ApiPage
+} from '@dpc-sdp/ripple-tide-webform/types'
 import {
   getFormSchemaFromMapping,
   getCaptchaSettings
 } from '@dpc-sdp/ripple-tide-webform/mapping'
 
-const componentMapping = async (field: ApiField, tidePageApi: TidePageApi) => {
+const componentMapping = async (
+  field: ApiField,
+  page: ApiPage,
+  tidePageApi: TidePageApi
+) => {
   return {
     title: field.field_paragraph_title,
     formId: field.field_paragraph_webform.meta.drupal_internal__target_id,
@@ -24,22 +32,22 @@ const componentMapping = async (field: ApiField, tidePageApi: TidePageApi) => {
       'We are experiencing a server error. Please try again, otherwise contact us.',
     schema: await getFormSchemaFromMapping(
       field.field_paragraph_webform,
+      page,
       tidePageApi
     ),
     captchaConfig: getCaptchaSettings(field.field_paragraph_webform)
   }
 }
 export const webformMapping = async (
   field: ApiField,
-  // @ts-expect-error unused
-  page,
+  page: ApiPage,
   tidePageApi: TidePageApi
 ): Promise<TideDynamicPageComponent<TideWebform>> => {
   return {
     component: 'TideLandingPageWebForm',
     id: field.drupal_internal__id,
     title: field.field_paragraph_title,
-    props: await componentMapping(field, tidePageApi)
+    props: await componentMapping(field, page, tidePageApi)
   }
 }
 

diff --git a/packages/ripple-tide-webform/mapping/webforms-mapping.ts b/packages/ripple-tide-webform/mapping/webforms-mapping.ts
@@ -5,7 +5,7 @@ import {
   getValidationAndConditionals
 } from './../server/webform-utils'
 import { getAdvancedAddressMapping } from './webforms-address'
-import type { TideWebformElement, ApiWebForm } from './../types'
+import type { TideWebformElement, ApiWebForm, ApiPage } from './../types'
 
 interface CustomInputsConfig {
   [key: string]: {
@@ -19,12 +19,15 @@ const customInputs: CustomInputsConfig = appConfig.customInputs || {}
 
 export const getFormSchemaFromMapping = async (
   webform: ApiWebForm,
+  page: ApiPage,
   tidePageApi: TidePageApi
 ): Promise<FormKitSchemaNode[]> => {
   const elements: TideWebformElement[] = webform.elements || []
   const fields = []
   const formId = webform.drupal_internal__id
 
+  const isDraftMode = page.moderation_state === 'draft'
+
   for (const [fieldMachineName, fieldData] of Object.entries(elements)) {
     let mappedField
     const field: TideWebformElement = { ...fieldData, formId }
@@ -347,17 +350,24 @@ export const getFormSchemaFromMapping = async (
             fieldKey
           )
         } else {
-          mappedField = {
-            $el: 'div',
-            attrs: {
-              class: 'rpl-form__outer rpl-form__input--unsupported'
-            },
-            children: [`"${field['#type']}" is not yet supported`]
-          }
+          // For unsupported fields, render a message to users when previewing a draft page
+          mappedField = isDraftMode
+            ? {
+                $el: 'div',
+                attrs: {
+                  class: 'rpl-form__outer rpl-form__input--unsupported'
+                },
+                children: [
+                  `The "${field['#type']}" field is not supported (this message will only show in draft mode).`
+                ]
+              }
+            : null
         }
     }
 
-    fields.push(mappedField)
+    if (mappedField) {
+      fields.push(mappedField)
+    }
   }
 
   return fields

diff --git a/packages/ripple-tide-webform/server/api/tide/webform.ts b/packages/ripple-tide-webform/server/api/tide/webform.ts
@@ -29,8 +29,8 @@ export class TideWebformApi extends TideApiBase {
       mapping: {
         _src: (field: any) =>
           process.env.NODE_ENV === 'development' ? field : undefined,
-        schema: async (field: any, page, tidePageApi: TidePageApi) =>
-          await getFormSchemaFromMapping(field, tidePageApi),
+        schema: async (field: any, page: any, tidePageApi: TidePageApi) =>
+          await getFormSchemaFromMapping(field, page, tidePageApi),
         captchaConfig: (field: any) => getCaptchaSettings(field)
       },
       includes: []

diff --git a/packages/ripple-tide-webform/types.ts b/packages/ripple-tide-webform/types.ts
@@ -52,6 +52,10 @@ export interface ApiField {
   field_paragraph_webform: ApiWebForm
 }
 
+export interface ApiPage {
+  moderation_state?: string
+}
+
 export enum CaptchaType {
   RECAPTCHA_V2 = 'google_recaptcha_v2',
   RECAPTCHA_V3 = 'google_recaptcha_v3',