@openmrs/esm-form-builder-app 3.4.2-pre.3421 → 3.4.2-pre.3423

package/src/components/dashboard/dashboard.component.tsx

@@ -66,19 +66,20 @@ interface FormsListProps {
   t: TFunction;
 }
 
-function CustomTag({ condition }: { condition?: boolean }) {
+function CustomTag({ condition, invertTone = false }: { condition?: boolean; invertTone?: boolean }) {
   const { t } = useTranslation();
+  const positiveTrueType = invertTone ? 'red' : 'green';
 
   if (condition) {
     return (
-      <Tag type="green" size="md" title="Clear Filter" data-testid="yes-tag">
+      <Tag type={positiveTrueType} size="md" title="Clear Filter" data-testid="yes-tag">
         {t('yes', 'Yes')}
       </Tag>
     );
   }
 
   return (
-    <Tag type="red" size="md" title="Clear Filter" data-testid="no-tag">
+    <Tag type="cool-gray" size="md" title="Clear Filter" data-testid="no-tag">
       {t('no', 'No')}
     </Tag>
   );
@@ -237,7 +238,7 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
   };
 
   return (
-    <>
+    <div className={styles.actionButtons}>
       {formResources.length == 0 || !form?.resources[0] ? (
         <ImportButton />
       ) : (
@@ -247,7 +248,7 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
         </>
       )}
       {form.retired ? <RestoreButton /> : <DeleteButton />}
-    </>
+    </div>
   );
 }
 
@@ -286,22 +287,27 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
     {
       header: t('name', 'Name'),
       key: 'name',
+      isSortable: true,
     },
     {
       header: t('version', 'Version'),
       key: 'version',
+      isSortable: true,
     },
     {
       header: t('published', 'Published'),
       key: 'published',
+      isSortable: true,
     },
     {
       header: t('retired', 'Retired'),
       key: 'retired',
+      isSortable: true,
     },
     {
       header: t('schemaActions', 'Schema actions'),
       key: 'actions',
+      isSortable: false,
     },
   ];
 
@@ -318,23 +324,47 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
   const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
 
   const tableRows = results?.map((form: TypedForm) => ({
-    ...form,
     id: form?.uuid,
-    name: (
-      <ConfigurableLink
-        className={styles.link}
-        to={editSchemaUrl}
-        templateParams={{ formUuid: form?.uuid }}
-        onMouseEnter={() => void preload(`${restBaseUrl}/form/${form?.uuid}?v=full`, openmrsFetch)}
-      >
-        {form.name}
-      </ConfigurableLink>
-    ),
-    published: <CustomTag condition={form.published} />,
-    retired: <CustomTag condition={form.retired} />,
-    actions: <ActionButtons form={form} mutate={mutate} responsiveSize={responsiveSize} t={t} />,
+    name: form.name,
+    version: form.version,
+    published: form.published,
+    retired: form.retired,
+    actions: form.uuid,
   }));
 
+  const formsByUuid = useMemo(() => new Map(results?.map((form: TypedForm) => [form.uuid, form]) ?? []), [results]);
+
+  const renderCell = (cell: { id: string; value: unknown; info: { header: string } }) => {
+    const form = formsByUuid.get(String(cell.value)) ?? formsByUuid.get(cell.id.split(':')[0]);
+    switch (cell.info.header) {
+      case 'name': {
+        const rowForm = formsByUuid.get(cell.id.split(':')[0]);
+        return (
+          <ConfigurableLink
+            className={styles.link}
+            to={editSchemaUrl}
+            templateParams={{ formUuid: rowForm?.uuid }}
+            onMouseEnter={() => rowForm && void preload(`${restBaseUrl}/form/${rowForm.uuid}?v=full`, openmrsFetch)}
+          >
+            {String(cell.value)}
+          </ConfigurableLink>
+        );
+      }
+      case 'published':
+        return <CustomTag condition={Boolean(cell.value)} />;
+      case 'retired':
+        return <CustomTag condition={Boolean(cell.value)} invertTone />;
+      case 'actions': {
+        const actionForm = formsByUuid.get(String(cell.value));
+        return actionForm ? (
+          <ActionButtons form={actionForm} mutate={mutate} responsiveSize={responsiveSize} t={t} />
+        ) : null;
+      }
+      default:
+        return String(cell.value);
+    }
+  };
+
   const handleFilter = ({ selectedItem }: { selectedItem: string }) => setFilter(selectedItem);
 
   const handleSearch = useCallback(
@@ -365,7 +395,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
           <span>{isValidating ? <InlineLoading /> : null}</span>
         </div>
       </div>
-      <DataTable rows={tableRows} headers={tableHeaders} size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+      <DataTable rows={tableRows} headers={tableHeaders} size={isTablet ? 'lg' : 'sm'} useZebraStyles isSortable>
         {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
           <>
             <TableContainer className={styles.tableContainer} data-testid="forms-table">
@@ -381,7 +411,6 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
                     <Button
                       kind="primary"
                       iconDescription={t('createNewForm', 'Create a new form')}
-                      renderIcon={() => <Add size={16} />}
                       size={responsiveSize}
                       onClick={() =>
                         navigate({
@@ -389,6 +418,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
                         })
                       }
                     >
+                      <Add size={16} style={{ marginRight: '0.5rem' }} aria-hidden />
                       {t('createNewForm', 'Create a new form')}
                     </Button>
                   </TableToolbarContent>
@@ -397,16 +427,19 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
               <Table {...getTableProps()} className={styles.table}>
                 <TableHead>
                   <TableRow>
-                    {headers.map((header) => (
-                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
-                    ))}
+                    {headers.map((header) => {
+                      const sortable = (header as { isSortable?: boolean }).isSortable;
+                      return (
+                        <TableHeader {...getHeaderProps({ header, isSortable: sortable })}>{header.header}</TableHeader>
+                      );
+                    })}
                   </TableRow>
                 </TableHead>
                 <TableBody>
                   {rows.map((row) => (
-                    <TableRow key="row.id" {...getRowProps({ row })} data-testid={`form-row-${row.id}`}>
+                    <TableRow key={row.id} {...getRowProps({ row })} data-testid={`form-row-${row.id}`}>
                       {row.cells.map((cell) => (
-                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                        <TableCell key={cell.id}>{renderCell(cell)}</TableCell>
                       ))}
                     </TableRow>
                   ))}
@@ -472,7 +505,7 @@ const Dashboard: React.FC = () => {
                   lowContrast
                   title={t(
                     'schemaSaveWarningMessage',
-                    "The dev3 server is ephemeral at best and can't be relied upon to save your schemas permanently. To avoid losing your work, please save your schemas to your local machine. Alternatively, upload your schema to the distro repo to have it persisted across server resets.",
+                    "This is a demo server and can't be relied upon to save your schemas permanently. To avoid losing your work, please save your schemas to your local machine. Alternatively, upload your schema to the distro repo to have it persisted across server resets.",
                   )}
                 />
               )}

package/src/components/dashboard/dashboard.scss

@@ -132,3 +132,9 @@
 .warningMessage {
   margin: layout.$spacing-05 0;
 }
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}

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

