Allowed users to change rendering type when editing a question

Author: Bharath-K-Shetty

src/components/interactive-builder/modals/question/question-utils.ts

@@ -1,19 +1,22 @@
-import type { FormField } from '@openmrs/esm-form-engine-lib';
-import { allowedPropertiesMapping, allowedQuestionOptionsMapping } from '@constants';
+import type { FormField, RenderType } from '@openmrs/esm-form-engine-lib';
+import { allowedPropertiesMapping, allowedQuestionOptionsMapping, allowedRenderingOptionsMapping } from '@constants';
 
 /**
  * Cleans the given questionOptions object by retaining only allowed keys for the new type.
+ * It combines allowed keys from both the question type and the rendering type.
  */
-function cleanQuestionOptionsForType(options: any, newType: string): any {
-  const allowedOpts = allowedQuestionOptionsMapping[newType] || [];
-  const cleanedOpts = Object.fromEntries(Object.entries(options).filter(([optKey]) => allowedOpts.includes(optKey)));
+function cleanQuestionOptionsForType(options: any, questionType: string, rendering: RenderType): any {
+  const allowedByType = allowedQuestionOptionsMapping[questionType] || [];
+  const allowedByRendering = allowedRenderingOptionsMapping[rendering] || [];
+  const allowedOpts = new Set(['rendering', ...allowedByType, ...allowedByRendering]);
+  const cleanedOpts = Object.fromEntries(Object.entries(options).filter(([key]) => allowedOpts.has(key)));
   cleanedOpts.rendering = options.rendering;
   return cleanedOpts;
 }
 
 /**
  * Cleans the given form field by retaining only allowed top‑level properties for the new type.
- * Also cleans nested questionOptions using the nested mapping.
+ * Also cleans nested questionOptions using the combined mappings for question type and rendering type.
  */
 export function cleanFormFieldForType(field: FormField, newType: string): FormField {
   const allowedKeys = allowedPropertiesMapping[newType] || [];
@@ -27,9 +30,12 @@ export function cleanFormFieldForType(field: FormField, newType: string): FormFi
 
   // If questionOptions is allowed and exists, clean it using the nested mapping.
   if (cleaned.questionOptions && typeof cleaned.questionOptions === 'object') {
-    cleaned.questionOptions = cleanQuestionOptionsForType(cleaned.questionOptions, newType);
+    cleaned.questionOptions = cleanQuestionOptionsForType(
+      cleaned.questionOptions,
+      newType,
+      cleaned.questionOptions.rendering as RenderType,
+    );
   }
-
   cleaned.type = newType;
   return cleaned as FormField;
 }

src/constants.ts

@@ -90,14 +90,45 @@ export const allowedPropertiesMapping: Record<string, string[]> = Object.fromEnt
    Mapping of allowed keys for the nested questionOptions object per question type.
  */
 export const allowedQuestionOptionsMapping: Record<string, string[]> = {
-  control: ['rendering', 'minLength', 'maxLength'],
+  control: ['rendering'],
   encounterDatetime: ['rendering'],
   encounterLocation: ['rendering'],
   encounterProvider: ['rendering'],
-  encounterRole: ['rendering', 'isSearchable'],
+  encounterRole: ['rendering'],
   obs: ['rendering', 'concept', 'answers'],
   obsGroup: ['rendering', 'concept'],
   patientIdentifier: ['rendering', 'identifierType', 'minLength', 'maxLength'],
   testOrder: ['rendering'],
   programState: ['rendering', 'programUuid', 'workflowUuid', 'answers'],
 };
+
+/**
+   Mapping of allowed keys for questionOptions based on the rendering type.
+ */
+export const allowedRenderingOptionsMapping: Record<RenderType, string[]> = {
+  checkbox: ['rendering', 'concept', 'answers'],
+  'checkbox-searchable': ['rendering', 'concept'],
+  'content-switcher': ['rendering', 'concept'],
+  date: ['rendering'],
+  datetime: ['rendering'],
+  drug: ['rendering', 'concept'],
+  'encounter-location': ['rendering', 'concept'],
+  'encounter-provider': ['rendering', 'concept'],
+  'encounter-role': ['rendering', 'concept', 'isSearchable'],
+  'fixed-value': ['rendering', 'concept'],
+  file: ['rendering', 'concept'],
+  group: ['rendering', 'concept'],
+  number: ['rendering', 'concept', 'min', 'max'],
+  problem: ['rendering', 'concept'],
+  radio: ['rendering', 'concept', 'answers'],
+  repeating: ['rendering', 'concept'],
+  select: ['rendering', 'concept', 'answers'],
+  text: ['rendering', 'concept', 'minLength', 'maxLength'],
+  textarea: ['rendering', 'concept', 'rows'],
+  toggle: ['rendering', 'concept', 'toggleOptions'],
+  'ui-select-extended': ['rendering', 'concept', 'isSearchable'],
+  'workspace-launcher': ['rendering', 'concept'],
+  markdown: ['rendering', 'concept'],
+  'extension-widget': ['rendering', 'concept'],
+  'select-concept-answers': ['rendering', 'concept', 'answers'],
+};