@openmrs/esm-form-builder-app 2.0.2-pre.574 → 2.0.2-pre.586

package/src/config-schema.ts

@@ -1,48 +1,46 @@
-import { Type } from "@openmrs/esm-framework";
+import { Type } from '@openmrs/esm-framework';
 
 export const configSchema = {
   questionTypes: {
     _type: Type.Array,
-    _description:
-      "Provides information that the processor uses to render a field",
+    _description: 'Provides information that the processor uses to render a field',
     _default: [
-      "complex-obs",
-      "control",
-      "encounterDatetime",
-      "encounterLocation",
-      "encounterProvider",
-      "obs",
-      "obsGroup",
-      "personAttribute",
-      "testOrder",
-      "patientIdentifier",
+      'complex-obs',
+      'control',
+      'encounterDatetime',
+      'encounterLocation',
+      'encounterProvider',
+      'obs',
+      'obsGroup',
+      'personAttribute',
+      'testOrder',
+      'patientIdentifier',
     ],
   },
   fieldTypes: {
     _type: Type.Array,
     _description:
-      "An array of available field types. A question can have only one field type, and the field type determines how the question is rendered.",
+      'An array of available field types. A question can have only one field type, and the field type determines how the question is rendered.',
     _default: [
-      "date",
-      "drug",
-      "field-set",
-      "file",
-      "group",
-      "multiCheckbox",
-      "number",
-      "problem",
-      "radio",
-      "repeating",
-      "select",
-      "text",
-      "textarea",
-      "ui-select-extended",
+      'date',
+      'drug',
+      'field-set',
+      'file',
+      'group',
+      'multiCheckbox',
+      'number',
+      'problem',
+      'radio',
+      'repeating',
+      'select',
+      'text',
+      'textarea',
+      'ui-select-extended',
     ],
   },
   showSchemaSaveWarning: {
     _type: Type.Boolean,
     _default: true,
-    _description:
-      "Whether to show a warning about possibly losing data in the forms dashboard",
+    _description: 'Whether to show a warning about possibly losing data in the forms dashboard',
   },
 };

package/src/declarations.d.ts

@@ -1,4 +1,5 @@
-declare module "@carbon/react";
-declare module "*.css";
-declare module "*.scss";
+declare module '@carbon/react';
+declare module '@carbon/react/icons';
+declare module '*.css';
+declare module '*.scss';
 declare type SideNavProps = object;

package/src/form-builder-admin-card-link.component.tsx

@@ -1,21 +1,17 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Layer, ClickableTile } from "@carbon/react";
-import { ArrowRight } from "@carbon/react/icons";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, ClickableTile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
 
 const FormBuilderCardLink: React.FC = () => {
   const { t } = useTranslation();
-  const header = t("manageForms", "Manage Forms");
+  const header = t('manageForms', 'Manage Forms');
   return (
     <Layer>
-      <ClickableTile
-        href={`${window.spaBase}/form-builder`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <ClickableTile href={`${window.spaBase}/form-builder`} target="_blank" rel="noopener noreferrer">
         <div>
           <div className="heading">{header}</div>
-          <div className="content">{t("formBuilder", "Form Builder")}</div>
+          <div className="content">{t('formBuilder', 'Form Builder')}</div>
         </div>
         <div className="iconWrapper">
           <ArrowRight size={16} />

package/src/forms.resource.ts

@@ -1,43 +1,38 @@
-import { openmrsFetch, FetchResponse } from "@openmrs/esm-framework";
-import type { Form, Schema } from "./types";
+import { openmrsFetch, type FetchResponse } from '@openmrs/esm-framework';
+import type { Form, Schema } from './types';
+
+interface SavePayload {
+  name: string;
+  description?: string;
+  version?: string;
+  published?: boolean;
+  encounterType?: string;
+}
 
-export async function deleteClobdata(
-  valueReference: string
-): Promise<FetchResponse<Schema>> {
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/clobdata/${valueReference}`,
-    {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-    }
-  );
+export async function deleteClobdata(valueReference: string): Promise<FetchResponse<Schema>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/clobdata/${valueReference}`, {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+  });
   return response;
 }
 
-export async function deleteForm(
-  formUuid: string
-): Promise<FetchResponse<Record<string, never>>> {
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/form/${formUuid}`,
-    {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-    }
-  );
+export async function deleteForm(formUuid: string): Promise<FetchResponse<Record<string, never>>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form/${formUuid}`, {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+  });
   return response;
 }
 
 export async function deleteResource(
   formUuid: string,
-  resourceUuid: string
+  resourceUuid: string,
 ): Promise<FetchResponse<Record<string, never>>> {
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/form/${formUuid}/resource/${resourceUuid}`,
-    {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-    }
-  );
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form/${formUuid}/resource/${resourceUuid}`, {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+  });
   return response;
 }
 
