@openmrs/esm-form-builder-app 1.0.1-pre.126

package/src/components/error-state/error-state.component.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Layer, Tile } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { useLayoutType } from "@openmrs/esm-framework";
+import styles from "./error-state.scss";
+
+interface ErrorStateProps {
+  error: Error;
+}
+
+const ErrorState: React.FC<ErrorStateProps> = ({ error }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+
+  return (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div
+          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
+        >
+          <h4>{t("forms", "Forms")}</h4>
+        </div>
+        <p className={styles.errorMessage}>
+          {t("error", "Error")}: {error?.message}
+        </p>
+        <p className={styles.errorCopy}>
+          {t(
+            "errorCopy",
+            "Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above."
+          )}
+        </p>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default ErrorState;

package/src/components/error-state/error-state.scss

@@ -0,0 +1,49 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.errorMessage {
+  @include type.type-style("heading-compact-02");
+  
+  margin-top: 2.25rem;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.errorCopy {
+  margin-bottom: spacing.$spacing-03;
+  @include type.type-style("body-01");
+  color: $text-02;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}

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

@@ -0,0 +1,297 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  Column,
+  ComposedModal,
+  InlineLoading,
+  InlineNotification,
+  Grid,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Tabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Button,
+} from "@carbon/react";
+import { useParams } from "react-router-dom";
+import { useSWRConfig } from "swr";
+import { useTranslation } from "react-i18next";
+import SaveForm from "../modals/save-form.component";
+import {
+  showToast,
+  ExtensionSlot,
+  showNotification,
+} from "@openmrs/esm-framework";
+import { Schema, RouteParams } from "../../types";
+import { useClobdata } from "../../hooks/useClobdata";
+import { useForm } from "../../hooks/useForm";
+import { publishForm, unpublishForm } from "../../forms.resource";
+import FormRenderer from "../form-renderer/form-renderer.component";
+import SchemaEditor from "../schema-editor/schema-editor.component";
+import styles from "./form-editor.scss";
+import InteractiveBuilder from "../interactive-builder/interactive-builder.component";
+
+const Error = ({ error, title }) => {
+  return (
+    <InlineNotification
+      style={{
+        minWidth: "100%",
+        margin: "0rem",
+        padding: "0rem",
+      }}
+      kind={"error"}
+      lowContrast
+      subtitle={error?.message}
+      title={title}
+    />
+  );
+};
+
+const FormEditor: React.FC = () => {
+  const { t } = useTranslation();
+  const { formUuid } = useParams<RouteParams>();
+  const [schema, setSchema] = useState<Schema>(undefined);
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [isUnpublishing, setIsUnpublishing] = useState(false);
+  const [showUnpublishModal, setShowUnpublishModal] = useState(false);
+  const { form, formError, isLoadingForm } = useForm(formUuid);
+  const { clobdata, clobdataError, isLoadingClobdata } = useClobdata(form);
+  const { cache, mutate }: { cache: any; mutate: Function } = useSWRConfig();
+
+  useEffect(() => {
+    if (clobdata) {
+      setSchema(clobdata);
+    }
+  }, [clobdata, setSchema]);
+
+  const updateSchema = useCallback((updatedSchema) => {
+    setSchema(updatedSchema);
+  }, []);
+
+  const revalidate = () => {
+    const apiUrlPattern = new RegExp("\\/ws\\/rest\\/v1\\/form");
+
+    // Find matching keys from SWR's cache and broadcast a revalidation message to their pre-bound SWR hooks
+    Array.from(cache.keys())
+      .filter((url: string) => apiUrlPattern.test(url))
+      .forEach((url: string) => mutate(url));
+  };
+
+  const launchUnpublishModal = () => {
+    setShowUnpublishModal(true);
+  };
+
+  async function handlePublish() {
+    setIsPublishing(true);
+    try {
+      await publishForm(form.uuid);
+
+      showToast({
+        title: t("formPublished", "Form published"),
+        kind: "success",
+        critical: true,
+        description:
+          `${form.name} ` +
+          t("formPublishedSuccessfully", "form was published successfully"),
+      });
+
+      revalidate();
+    } catch (error) {
+      showNotification({
+        title: t("errorPublishingForm", "Error publishing form"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+    setIsPublishing(false);
+  }
+
+  async function handleUnpublish() {
+    setIsUnpublishing(true);
+    try {
+      await unpublishForm(form.uuid);
+
+      showToast({
+        title: t("formUnpublished", "Form unpublished"),
+        kind: "success",
+        critical: true,
+        description:
+          `${form.name} ` +
+          t("formUnpublishedSuccessfully", "form was unpublished successfully"),
+      });
+
+      revalidate();
+    } catch (error) {
+      showNotification({
+        title: t("errorUnpublishingForm", "Error unpublishing form"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+    setIsUnpublishing(false);
+    setShowUnpublishModal(false);
+  }
+
+  useEffect(() => {
+    if (!isLoadingClobdata) {
+      setSchema(clobdata);
+    }
+  }, [clobdata, isLoadingClobdata]);
+
+  return (
+    <>
+      <div className={styles.breadcrumbsContainer}>
+        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+      </div>
+      <div className={styles.container}>
+        <Grid className={styles.grid}>
+          <Column lg={8} md={8} className={styles.column}>
+            <Tabs>
+              <TabList>
+                <Tab>{t("schemaEditor", "Schema Editor")}</Tab>
+                <Tab>{t("interactiveBuilder", "Interactive Builder")}</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <>
+                    {formError ? (
+                      <Error
+                        error={formError}
+                        title={t("formError", "Error loading form metadata")}
+                      />
+                    ) : null}
+                    {clobdataError ? (
+                      <Error
+                        error={clobdataError}
+                        title={t("schemaLoadError", "Error loading schema")}
+                      />
+                    ) : null}
+                    <SchemaEditor
+                      schema={schema}
+                      onSchemaChange={updateSchema}
+                      isLoading={
+                        formUuid && (isLoadingClobdata || isLoadingForm)
+                      }
+                    />
+                  </>
+                </TabPanel>
+                <TabPanel>
+                  <InteractiveBuilder
+                    schema={schema}
+                    onSchemaChange={updateSchema}
+                    isLoading={formUuid && (isLoadingClobdata || isLoadingForm)}
+                  />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Column>
+          <Column lg={8} md={8} className={styles.column}>
+            <Tabs>
+              <TabList>
+                <Tab>{t("preview", "Preview")}</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <>
+                    <div className={styles.actionButtons}>
+                      <SaveForm form={form} schema={schema} />
+
+                      <>
+                        {form && !form.published ? (
+                          <Button
+                            kind="secondary"
+                            onClick={handlePublish}
+                            disabled={isPublishing}
+                          >
+                            {isPublishing && !form?.published ? (
+                              <InlineLoading
+                                className={styles.spinner}
+                                description={
+                                  t("publishing", "Publishing") + "..."
+                                }
+                              />
+                            ) : (
+                              <span>{t("publishForm", "Publish form")}</span>
+                            )}
+                          </Button>
+                        ) : null}
+                        {form && form.published ? (
+                          <Button
+                            kind="danger"
+                            onClick={launchUnpublishModal}
+                            disabled={isUnpublishing}
+                          >
+                            {t("unpublishForm", "Unpublish form")}
+                          </Button>
+                        ) : null}
+                        {showUnpublishModal ? (
+                          <ComposedModal
+                            open={true}
+                            onClose={() => setShowUnpublishModal(false)}
+                          >
+                            <ModalHeader
+                              title={t(
+                                "unpublishConfirmation",
+                                "Are you sure you want to unpublish this form?"
+                              )}
+                            ></ModalHeader>
+                            <ModalBody>
+                              <p>
+                                {t(
+                                  "unpublishExplainerText",
+                                  "Unpublishing a form means you can no longer access it from your frontend. Unpublishing forms does not delete their associated schemas, it only affects whether or not you can access them in your frontend."
+                                )}
+                              </p>
+                            </ModalBody>
+                            <ModalFooter>
+                              <Button
+                                kind="secondary"
+                                onClick={() => setShowUnpublishModal(false)}
+                              >
+                                {t("cancel", "Cancel")}
+                              </Button>
+                              <Button
+                                disabled={isUnpublishing}
+                                kind={isUnpublishing ? "secondary" : "danger"}
+                                onClick={handleUnpublish}
+                              >
+                                {isUnpublishing ? (
+                                  <InlineLoading
+                                    className={styles.spinner}
+                                    description={
+                                      t("unpublishing", "Unpublishing") + "..."
+                                    }
+                                  />
+                                ) : (
+                                  <span>
+                                    {t("unpublishForm", "Unpublish form")}
+                                  </span>
+                                )}
+                              </Button>
+                            </ModalFooter>
+                          </ComposedModal>
+                        ) : (
+                          false
+                        )}
+                      </>
+                    </div>
+                    <FormRenderer
+                      schema={schema}
+                      onSchemaChange={updateSchema}
+                    />
+                  </>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Column>
+        </Grid>
+      </div>
+    </>
+  );
+};
+
+export default FormEditor;

package/src/components/form-editor/form-editor.scss

@@ -0,0 +1,50 @@
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/type";
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.breadcrumbsContainer {
+  & > .nav.breadcrumbs-container {
+    background-color: $ui-03;
+  }
+}
+
+.grid {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+  max-width: 100%;
+
+  :global(.cds--tabs__nav-item--selected) {
+    border-bottom: 2px solid var(--cds-border-interactive, #005d5d);
+    outline: none !important;
+  }
+}
+
+.column {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 1rem 0;
+
+  button {
+    margin-left: 1rem
+  }
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}

package/src/components/form-renderer/form-renderer.component.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { OHRIFormSchema, OHRIForm } from "@ohri/openmrs-ohri-form-engine-lib";
+import { Tile } from "@carbon/react";
+import { useConfig } from "@openmrs/esm-framework";
+import styles from "./form-renderer.scss";
+
+type FormRendererProps = {
+  onSchemaChange?: (schema: OHRIFormSchema) => void;
+  schema: OHRIFormSchema;
+};
+
+const FormRenderer: React.FC<FormRendererProps> = ({ schema }) => {
+  const { t } = useTranslation();
+  const { patientUuid } = useConfig();
+
+  const dummySchema: OHRIFormSchema = {
+    encounterType: "",
+    name: "Test Form",
+    pages: [
+      {
+        label: "Test Page",
+        sections: [
+          {
+            label: "Test Section",
+            isExpanded: "true",
+            questions: [
+              {
+                label: "Test Question",
+                type: "obs",
+                questionOptions: {
+                  rendering: "text",
+                  concept: "xxxx",
+                },
+                id: "testQuestion",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    processor: "EncounterFormProcessor",
+    referencedForms: [],
+    uuid: "xxx",
+  };
+
+  const [schemaToRender, setSchemaToRender] =
+    useState<OHRIFormSchema>(dummySchema);
+
+  useEffect(() => {
+    if (schema) {
+      setSchemaToRender(schema);
+    }
+  }, [schema]);
+
+  return (
+    <div className={styles.container}>
+      {!schema && (
+        <Tile className={styles.emptyStateTile}>
+          <h4 className={styles.heading}>
+            {t("noSchemaLoaded", "No schema loaded")}
+          </h4>
+          <p className={styles.helperText}>
+            {t(
+              "formRendererHelperText",
+              "Load a form schema in the Schema Editor to the left to see it rendered here by the Form Engine."
+            )}
+          </p>
+        </Tile>
+      )}
+      {schema === schemaToRender && (
+        <OHRIForm
+          formJson={schemaToRender}
+          mode={"enter"}
+          patientUUID={patientUuid}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FormRenderer;

package/src/components/form-renderer/form-renderer.scss

@@ -0,0 +1,31 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.container {
+  background-color: white;
+  padding: 1rem;
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+.emptyStateTile {
+  width: 80%;
+  margin: 1.25rem auto;
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-100;
+}
+
+.helperText {
+  margin-top: 0.5rem;
+  @include type.type-style('body-01');
+  color: colors.$gray-90;
+}