fix: monaco editor type / null checks on uischema, generated prop on …

…designer definition

packages/core/src/model/json-definitions/JsonDataModels.ts

@@ -68,6 +68,7 @@ type QuickFormQuestionDefinition = {
      * The ordering of the question
      */
     order?: number
+
 }
 
 /**

packages/core/src/services/defaults/DefaultModelTransformer.ts

@@ -173,8 +173,8 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
     });
 
     return {
-        text: uiSchema["ui:label"] === false ? '' : schema?.title ?? submit?.text ?? "Submit QuickForm",
-        paragraph: uiSchema["ui:label"] === false ? '' : schema?.description,
+        text: uiSchema?.["ui:label"] === false ? '' : schema?.title ?? submit?.text ?? "Submit QuickForm",
+        paragraph: uiSchema?.["ui:label"] === false ? '' : schema?.description,
         buttonText: submit?.buttonText ?? "Submit",
         submitFields: submitFieldsArray,
         submitUrl: submit.submitUrl,

packages/designer/package.json

@@ -2,7 +2,6 @@
   "version": "1.0.0-vnext.13",
   "name": "@eavfw/quickform-designer",
   "dependencies": {
-    "monaco-editor": "^0.50.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -20,6 +19,7 @@
     "@rjsf/fluentui-rc": "5.18.4",
     "@rjsf/utils": "5.18.4",
     "@rjsf/validator-ajv8": "5.18.4",
+    "monaco-editor": "^0.50.0",
     "pako": "^2.0.4"
   },
   "devDependencies": {

packages/designer/src/Components/Views/QuickFormQuestionsView.tsx

@@ -2,7 +2,7 @@
 import { removeNonAlphanumeric } from "@eavfw/utils";
 import Form from "@rjsf/fluentui-rc";
 import validator from '@rjsf/validator-ajv8';
-import { Dropdown, DropdownProps, Option, mergeClasses, Field, Input } from '@fluentui/react-components';
+import { Dropdown, DropdownProps, Option, mergeClasses, Field, Input, MessageBar, MessageBarBody, MessageBarTitle, makeStyles, tokens, shorthands } from '@fluentui/react-components';
 import { useViewStyles } from "../Styles/useViewStyles.styles";
 import { QuickFormDesignerDefinition } from "../../Types/QuickFormDefinition";
 import { FieldProps, ariaDescribedByIds } from "@rjsf/utils";
@@ -17,13 +17,20 @@ export const QuickformDesignerFields = {} as { [key: string]: React.FC<FieldProp
 export function registerInputControlDesignerField<T = any>(field: string, component: React.FC<FieldProps<T>>) {
     QuickformDesignerFields[field] = component as React.FC<FieldProps>;
 }
+
+const useQuickFormQuestionsViewStyles = makeStyles({
+    messageBar: {
+        ...shorthands.margin("0.285714rem"),
+    }
+});
 export const QuickFormQuestionsView: React.FC<{
     dispatch: React.Dispatch<React.SetStateAction<QuickFormDesignerDefinition>>,
     currentQuestion?: string,
     questions: QuickFormDesignerDefinition["questions"]
 }> = ({ currentQuestion, questions, dispatch }) => {
 
     const styles = useViewStyles();
+    const styles2 = useQuickFormQuestionsViewStyles();
     const schemas = resolveInputComponentSchemas();
 
     console.log("QuickFormQuestionsView", [currentQuestion, questions, currentQuestion && questions[currentQuestion]]);
@@ -47,9 +54,16 @@ export const QuickFormQuestionsView: React.FC<{
             uiSchema["text"] = { "ui:widget": "hidden" };
         }
 
-        return (
-            <div className={mergeClasses(styles.section, styles.sectionSlim)}>
+        return (<>
+            {questions[currentQuestion].generated && <MessageBar className={styles2.messageBar} intent={"warning"}>
+                <MessageBarBody>
+                    <MessageBarTitle>This question is generated</MessageBarTitle>
 
+
+                </MessageBarBody>
+            </MessageBar>}
+            <div className={mergeClasses(styles.section, styles.sectionSlim)}>
+
                 <Field
                     label="Question?" hint="The question text"
                     orientation="horizontal"
@@ -112,12 +126,13 @@ export const QuickFormQuestionsView: React.FC<{
                 </Field>
 
                 {question.inputType &&
-                    <Form tagName="div" key={currentQuestion + question.inputType}
+                    <Form tagName="div" key={currentQuestion + question.inputType} 
                         templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
                         fields={QuickformDesignerFields}
                         validator={validator}
                         {...schemas[question.inputType]}
                         formData={questions[currentQuestion]}
+                        formContext={{ generated: questions[currentQuestion].generated }}
                         onChange={(a, b) => {
                             console.log("change", [a, b]);
 
@@ -132,6 +147,7 @@ export const QuickFormQuestionsView: React.FC<{
                     </Form>
                 }
             </div>
+        </>
         )
 
 

packages/designer/src/Components/Views/QuickFormSourceView.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
-import Editor, { OnMount, useMonaco } from "@monaco-editor/react";
-import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import Editor, { OnMount, useMonaco, } from "@monaco-editor/react";
+import type { editor } from 'monaco-editor';
 import { sourceViewSchema } from "../../Utils/SourceViewSchema";
 
 export const QuickFormSourceView = () => {

packages/designer/src/Types/QuickFormDefinition.ts

@@ -9,4 +9,12 @@ export type QuickFormDesignerDefinition = {
         activeQuestion?: string;
     },
     designerLocale?: Locale,
+    questions: {
+        [key: string]: {
+            /**
+             * If this question has been generated by some tool/framework and be used in designer if ediable.
+             */
+            generated?: boolean
+        }
+    }
 } & QuickFormDefinition;