@@ -46,12 +41,12 @@ export async function uploadSchema(schema: Schema): Promise<string> {
     type: undefined,
   });
   const body = new FormData();
-  body.append("file", schemaBlob);
+  body.append('file', schemaBlob);
 
   const response = await window
     .fetch(`${window.openmrsBase}/ws/rest/v1/clobdata`, {
       body,
-      method: "POST",
+      method: 'POST',
     })
     .then((response) => {
       return response.text();
@@ -60,34 +55,28 @@ export async function uploadSchema(schema: Schema): Promise<string> {
   return response;
 }
 
-export async function getResourceUuid(
-  formUuid: string,
-  valueReference: string
-): Promise<FetchResponse<Schema>> {
+export async function getResourceUuid(formUuid: string, valueReference: string): Promise<FetchResponse<Schema>> {
   const body = {
-    name: "JSON schema",
-    dataType: "AmpathJsonSchema",
+    name: 'JSON schema',
+    dataType: 'AmpathJsonSchema',
     valueReference: valueReference,
   };
 
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/form/${formUuid}/resource`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: body,
-    }
-  );
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form/${formUuid}/resource`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: body,
+  });
 
   return response;
 }
 
 export async function updateForm(
-  formUuid,
-  name,
-  version,
-  description,
-  encounterTypeUuid
+  formUuid: string,
+  name: string,
+  version: string,
+  description: string,
+  encounterTypeUuid: string,
 ): Promise<FetchResponse<Schema>> {
   const abortController = new AbortController();
   const body = {
@@ -99,15 +88,12 @@ export async function updateForm(
     },
   };
 
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/form/${formUuid}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: body,
-      signal: abortController.signal,
-    }
-  );
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form/${formUuid}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: body,
+    signal: abortController.signal,
+  });
 
   return response;
 }
@@ -117,25 +103,26 @@ export async function saveNewForm(
   version: string,
   published?: boolean,
   description?: string,
-  encounterType?: string
+  encounterType?: string,
 ): Promise<Form> {
   const abortController = new AbortController();
 
-  const body = {
+  const body: SavePayload = {
     name: name,
     version: version,
-    published: published || false,
-    description: description || "",
+    published: published ?? false,
+    description: description ?? '',
   };
+
   if (encounterType) {
-    body["encounterType"] = encounterType;
+    body.encounterType = encounterType;
   }
   const headers = {
-    "Content-Type": "application/json",
+    'Content-Type': 'application/json',
   };
 
-  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form`, {
-    method: "POST",
+  const response: FetchResponse<Form> = await openmrsFetch(`/ws/rest/v1/form`, {
+    method: 'POST',
     headers: headers,
     body: body,
     signal: abortController.signal,
@@ -146,28 +133,20 @@ export async function saveNewForm(
 
 export async function publishForm(uuid: string): Promise<FetchResponse<Form>> {
   const body = { published: true };
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/form/${uuid}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: body,
-    }
-  );
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form/${uuid}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: body,
+  });
   return response;
 }
 
-export async function unpublishForm(
-  uuid: string
-): Promise<FetchResponse<Form>> {
+export async function unpublishForm(uuid: string): Promise<FetchResponse<Form>> {
   const body = { published: false };
-  const response: FetchResponse = await openmrsFetch(
-    `/ws/rest/v1/form/${uuid}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: body,
-    }
-  );
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/form/${uuid}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: body,
+  });
   return response;
 }

package/src/hooks/useClobdata.ts

