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

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "2.0.2-pre.574",
+  "version": "2.0.2-pre.586",
   "license": "MPL-2.0",
   "description": "OpenMRS ESM Form Builder App",
   "browser": "dist/openmrs-esm-form-builder-app.js",
   "main": "src/index.ts",
   "source": true,
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+  },
   "scripts": {
     "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env.analyze=true",
-    "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
+    "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx --max-warnings=0",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "typescript": "tsc",
     "test": "jest --config jest.config.js",
@@ -32,7 +35,6 @@
   "keywords": [
     "openmrs",
     "microfrontends",
-    "formbuilder",
     "form builder"
   ],
   "repository": {
@@ -47,13 +49,13 @@
     "url": "https://github.com/openmrs/openmrs-esm-form-builder/issues"
   },
   "dependencies": {
-    "@carbon/react": "^1.31.0",
+    "@carbon/react": "^1.38.0",
     "@openmrs/openmrs-form-engine-lib": "next",
-    "dotenv": "^16.1.4",
+    "dotenv": "^16.3.1",
     "file-loader": "^6.2.0",
     "lodash-es": "^4.17.21",
     "react-ace": "^10.1.0",
-    "sass": "^1.63.3"
+    "sass": "^1.67.0"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "*",
@@ -69,44 +71,45 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@openmrs/esm-framework": "next",
     "@openmrs/esm-styleguide": "next",
-    "@playwright/test": "^1.35.0",
+    "@playwright/test": "^1.38.0",
     "@swc/cli": "^0.1.62",
-    "@swc/core": "^1.3.62",
-    "@swc/jest": "^0.2.26",
-    "@testing-library/dom": "^8.20.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
+    "@swc/core": "^1.3.85",
+    "@swc/jest": "^0.2.29",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-ts-react-important-stuff": "^3.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-playwright": "^0.16.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "husky": "^8.0.3",
-    "i18next": "^19.9.2",
-    "i18next-parser": "^5.4.0",
+    "i18next": "^23.5.1",
+    "i18next-parser": "^8.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-cli": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^14.0.1",
     "openmrs": "next",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.10",
-    "react-i18next": "^11.18.6",
+    "react-error-boundary": "^4.0.11",
+    "react-i18next": "^13.2.2",
     "rxjs": "^7.8.1",
     "swc-loader": "^0.2.3",
-    "turbo": "^1.10.3",
+    "turbo": "^1.10.14",
     "typescript": "^4.9.5",
-    "webpack": "^5.86.0",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   },
   "packageManager": "yarn@3.6.0",

package/src/components/action-buttons/action-buttons.component.tsx

@@ -1,39 +1,26 @@
-import React, { useState } from "react";
-import {
-  Button,
-  ComposedModal,
-  InlineLoading,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@carbon/react";
-import { useParams } from "react-router-dom";
-import { showToast, showNotification } from "@openmrs/esm-framework";
-
-import type { TFunction } from "react-i18next";
-import type { RouteParams, Schema } from "../../types";
-import { publishForm, unpublishForm } from "../../forms.resource";
-import { useForm } from "../../hooks/useForm";
-import SaveFormModal from "../modals/save-form-modal.component";
-import styles from "./action-buttons.scss";
-
-type ActionButtonsProps = {
+import React, { useState } from 'react';
+import { Button, ComposedModal, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import type { TFunction } from 'i18next';
+import { useParams } from 'react-router-dom';
+import { showToast, showNotification } from '@openmrs/esm-framework';
+
+import type { Schema } from '../../types';
+import { publishForm, unpublishForm } from '../../forms.resource';
+import { useForm } from '../../hooks/useForm';
+import SaveFormModal from '../modals/save-form-modal.component';
+import styles from './action-buttons.scss';
+
+interface ActionButtonsProps {
   schema: Schema;
   t: TFunction;
-};
+}
 
-type Status =
-  | "idle"
-  | "publishing"
-  | "published"
-  | "unpublishing"
-  | "unpublished"
-  | "error";
+type Status = 'idle' | 'publishing' | 'published' | 'unpublishing' | 'unpublished' | 'error';
 
 function ActionButtons({ schema, t }: ActionButtonsProps) {
-  const { formUuid } = useParams<RouteParams>();
+  const { formUuid } = useParams<{ formUuid?: string }>();
   const { form, mutate } = useForm(formUuid);
-  const [status, setStatus] = useState<Status>("idle");
+  const [status, setStatus] = useState<Status>('idle');
   const [showUnpublishModal, setShowUnpublishModal] = useState(false);
 
   const launchUnpublishModal = () => {
@@ -41,56 +28,57 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
   };
 
   async function handlePublish() {
-    setStatus("publishing");
+    setStatus('publishing');
     try {
       await publishForm(form.uuid);
 
       showToast({
-        title: t("formPublished", "Form published"),
-        kind: "success",
+        title: t('formPublished', 'Form published'),
+        kind: 'success',
         critical: true,
-        description:
-          `${form.name} ` +
-          t("formPublishedSuccessfully", "form was published successfully"),
+        description: `${form.name} ` + t('formPublishedSuccessfully', 'form was published successfully'),
       });
 
-      setStatus("published");
-      mutate();
+      setStatus('published');
+      await mutate();
     } catch (error) {
-      showNotification({
-        title: t("errorPublishingForm", "Error publishing form"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
-      setStatus("error");
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorPublishingForm', 'Error publishing form'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+        setStatus('error');
+      }
     }
   }
 
   async function handleUnpublish() {
-    setStatus("unpublishing");
+    setStatus('unpublishing');
+
     try {
       await unpublishForm(form.uuid);
 
       showToast({
-        title: t("formUnpublished", "Form unpublished"),
-        kind: "success",
+        title: t('formUnpublished', 'Form unpublished'),
+        kind: 'success',
         critical: true,
-        description:
-          `${form.name} ` +
-          t("formUnpublishedSuccessfully", "form was unpublished successfully"),
+        description: `${form.name} ` + t('formUnpublishedSuccessfully', 'form was unpublished successfully'),
       });
 
-      setStatus("unpublished");
-      mutate();
+      setStatus('unpublished');
+      await mutate();
     } catch (error) {
-      showNotification({
-        title: t("errorUnpublishingForm", "Error unpublishing form"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
-      setStatus("error");
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorUnpublishingForm', 'Error unpublishing form'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+        setStatus('error');
+      }
     }
     setShowUnpublishModal(false);
   }
@@ -101,71 +89,47 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
 
       <>
         {form && !form.published ? (
-          <Button
-            kind="secondary"
-            onClick={handlePublish}
-            disabled={status === "publishing"}
-          >
-            {status === "publishing" && !form?.published ? (
-              <InlineLoading
-                className={styles.spinner}
-                description={t("publishing", "Publishing") + "..."}
-              />
+          <Button kind="secondary" onClick={handlePublish} disabled={status === 'publishing'}>
+            {status === 'publishing' && !form?.published ? (
+              <InlineLoading className={styles.spinner} description={t('publishing', 'Publishing') + '...'} />
             ) : (
-              <span>{t("publishForm", "Publish form")}</span>
+              <span>{t('publishForm', 'Publish form')}</span>
             )}
           </Button>
         ) : null}
 
         {form && form.published ? (
-          <Button
-            kind="danger"
-            onClick={launchUnpublishModal}
-            disabled={status === "unpublishing"}
-          >
-            {t("unpublishForm", "Unpublish form")}
+          <Button kind="danger" onClick={launchUnpublishModal} disabled={status === 'unpublishing'}>
+            {t('unpublishForm', 'Unpublish form')}
           </Button>
         ) : null}
 
         {showUnpublishModal ? (
-          <ComposedModal
-            open={true}
-            onClose={() => setShowUnpublishModal(false)}
-            preventCloseOnClickOutside
-          >
+          <ComposedModal open={true} onClose={() => setShowUnpublishModal(false)} preventCloseOnClickOutside>
             <ModalHeader
-              title={t(
-                "unpublishConfirmation",
-                "Are you sure you want to unpublish this form?"
-              )}
+              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."
+                  '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 kind="secondary" onClick={() => setShowUnpublishModal(false)}>
+                {t('cancel', 'Cancel')}
               </Button>
               <Button
-                disabled={status === "unpublishing"}
-                kind={status === "unpublishing" ? "secondary" : "danger"}
+                disabled={status === 'unpublishing'}
+                kind={status === 'unpublishing' ? 'secondary' : 'danger'}
                 onClick={handleUnpublish}
               >
-                {status === "unpublishing" ? (
-                  <InlineLoading
-                    className={styles.spinner}
-                    description={t("unpublishing", "Unpublishing") + "..."}
-                  />
+                {status === 'unpublishing' ? (
+                  <InlineLoading className={styles.spinner} description={t('unpublishing', 'Unpublishing') + '...'} />
                 ) : (
-                  <span>{t("unpublishForm", "Unpublish form")}</span>
+                  <span>{t('confirm', 'Confirm')}</span>
                 )}
               </Button>
             </ModalFooter>