@openmrs/esm-form-builder-app 2.0.2-pre.536 → 2.0.2-pre.548

package/src/components/interactive-builder/interactive-builder.component.tsx

@@ -14,7 +14,6 @@ import {
 } from "@dnd-kit/core";
 
 import type { Question, RouteParams, Schema } from "../../types";
-import ActionButtons from "../action-buttons/action-buttons.component";
 import AddQuestionModal from "./add-question-modal.component";
 import DeleteSectionModal from "./delete-section-modal.component";
 import DeletePageModal from "./delete-page-modal.component";
@@ -42,7 +41,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
 }) => {
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
-      distance: 10, // Enable sort function when dragging 10px   💡 here!!!
+      distance: 10, // Enable sort function when dragging 10px 💡 here!!!
     },
   });
   const keyboardSensor = useSensor(KeyboardSensor);
@@ -301,8 +300,6 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
         />
       ) : null}
 
-      <ActionButtons schema={schema} t={t} />
-
       {showNewFormModal ? (
         <NewFormModal
           schema={schema}
@@ -422,7 +419,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
               </p>
             </div>
             <Button
-              kind="primary"
+              kind="ghost"
               renderIcon={Add}
               onClick={addPage}
               iconDescription={t("addPage", "Add Page")}
@@ -453,7 +450,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
           <Button
             onClick={launchNewFormModal}
             className={styles.startButton}
-            kind="primary"
+            kind="ghost"
           >
             {t("startBuilding", "Start building")}
           </Button>
@@ -559,7 +556,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
 
                               <Button
                                 className={styles.addQuestionButton}
-                                kind="primary"
+                                kind="ghost"
                                 renderIcon={Add}
                                 onClick={() => {
                                   addQuestion();
@@ -590,7 +587,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                 </div>
                 <Button
                   className={styles.addSectionButton}
-                  kind="primary"
+                  kind="ghost"
                   renderIcon={Add}
                   onClick={() => {
                     addSection();

package/src/components/interactive-builder/interactive-builder.scss

@@ -1,5 +1,5 @@
+@use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
 
 .container {
   :global(.cds--modal-content:focus) {
@@ -51,7 +51,7 @@
 
 .editableFieldsContainer {
   margin: 1rem 0;
-  border-bottom: 1px solid $ui-03;
+  border-bottom: 1px solid colors.$gray-20;
 }
 
 .addQuestionButton {
@@ -96,10 +96,6 @@
   }
 }
 
-.questionLabel {
-  @include type.type-style('body-01');
-}
-
 .addSectionButton {
-  margin: 1.5rem 1rem;
+  margin: 1rem 1rem;
 }

package/src/components/interactive-builder/question-modal.scss

@@ -1,5 +1,5 @@
+@use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
 
 .label {
   margin-bottom: 0.5rem;
@@ -18,20 +18,20 @@
 }
 
 .conceptList {
-  background: white;
+  background: colors.$white-0;
   max-height: 14rem;
   overflow-y: auto;
-  border: 1px solid $ui-03;
+  border: 1px solid colors.$gray-20;
   border-top: none;
 }
 
 .conceptList li:hover {
-  background-color: $ui-03;
+  background-color: colors.$gray-20;
 }
 
 .concept {
   padding: 0.75rem;
-  border-bottom: 1px solid $ui-03;
+  border-bottom: 1px solid colors.$gray-20;
 
   &:last-of-type {
     border-bottom: none;
@@ -40,7 +40,7 @@
 
 .emptyResults {
   @include type.type-style("body-compact-01");
-  color: $text-02;
+  color: colors.$gray-70;
   min-height: 1rem;
 }
 
@@ -49,15 +49,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: $ui-04;
+  background-color: colors.$gray-50;
 
   p {
-    color: $ui-02;
+    color: colors.$white-0;
   }
 }
 
 .oclLink {
-  color: $color-blue-10;
+  color: colors.$blue-10;
   display: flex;
   align-items: center;
 
@@ -70,13 +70,13 @@
   width: 100%;
 
   tr {
-    background-color: $ui-02;
-    border: 1px solid $ui-03;
+    background-color: colors.$white-0;
+    border: 1px solid colors.$gray-20;
   }
   
   td, th {
     padding: 0.25rem;
-    border: 1px solid $ui-03;
+    border: 1px solid colors.$gray-20;
     max-width: 10rem;
     text-align: left;
   }  
@@ -90,7 +90,7 @@
   }
 
   tbody > tr:nth-child(odd) {
-    background-color: $ui-01;
+    background-color: colors.$gray-10;
   }
 }
 

package/src/components/pagination/pagination.scss

@@ -1,6 +1,6 @@
+@use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
 
 .bodyShort01 {
   @include type.type-style("body-compact-01");
@@ -10,8 +10,8 @@
   @include type.type-style('body-compact-01');
   display: flex;
   justify-content: space-between;
-  color: $text-02;
-  background-color: $ui-02;
+  color: colors.$gray-70;
+  background-color: colors.$white-0;
   padding-left: 1rem;
   align-items: center;
 }
@@ -48,8 +48,8 @@
 
 .pagination {
   @include type.type-style('body-compact-01');
-  background-color: $ui-02;
-  color: $text-02;
+  background-color: colors.$white-0;
+  color: colors.$gray-70;
   display: flex;
 }
 

package/src/components/schema-editor/schema-editor.component.tsx

@@ -1,164 +1,26 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import React from "react";
 import AceEditor from "react-ace";
 import "ace-builds/webpack-resolver";
 import "ace-builds/src-noconflict/ext-language_tools";
-import { Button, InlineLoading } from "@carbon/react";
 import { useTranslation } from "react-i18next";
-import { OHRIFormSchema } from "@openmrs/openmrs-form-engine-lib";
-
-import { RouteParams, Schema } from "../../types";
 import styles from "./schema-editor.scss";
 
 type SchemaEditorProps = {
   isLoading: boolean;
-  onSchemaChange: (schema: Schema) => void;
-  schema: Schema;
+  invalidJsonErrorMessage: string;
+  onSchemaChange: (stringifiedSchema: string) => void;
+  stringifiedSchema: string;
 };
 
 const SchemaEditor: React.FC<SchemaEditorProps> = ({
-  isLoading,
+  invalidJsonErrorMessage,
   onSchemaChange,
-  schema,
+  stringifiedSchema,
 }) => {
   const { t } = useTranslation();
-  const { formUuid } = useParams<RouteParams>();
-  const isNewSchema = !formUuid;
-
-  const [stringifiedSchema, setStringifiedSchema] = useState(
-    schema ? JSON.stringify(schema, null, 2) : ""
-  );
-  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState("");
-  const [isRendering, setIsRendering] = useState(false);
-
-  const resetErrorMessage = useCallback(() => {
-    setInvalidJsonErrorMessage("");
-  }, []);
-
-  const handleSchemaChange = useCallback((updatedSchema: string) => {
-    setStringifiedSchema(updatedSchema);
-  }, []);
-
-  const inputDummySchema = useCallback(() => {
-    const dummySchema: OHRIFormSchema = {
-      encounterType: "",
-      name: "Sample Form",
-      processor: "EncounterFormProcessor",
-      referencedForms: [],
-      uuid: "",
-      version: "1.0",
-      pages: [
-        {
-          label: "First Page",
-          sections: [
-            {
-              label: "A Section",
-              isExpanded: "true",
-              questions: [
-                {
-                  label: "A Question of type obs that renders a text input",
-                  type: "obs",
-                  questionOptions: {
-                    rendering: "text",
-                    concept: "a-system-defined-concept-uuid",
-                  },
-                  id: "sampleQuestion",
-                },
-              ],
-            },
-            {
-              label: "Another Section",
-              isExpanded: "true",
-              questions: [
-                {
-                  label:
-                    "Another Question of type obs whose answers get rendered as radio inputs",
-                  type: "obs",
-                  questionOptions: {
-                    rendering: "radio",
-                    concept: "system-defined-concept-uuid",
-                    answers: [
-                      {
-                        concept: "another-system-defined-concept-uuid",
-                        label: "Choice 1",
-                        conceptMappings: [],
-                      },
-                      {
-                        concept: "yet-another-system-defined-concept-uuid",
-                        label: "Choice 2",
-                        conceptMappings: [],
-                      },
-                      {
-                        concept: "yet-one-more-system-defined-concept-uuid",
-                        label: "Choice 3",
-                        conceptMappings: [],
-                      },
-                    ],
-                  },
-                  id: "anotherSampleQuestion",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-
-    setStringifiedSchema(JSON.stringify(dummySchema, null, 2));
-    onSchemaChange({ ...dummySchema });
-  }, [onSchemaChange]);
-
-  const renderSchemaChanges = useCallback(() => {
-    setIsRendering(true);
-    resetErrorMessage();
-
-    try {
-      const parsedJson: Schema = JSON.parse(stringifiedSchema);
-      onSchemaChange(parsedJson);
-      setStringifiedSchema(JSON.stringify(parsedJson, null, 2));
-    } catch (error) {
-      setInvalidJsonErrorMessage(error.message);
-    }
-    setIsRendering(false);
-  }, [stringifiedSchema, onSchemaChange, resetErrorMessage]);
-
-  useEffect(() => {
-    setStringifiedSchema(JSON.stringify(schema, null, 2));
-  }, [schema]);
 
   return (
     <>
-      <div className={styles.actionButtons}>
-        {isLoading ? (
-          <InlineLoading
-            description={t("loadingSchema", "Loading schema") + "..."}
-          />
-        ) : null}
-
-        {isNewSchema && !stringifiedSchema ? (
-          <Button kind="secondary" onClick={inputDummySchema}>
-            {t("inputDummySchema", "Input dummy schema")}
-          </Button>
-        ) : null}
-
-        {schema ? (
-          <Button
-            disabled={isRendering}
-            kind="primary"
-            onClick={renderSchemaChanges}
-          >
-            {isRendering ? (
-              <InlineLoading
-                className={styles.spinner}
-                description={t("render", "Render" + "...")}
-              />
-            ) : (
-              <span>{t("renderChanges", "Render changes")}</span>
-            )}
-          </Button>
-        ) : null}
-      </div>
-
       {invalidJsonErrorMessage ? (
         <div className={styles.errorContainer}>
           <p className={styles.heading}>
@@ -173,7 +35,7 @@ const SchemaEditor: React.FC<SchemaEditorProps> = ({
         mode="json"
         theme="textmate"
         name="schemaEditor"
-        onChange={handleSchemaChange}
+        onChange={onSchemaChange}
         fontSize={15}
         showPrintMargin={false}
         showGutter={true}