@@ -1,22 +1,20 @@
-import useSWRImmutable from "swr/immutable";
-import { openmrsFetch } from "@openmrs/esm-framework";
-import type { Form, Schema } from "../types";
+import useSWRImmutable from 'swr/immutable';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import type { Form, Schema } from '../types';
 
 export const useClobdata = (form?: Form) => {
-  const valueReferenceUuid = form?.resources?.find(
-    ({ name }) => name === "JSON schema"
-  )?.valueReference;
-  const formHasResources = form?.resources.length > 0 && valueReferenceUuid;
+  const valueReferenceUuid = form?.resources?.find(({ name }) => name === 'JSON schema')?.valueReference;
+  const formHasResources = form && form?.resources?.length > 0 && valueReferenceUuid;
   const url = `/ws/rest/v1/clobdata/${valueReferenceUuid}`;
 
-  const { data, error, isLoading, isValidating, mutate } = useSWRImmutable<
-    { data: Schema },
-    Error
-  >(formHasResources ? url : null, openmrsFetch);
+  const { data, error, isLoading, isValidating, mutate } = useSWRImmutable<{ data: Schema }, Error>(
+    formHasResources ? url : null,
+    openmrsFetch,
+  );
 
   return {
     clobdata: data?.data,
-    clobdataError: error || null,
+    clobdataError: error,
     isLoadingClobdata: isLoading,
     isValidatingClobdata: isValidating,
     mutate: mutate,

package/src/hooks/useConceptLookup.ts

@@ -1,18 +1,15 @@
-import useSWR from "swr";
-import { openmrsFetch } from "@openmrs/esm-framework";
-import type { Concept } from "../types";
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import type { Concept } from '../types';
 
 export function useConceptLookup(conceptId: string) {
   const url = `/ws/rest/v1/concept?q=${conceptId}&v=full`;
 
-  const { data, error } = useSWR<{ data: { results: Array<Concept> } }, Error>(
-    conceptId ? url : null,
-    openmrsFetch
-  );
+  const { data, error } = useSWR<{ data: { results: Array<Concept> } }, Error>(conceptId ? url : null, openmrsFetch);
 
   return {
     concepts: data?.data?.results ?? [],
-    conceptLookupError: error || null,
+    conceptLookupError: error,
     isLoadingConcepts: (!data && !error) || false,
   };
 }

package/src/hooks/useConceptName.ts

@@ -1,18 +1,15 @@
-import useSWR from "swr";
-import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
 
-export function useConceptName(conceptId: string) {
-  const customRepresentation = "custom:(name:(display))";
+export function useConceptName(conceptId: string | undefined) {
+  const customRepresentation = 'custom:(name:(display))';
   const url = `/ws/rest/v1/concept/${conceptId}?v=${customRepresentation}`;
 
-  const { data, error } = useSWR<
-    { data: { name: { display: string } } },
-    Error
-  >(conceptId ? url : null, openmrsFetch);
+  const { data, error } = useSWR<{ data: { name: { display: string } } }, Error>(conceptId ? url : null, openmrsFetch);
 
   return {
     conceptName: data?.data?.name?.display ?? null,
-    conceptNameLookupError: error || null,
+    conceptNameLookupError: error,
     isLoadingConceptName: (!data && !error) || false,
   };
 }

package/src/hooks/useEncounterTypes.ts

@@ -1,18 +1,18 @@
-import useSWRImmutable from "swr/immutable";
-import { openmrsFetch } from "@openmrs/esm-framework";
-import type { EncounterType } from "../types";
+import useSWRImmutable from 'swr/immutable';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import type { EncounterType } from '../types';
 
 export const useEncounterTypes = () => {
   const url = `/ws/rest/v1/encountertype?v=custom:(uuid,name)`;
 
-  const { data, error, isLoading } = useSWRImmutable<
-    { data: { results: Array<EncounterType> } },
-    Error
-  >(url, openmrsFetch);
+  const { data, error, isLoading } = useSWRImmutable<{ data: { results: Array<EncounterType> } }, Error>(
+    url,
+    openmrsFetch,
+  );
 
   return {
     encounterTypes: data?.data?.results ?? [],
-    encounterTypesError: error || null,
+    encounterTypesError: error,
     isEncounterTypesLoading: isLoading,
   };
 };

package/src/hooks/useForm.ts

@@ -1,14 +1,14 @@
-import useSWR from "swr/immutable";
-import { openmrsFetch } from "@openmrs/esm-framework";
-import type { Form } from "../types";
+import useSWR from 'swr/immutable';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import type { Form } from '../types';
 
 export const useForm = (uuid: string) => {
   const url = `/ws/rest/v1/form/${uuid}?v=full`;
 
-  const { data, error, isLoading, isValidating, mutate } = useSWR<
-    { data: Form },
-    Error
-  >(uuid ? url : null, openmrsFetch);
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: Form }, Error>(
+    uuid ? url : null,
+    openmrsFetch,
+  );
 
   return {
     form: data?.data,

package/src/hooks/useForms.ts

@@ -1,15 +1,12 @@
-import useSWR from "swr";
-import { openmrsFetch } from "@openmrs/esm-framework";
-import type { Form } from "../types";
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import type { Form } from '../types';
 
 export function useForms() {
   const url =
-    "/ws/rest/v1/form?v=custom:(uuid,name,encounterType:(uuid,name),version,published,retired,resources:(uuid,name,dataType,valueReference))";
+    '/ws/rest/v1/form?v=custom:(uuid,name,encounterType:(uuid,name),version,published,retired,resources:(uuid,name,dataType,valueReference))';
 
-  const { data, error, isValidating, mutate } = useSWR<
-    { data: { results: Array<Form> } },
-    Error
-  >(url, openmrsFetch);
+  const { data, error, isValidating, mutate } = useSWR<{ data: { results: Array<Form> } }, Error>(url, openmrsFetch);
 
   return {
     forms: data?.data?.results ?? [],

package/src/index.ts

@@ -1,32 +1,20 @@
-import {
-  defineConfigSchema,
-  getAsyncLifecycle,
-  registerBreadcrumbs,
-} from "@openmrs/esm-framework";
-import { configSchema } from "./config-schema";
+import { defineConfigSchema, getAsyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
 
-const moduleName = "@openmrs/esm-form-builder-app";
+const moduleName = '@openmrs/esm-form-builder-app';
 
 const options = {
-  featureName: "form-builder",
+  featureName: 'form-builder',
   moduleName,
 };
 
-export const importTranslation = require.context(
-  "../translations",
-  true,
-  /.json$/,
-  "lazy"
-);
+export const importTranslation = require.context('../translations', true, /.json$/, 'lazy');
 
-export const root = getAsyncLifecycle(
-  () => import("./root.component"),
-  options
-);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
 export const systemAdministrationFormBuilderCardLink = getAsyncLifecycle(
-  () => import("./form-builder-admin-card-link.component"),
-  options
+  () => import('./form-builder-admin-card-link.component'),
+  options,
 );
 
 export function startupApp() {
@@ -35,17 +23,17 @@ export function startupApp() {
   registerBreadcrumbs([
     {
       path: `${window.spaBase}/form-builder`,
-      title: "Form Builder",
+      title: 'Form Builder',
       parent: `${window.spaBase}/home`,
     },
     {
       path: `${window.spaBase}/form-builder/new`,
-      title: "Form Editor",
+      title: 'Form Editor',
       parent: `${window.spaBase}/form-builder`,
     },
     {
       path: `${window.spaBase}/form-builder/edit/:uuid`,
-      title: "Form Editor",
+      title: 'Form Editor',
       parent: `${window.spaBase}/form-builder`,
     },
   ]);

package/src/root.component.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
-import Dashboard from "./components/dashboard/dashboard.component";
-import FormEditor from "./components/form-editor/form-editor.component";
+import Dashboard from './components/dashboard/dashboard.component';
+import FormEditor from './components/form-editor/form-editor.component';
 
 const RootComponent: React.FC = () => {
   return (

package/src/setup-tests.ts

@@ -1,11 +1,3 @@
-import "@testing-library/jest-dom/extend-expect";
-
-declare global {
-  interface Window {
-    URL: {
-      createObjectURL: (blob: Blob) => string;
-    };
-  }
-}
+import '@testing-library/jest-dom';
 
 window.URL.createObjectURL = jest.fn();

package/src/test-helpers.tsx

@@ -1,13 +1,9 @@
-import React from "react";
-import { SWRConfig } from "swr";
-import {
-  render,
-  screen,
-  waitForElementToBeRemoved,
-} from "@testing-library/react";
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { type RenderOptions, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
 
 // This component wraps whatever component is passed to it with an SWRConfig context which provides a global configuration for all SWR hooks.
-const swrWrapper = ({ children }) => {
+const swrWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <SWRConfig
       value={{
@@ -23,15 +19,12 @@ const swrWrapper = ({ children }) => {
 };
 
 // Render the provided component within the wrapper we created above
-export const renderWithSwr = (ui, options?) =>
+export const renderWithSwr = (ui: React.ReactElement, options?: RenderOptions) =>
   render(ui, { wrapper: swrWrapper, ...options });
 
 // Helper function that waits for a loading state to disappear from the screen
 export function waitForLoadingToFinish() {
-  return waitForElementToBeRemoved(
-    () => [...screen.queryAllByRole(/progressbar/i)],
-    {
-      timeout: 4000,
-    }
-  );
+  return waitForElementToBeRemoved(() => [...screen.queryAllByRole('progressbar')], {
+    timeout: 4000,
+  });
 }