Support hydrated FormRowTextList

This is needed to be able to use the component in our TT forms
until all forms are converted (and makes it easier to test
without having to fully convert the entity editors to React).

root/server/components.mjs

@@ -530,6 +530,7 @@ export default {
   'static/scripts/common/components/WarningIcon': (): Promise<mixed> => import('../static/scripts/common/components/WarningIcon.js'),
   'static/scripts/edit/components/AddIcon': (): Promise<mixed> => import('../static/scripts/edit/components/AddIcon.js'),
   'static/scripts/edit/components/FormRowNameWithGuessCase': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowNameWithGuessCase.js'),
+  'static/scripts/edit/components/FormRowTextList': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowTextList.js'),
   'static/scripts/edit/components/GuessCaseIcon': (): Promise<mixed> => import('../static/scripts/edit/components/GuessCaseIcon.js'),
   'static/scripts/edit/components/InformationIcon': (): Promise<mixed> => import('../static/scripts/edit/components/InformationIcon.js'),
   'static/scripts/recording/RecordingName': (): Promise<mixed> => import('../static/scripts/recording/RecordingName.js'),

root/static/scripts/area/edit.js

@@ -8,6 +8,7 @@
  */
 
 import typeBubble from '../edit/typeBubble.js';
+import '../edit/components/FormRowTextList.js';
 
 const typeIdField = 'select[name=edit-area\\.type_id]';
 typeBubble(typeIdField);

root/static/scripts/edit/components/FormRow.js

@@ -9,6 +9,7 @@
 
 component FormRow(
   children: React.Node,
+  className as passedClassname?: string,
   hasNoLabel: boolean = false,
   hasNoMargin: boolean = false,
   rowRef?: {-current: HTMLDivElement | null},
@@ -18,7 +19,8 @@ component FormRow(
       className={
         'row' +
         (hasNoLabel ? ' no-label' : '') +
-        (hasNoMargin ? ' no-margin' : '')
+        (hasNoMargin ? ' no-margin' : '') +
+        (nonEmpty(passedClassname) ? ' ' + passedClassname : '')
       }
       ref={rowRef}
     >

root/static/scripts/edit/components/FormRowTextList.js

@@ -107,7 +107,7 @@ component FormRowTextList(
   };
 
   return (
-    <FormRow>
+    <>
       <FormLabel forField={repeatable} label={label} required={required} />
 
       <div className="form-row-text-list">
@@ -132,8 +132,25 @@ component FormRowTextList(
       </div>
 
       <FieldErrors field={repeatable} />
+    </>
+  );
+}
+
+export component NonHydratedFormRowTextList(
+  ...props: React.PropsOf<FormRowTextList>
+) {
+  return (
+    <FormRow className="form-row-text-list-container">
+      <FormRowTextList {...props} />
     </FormRow>
   );
 }
 
-export default FormRowTextList;
+/*
+ * Hydration must be moved higher up in the component hierarchy once
+ * more of the page is converted to React.
+ */
+export default (hydrate<React.PropsOf<FormRowTextList>>(
+  'div.row.form-row-text-list-container',
+  FormRowTextList,
+): React.AbstractComponent<React.PropsOf<FormRowTextList>, void>);

webpack/client.config.mjs

@@ -60,6 +60,7 @@ const entries = [
   'common/components/WorkArtists',
   'confirm-seed',
   'edit',
+  'edit/components/FormRowTextList',
   'edit/components/NewNotesAlertCheckbox',
   'event/components/EventEditForm',
   'event/edit',