@@ -16,8 +16,9 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
+  Tag,
 } from '@carbon/react';
-import { ArrowLeft, Maximize, Minimize, Download } from '@carbon/react/icons';
+import { ArrowLeft, Maximize, Minimize, Download, Renew } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { type TFunction } from 'i18next';
@@ -95,6 +96,21 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
 
   const isLoadingFormOrSchema = Boolean(formUuid) && (isLoadingClobdata || isLoadingForm);
 
+  const savedSchemaString = useMemo(() => (clobdata ? JSON.stringify(clobdata, null, 2) : ''), [clobdata]);
+  const hasSchemaContent =
+    Boolean(stringifiedSchema) && stringifiedSchema !== 'undefined' && stringifiedSchema !== 'null';
+  const isDirty = hasSchemaContent && stringifiedSchema !== savedSchemaString;
+
+  useEffect(() => {
+    if (!isDirty) return;
+    const handler = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [isDirty]);
+
   const langCodeForPreview = useMemo(
     () => (shouldMergeTranslation ? renderLangCode : null),
     [shouldMergeTranslation, renderLangCode],
@@ -353,7 +369,14 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
             {isLoadingFormOrSchema ? (
               <InlineLoading description={t('loadingSchema', 'Loading schema') + '...'} />
             ) : (
-              <h1 className={styles.formName}>{form?.name}</h1>
+              <h1 className={styles.formName}>
+                {form?.name}
+                {isDirty && (
+                  <Tag className={styles.dirtyIndicator} type="warm-gray" size="sm">
+                    {t('unsavedChanges', 'Unsaved changes')}
+                  </Tag>
+                )}
+              </h1>
             )}
           </div>
           <div>
@@ -378,7 +401,7 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
                 ) : null}
                 {isNewSchema && !schema ? (
                   <Button kind="ghost" onClick={inputDummySchema}>
-                    {t('inputDummySchema', 'Input dummy schema')}
+                    {t('inputDummySchema', 'Load sample schema')}
                   </Button>
                 ) : null}
                 <Dropdown
@@ -395,12 +418,18 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
                   className={styles.dropdown}
                 />
 
