@openmrs/esm-form-builder-app 1.0.0

package/src/components/dashboard/dashboard.test.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { navigate, openmrsFetch } from "@openmrs/esm-framework";
+import { renderWithSwr, waitForLoadingToFinish } from "../../test-helpers";
+import Dashboard from "./dashboard.component";
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+const formsResponse = [
+  {
+    uuid: "2ddde996-b1c3-37f1-a53e-378dd1a4f6b5",
+    name: "Test Form 1",
+    encounterType: {
+      uuid: "dd528487-82a5-4082-9c72-ed246bd49591",
+      name: "Consultation",
+    },
+    version: "1",
+    published: true,
+    retired: false,
+    resources: [
+      {
+        uuid: "ea27fd4f-7a4d-4869-8855-5b890c8fed56",
+        name: "JSON schema",
+        dataType: "AmpathJsonSchema",
+        valueReference: "511efba8-f08f-4544-a6da-6a6fa2497b9e",
+      },
+    ],
+  },
+];
+
+describe("Dashboard", () => {
+  it("renders an empty state view if no forms are available", async () => {
+    mockedOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    expect(
+      screen.getByRole("heading", { name: /form builder/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /forms/i })).toBeInTheDocument();
+    expect(screen.getByTitle(/empty data illustration/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/there are no forms to display/i)
+    ).toBeInTheDocument();
+    expect(screen.getByText(/create a new form/i)).toBeInTheDocument();
+  });
+
+  it("renders a list of forms fetched from the server", async () => {
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    expect(
+      screen.getByRole("heading", { name: /form builder/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /filter by publish status/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /create a new form/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /edit schema/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /download schema/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("search", { name: /filter table/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("table")).toBeInTheDocument();
+    expect(screen.getByText(/Test Form 1/i)).toBeInTheDocument();
+  });
+
+  it("searching for a form by name filters the list of forms", async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText(/Test Form 1/i)).toBeInTheDocument();
+
+    const searchbox = screen.getByRole("searchbox");
+
+    await user.type(searchbox, "COVID");
+
+    expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByText(/no matching forms to display/i)
+    ).toBeInTheDocument();
+  });
+
+  it('filters the list of forms by "published" status', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const publishStatusFilter = screen.getByRole("button", {
+      name: /filter by publish status/i,
+    });
+
+    await user.click(publishStatusFilter);
+    await user.click(screen.getByRole("option", { name: /unpublished/i }));
+
+    expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByText(/no matching forms to display/i)
+    ).toBeInTheDocument();
+  });
+
+  it('clicking on "create a new form" button navigates to the "create form" page', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const createFormButton = screen.getByRole("button", {
+      name: /create a new form/i,
+    });
+
+    await user.click(createFormButton);
+
+    expect(navigate).toHaveBeenCalledWith({
+      to: expect.stringMatching(/form\-builder\/new/),
+    });
+  });
+
+  it('clicking on "edit schema" button navigates to the "edit schema" page', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const editSchemaButton = screen.getByRole("button", {
+      name: /edit schema/i,
+    });
+
+    await user.click(editSchemaButton);
+
+    expect(navigate).toHaveBeenCalledWith({
+      to: expect.stringMatching(/form\-builder\/edit/),
+    });
+  });
+
+  it('clicking on "download schema" button downloads the schema', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const downloadSchemaButton = screen.getByRole("button", {
+      name: /download schema/i,
+    });
+
+    await user.click(downloadSchemaButton);
+
+    expect(window.URL.createObjectURL).toHaveBeenCalled();
+  });
+});
+
+function renderDashboard() {
+  renderWithSwr(<Dashboard />);
+}

package/src/components/empty-state/empty-data-illustration.component.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={17.636}
+          cy={2.314}
+          r={1.175}
+        />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={40.218}
+          cy={9.755}
+          r={1.13}
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Layer, Link, Tile } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { navigate, useLayoutType } from "@openmrs/esm-framework";
+
+import styles from "./empty-state.scss";
+import { EmptyDataIllustration } from "./empty-data-illustration.component";
+
+function EmptyState() {
+  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>
+        <EmptyDataIllustration />
+        <p className={styles.content}>
+          {t("noFormsToDisplay", "There are no forms to display.")}
+        </p>
+        <p className={styles.action}>
+          <Link
+            onClick={() =>
+              navigate({
+                to: `${window.spaBase}/form-builder/new`,
+              })
+            }
+          >
+            {t("createNewForm", "Create a new form")}
+          </Link>
+        </p>
+      </Tile>
+    </Layer>
+  );
+}
+
+export default EmptyState;

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

@@ -0,0 +1,55 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.action {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style("heading-compact-01");
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.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);
+  }
+}
+
+.heading: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/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,125 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  Column,
+  InlineNotification,
+  Grid,
+  Tabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+} from "@carbon/react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { ExtensionSlot } from "@openmrs/esm-framework";
+import { Schema, RouteParams } from "../../types";
+import { useClobdata } from "../../hooks/useClobdata";
+import { useForm } from "../../hooks/useForm";
+import FormRenderer from "../form-renderer/form-renderer.component";
+import InteractiveBuilder from "../interactive-builder/interactive-builder.component";
+import SchemaEditor from "../schema-editor/schema-editor.component";
+import styles from "./form-editor.scss";
+
+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>();
+  const { form, formError, isLoadingForm } = useForm(formUuid);
+  const { clobdata, clobdataError, isLoadingClobdata } = useClobdata(form);
+  const isLoadingFormOrSchema =
+    formUuid && (isLoadingClobdata || isLoadingForm);
+
+  useEffect(() => {
+    if (!isLoadingClobdata && clobdata) {
+      setSchema(clobdata);
+    }
+  }, [clobdata, isLoadingClobdata, setSchema]);
+
+  const updateSchema = useCallback((updatedSchema) => {
+    setSchema(updatedSchema);
+  }, []);
+
+  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>
+              </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={isLoadingFormOrSchema}
+                    />
+                  </>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Column>
+          <Column lg={8} md={8} className={styles.column}>
+            <Tabs>
+              <TabList>
+                <Tab>{t("preview", "Preview")}</Tab>
+                <Tab>{t("interactiveBuilder", "Interactive Builder")}</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <FormRenderer
+                    schema={schema}
+                    onSchemaChange={updateSchema}
+                    isLoading={isLoadingFormOrSchema}
+                  />
+                </TabPanel>
+                <TabPanel>
+                  <InteractiveBuilder
+                    schema={schema}
+                    onSchemaChange={updateSchema}
+                    isLoading={isLoadingFormOrSchema}
+                  />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Column>
+        </Grid>
+      </div>
+    </>
+  );
+};
+
+export default FormEditor;

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

@@ -0,0 +1,33 @@
+@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 {
+    background-color: $ui-02;
+  }
+}
+
+.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;
+}