(fix) More fixes to the save form workflow

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

@@ -14,9 +14,14 @@ 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.component";
+import SaveFormModal from "../modals/save-form-modal.component";
 import styles from "./action-buttons.scss";
 
+type ActionButtonsProps = {
+  schema: Schema;
+  t: TFunction;
+};
+
 type Status =
   | "idle"
   | "publishing"
@@ -25,11 +30,6 @@ type Status =
   | "unpublished"
   | "error";
 
-type ActionButtonsProps = {
-  schema: Schema;
-  t: TFunction;
-};
-
 function ActionButtons({ schema, t }: ActionButtonsProps) {
   const { formUuid } = useParams<RouteParams>();
   const { form, mutate } = useForm(formUuid);

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

@@ -171,15 +171,14 @@ const FormEditor: React.FC = () => {
           </Column>
           <Column lg={8} md={8} className={styles.column}>
             <Tabs>
-              <TabList aria-label="Form preview">
+              <TabList aria-label="Form previews">
                 <Tab>{t("preview", "Preview")}</Tab>
                 <Tab>{t("interactiveBuilder", "Interactive Builder")}</Tab>
               </TabList>
               <TabPanels>
                 <TabPanel>
                   <FormRenderer
                     schema={schema}
-                    onSchemaChange={updateSchema}
                     isLoading={isLoadingFormOrSchema}
                   />
                 </TabPanel>

src/components/modals/save-form.component.tsx → src/components/modals/save-form-modal.component.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useCallback, useState } from "react";
+import React, { SyntheticEvent, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 import {
@@ -29,7 +29,7 @@ import {
 import type { EncounterType, Resource, RouteParams, Schema } from "../../types";
 import { useEncounterTypes } from "../../hooks/useEncounterTypes";
 import { useForm } from "../../hooks/useForm";
-import styles from "./save-form.scss";
+import styles from "./save-form-modal.scss";
 
 type FormGroupData = {
   name: string;
@@ -56,18 +56,25 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
   const [saveState, setSaveState] = useState("");
   const [isSavingForm, setIsSavingForm] = useState(false);
   const [isInvalidVersion, setIsInvalidVersion] = useState(false);
-  const [name, setName] = useState(form?.name);
-  const [description, setDescription] = useState(form?.description);
-  const [encounterType, setEncounterType] = useState(
-    form?.encounterType?.uuid || ""
-  );
-  const [version, setVersion] = useState(form?.version);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [encounterType, setEncounterType] = useState("");
+  const [version, setVersion] = useState("");
 
   const clearDraftFormSchema = useCallback(
     () => localStorage.removeItem("formSchema"),
     []
   );
 
+  useEffect(() => {
+    if (schema) {
+      setName(schema.name);
+      setDescription(schema.description);
+      setEncounterType(schema.encounterType);
+      setVersion(schema.version);
+    }
+  }, [schema]);
+
   const checkVersionValidity = (version: string) => {
     if (!version) return setIsInvalidVersion(false);
 
@@ -297,27 +304,28 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
             <FormGroup legendText={""}>
               <Stack gap={5}>
                 <TextInput
-                  defaultValue={schema?.name || form?.name}
                   id="name"
                   labelText={t("formName", "Form name")}
                   onChange={(event) => setName(event.target.value)}
-                  placeholder="e.g. OHRI Express Care Patient Encounter Form"
+                  placeholder={t(
+                    "formNamePlaceholder",
+                    "e.g. OHRI Express Care Patient Encounter Form"
+                  )}
                   required
+                  value={name}
                 />
                 {saveState === "update" ? (
                   <TextInput
                     id="uuid"
-                    labelText="UUID (auto-generated)"
+                    labelText={t("autogeneratedUuid", "UUID (auto-generated")}
                     disabled
-                    value={schema?.uuid || form?.uuid}
+                    value={form?.uuid}
                   />
                 ) : null}
                 <TextInput
-                  defaultValue={schema?.version || form?.version}
                   id="version"
-                  labelText="Version"
+                  labelText={t("version", "Version")}
                   placeholder="e.g. 1.0"
-                  required
                   onChange={(event) => {
                     checkVersionValidity(event.target.value);
 
@@ -330,33 +338,38 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
                     "invalidVersionWarning",
                     "Version can only start with with a number"
                   )}
+                  required
+                  value={version}
                 />
                 <Select
                   id="encounterType"
-                  defaultValue={encounterType}
-                  onChange={(event) => setEncounterType(event.target.value)}
                   labelText={t("encounterType", "Encounter Type")}
+                  onChange={(event) => setEncounterType(event.target.value)}
                   required
+                  value={encounterType}
                 >
-                  {!form?.encounterType ? (
+                  {!encounterType ? (
                     <SelectItem
                       text={t(
                         "chooseEncounterType",
                         "Choose an encounter type to link your form to"
                       )}
+                      value=""
                     />
                   ) : null}
-                  {encounterTypes?.map((encounterType, key) => (
-                    <SelectItem
-                      key={key}
-                      value={encounterType.uuid}
-                      text={encounterType.name}
-                    />
-                  ))}
+                  {encounterTypes?.length > 0 &&
+                    encounterTypes.map((encounterType) => (
+                      <SelectItem
+                        key={encounterType.uuid}
+                        value={encounterType.uuid}
+                        text={encounterType.name}
+                      >
+                        {encounterType.name}
+                      </SelectItem>
+                    ))}
                 </Select>
                 <TextArea
                   labelText={t("description", "Description")}
-                  defaultValue={saveState === "update" ? form?.description : ""}
                   onChange={(event) => setDescription(event.target.value)}
                   cols={6}
                   rows={3}
@@ -366,6 +379,7 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
                     "e.g. A form used to collect encounter data for clients in the Express Care program."
                   )}
                   required
+                  value={description}
                 />
               </Stack>
             </FormGroup>

src/hooks/useEncounterTypes.ts

@@ -5,14 +5,14 @@ import type { EncounterType } from "../types";
 export const useEncounterTypes = () => {
   const url = `/ws/rest/v1/encountertype?v=custom:(uuid,name)`;
 
-  const { data, error } = useSWRImmutable<
+  const { data, error, isLoading } = useSWRImmutable<
     { data: { results: Array<EncounterType> } },
     Error
   >(url, openmrsFetch);
 
   return {
     encounterTypes: data?.data?.results ?? [],
     encounterTypesError: error || null,
-    isEncounterTypesLoading: (!data && !error) || false,
+    isEncounterTypesLoading: isLoading,
   };
 };

src/types.ts

@@ -68,6 +68,7 @@ export interface Schema {
   encounterType: string;
   referencedForms: [];
   version?: string;
+  description?: string;
 }
 
 export interface SchemaContextType {