-                <Button kind="ghost" onClick={handleRenderSchemaChanges} disabled={!!invalidJsonErrorMessage}>
-                  <span>{t('renderChanges', 'Render changes')}</span>
+                <Button
+                  kind="tertiary"
+                  size="sm"
+                  renderIcon={Renew}
+                  onClick={handleRenderSchemaChanges}
+                  disabled={!!invalidJsonErrorMessage}
+                >
+                  {t('renderChanges', 'Render changes')}
                 </Button>
               </div>
               {schema ? (
-                <>
+                <div className={styles.schemaIconActions}>
                   <IconButton
                     enterDelayMs={defaultEnterDelayInMs}
                     kind="ghost"
@@ -429,7 +458,7 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
                       <Download />
                     </IconButton>
                   </a>
-                </>
+                </div>
               ) : null}
             </div>
             {formError ? (
@@ -518,10 +547,12 @@ function BackButton({ t }: TranslationFnProps) {
 
 function FormEditor() {
   const { t } = useTranslation();
+  const { formUuid } = useParams<{ formUuid: string }>();
+  const isNewForm = !formUuid;
 
   return (
     <>
-      <Header title={t('schemaEditor', 'Schema editor')} />
+      <Header title={isNewForm ? t('createNewForm', 'Create a new form') : t('editForm', 'Edit form')} />
       <BackButton t={t} />
       <FormEditorContent t={t} />
     </>

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

@@ -56,6 +56,11 @@
   @include type.type-style('heading-03');
 }
 
+.dirtyIndicator {
+  margin-left: layout.$spacing-03;
+  vertical-align: middle;
+}
+
 .editorContainer {
   padding: 1rem;
 
@@ -70,6 +75,7 @@
   display: flex;
   margin-right: 1rem;
   align-items: center;
+  gap: layout.$spacing-05;
 }
 
 .tabHeading {
@@ -112,10 +118,18 @@ button {
 .topBtns {
   display: flex;
   align-items: center;
+  gap: layout.$spacing-05;
+}
+
+.schemaIconActions {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
 }
 
 .dropdown {
-  grid-gap: 0 !important;
+  gap: layout.$spacing-03 !important;
+  column-gap: layout.$spacing-03 !important;
 
   :global(.cds--label) {
     white-space: nowrap;

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

@@ -392,7 +392,8 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
               </p>
             </div>
             <Button
-              kind="ghost"
+              kind="tertiary"
+              size="sm"
               renderIcon={Add}
               onClick={launchAddPageModal}
               iconDescription={t('addPage', 'Add Page')}
@@ -420,7 +421,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
             )}
           </p>
 
-          <Button onClick={launchNewFormModal} className={styles.startButton} kind="ghost">
+          <Button onClick={launchNewFormModal} className={styles.startButton} kind="primary">
             {t('startBuilding', 'Start building')}
           </Button>
         </div>
@@ -481,7 +482,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                                   <IconButton
                                     enterDelayMs={300}
                                     kind="ghost"
-                                    label={t('editSection', 'Edit Section')}
+                                    label={t('editSection', 'Edit section')}
                                     onClick={() =>
                                       section.reference
                                         ? launchAddFormReferenceModal(pageIndex, 'edit', sectionIndex)
@@ -565,7 +566,8 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
 
                                 <Button
                                   className={styles.addQuestionButton}
-                                  kind="ghost"
+                                  kind="tertiary"
+                                  size="sm"
                                   renderIcon={Add}
                                   onClick={() => {
                                     launchAddQuestionModal(pageIndex, sectionIndex);

package/src/components/interactive-builder/modals/add-form-reference/add-form-reference.modal.tsx

@@ -178,7 +178,7 @@ const AddFormReferenceModal: React.FC<AddFormReferenceModalProps> = ({
         <ModalBody className={styles.modalBody}>
           <Stack gap={4}>
             {isLoading ? (
-              <InlineLoading description={t('loading', 'Loading...')} />
+              <InlineLoading description={t('loading', 'Loading') + '...'} />
             ) : error ? (
               <InlineNotification>{t('errorLoadingForms', 'Error loading forms')}</InlineNotification>
             ) : forms.length === 0 ? (
@@ -200,7 +200,7 @@ const AddFormReferenceModal: React.FC<AddFormReferenceModalProps> = ({
               </FormGroup>
             ) : null}
             {isLoadingClobdata ? (
-              <InlineLoading description={t('loading', 'Loading...')} />
+              <InlineLoading description={t('loading', 'Loading') + '...'} />
             ) : clobdataError ? (
               <InlineNotification>{t('errorLoadingForm', 'Error loading form')}</InlineNotification>
             ) : pages && pages.length > 0 && !mode ? (

package/src/components/interactive-builder/modals/question/question-form/common/concept-search/concept-search.component.tsx

@@ -102,7 +102,7 @@ const ConceptSearch: React.FC<ConceptSearchProps> = ({
       )}
       <div className={styles.searchContainer}>
         {isLoadingConcept ? (
-          <InlineLoading className={styles.loader} description={t('loading', 'Loading...')} />
+          <InlineLoading className={styles.loader} description={t('loading', 'Loading') + '...'} />
         ) : (
           <Search
             id="conceptLookup"

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

@@ -195,11 +195,11 @@ const TranslationBuilder: React.FC<TranslationBuilderProps> = ({ formSchema, onU
         subtitle: t('translationsUploadedSuccessfully', `Translation file uploaded successfully.`),
       });
     } catch (err: any) {
-      setError(t('translationFileUploadFail', 'Failed to upload translation file.'));
+      setError(t('translationFileUploadFail', 'Failed to upload translation file'));
       showSnackbar({
         title: t('uploadFailed', 'Upload Failed'),
         kind: 'error',
-        subtitle: t('translationFileUploadFail', `Failed to upload translation file`),
+        subtitle: t('translationFileUploadFail', 'Failed to upload translation file'),
       });
       console.error(err);
     } finally {