@scm-manager/ui-forms 2.42.3 → 2.42.4-20230213-150253

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scm-manager/ui-forms",
   "private": false,
-  "version": "2.42.3",
+  "version": "2.42.4-20230213-150253",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index.mjs",
@@ -16,7 +16,7 @@
     "@scm-manager/eslint-config": "^2.16.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-styles": "2.42.3",
+    "@scm-manager/ui-styles": "2.42.4-20230213-150253",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -32,16 +32,18 @@
     "tsup": "^6.2.3"
   },
   "peerDependencies": {
-    "@scm-manager/ui-components": "2.42.3",
+    "@scm-manager/ui-components": "2.42.4-20230213-150253",
     "classnames": "^2.3.1",
     "react": "17",
     "react-hook-form": "7",
     "react-i18next": "11",
-    "react-query": "3"
+    "react-query": "3",
+    "styled-components": "5"
   },
   "dependencies": {
-    "@scm-manager/ui-buttons": "2.42.3",
-    "@scm-manager/ui-api": "2.42.3"
+    "@scm-manager/ui-buttons": "2.42.4-20230213-150253",
+    "@scm-manager/ui-overlays": "2.42.4-20230213-150253",
+    "@scm-manager/ui-api": "2.42.4-20230213-150253"
   },
   "prettier": "@scm-manager/prettier-config",
   "eslintConfig": {

package/src/AddListEntryForm.tsx

@@ -0,0 +1,123 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useCallback, useEffect } from "react";
+import { ScmFormPathContextProvider, useScmFormPathContext } from "./FormPathContext";
+import { ScmFormContextProvider, useScmFormContext } from "./ScmFormContext";
+import { DeepPartial, UseFieldArrayReturn, useForm, UseFormReturn } from "react-hook-form";
+import { Button } from "@scm-manager/ui-buttons";
+import { prefixWithoutIndices } from "./helpers";
+import { useScmFormListContext } from "./ScmFormListContext";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+
+const StyledHr = styled.hr`
+  &:last-child {
+    display: none;
+  }
+`;
+
+type RenderProps<T extends Record<string, unknown>> = Omit<
+  UseFormReturn<T>,
+  "register" | "unregister" | "handleSubmit" | "control"
+>;
+
+type Props<FormType extends Record<string, unknown>, DefaultValues extends FormType> = {
+  children: ((renderProps: RenderProps<FormType>) => React.ReactNode | React.ReactNode[]) | React.ReactNode;
+  defaultValues: DefaultValues;
+  submit?: (data: FormType, append: UseFieldArrayReturn["append"]) => unknown;
+  /**
+   * @default true
+   */
+  disableSubmitWhenDirty?: boolean;
+};
+
+/**
+ * @beta
+ * @since 2.43.0
+ */
+function AddListEntryForm<FormType extends Record<string, unknown>, DefaultValues extends FormType>({
+  children,
+  defaultValues,
+  submit,
+  disableSubmitWhenDirty = true,
+}: Props<FormType, DefaultValues>) {
+  const [defaultTranslate] = useTranslation("commons", { keyPrefix: "form" });
+  const { readOnly, t } = useScmFormContext();
+  const nameWithPrefix = useScmFormPathContext();
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const { append, isNested } = useScmFormListContext();
+  const form = useForm<FormType, DefaultValues>({
+    mode: "onChange",
+    defaultValues: defaultValues as DeepPartial<FormType>,
+  });
+
+  const {
+    reset,
+    formState: { isSubmitSuccessful, isDirty, isValid },
+  } = form;
+
+  const translateWithExtraPrefix = useCallback<typeof t>(
+    (key, ...args) => t(`${prefixedNameWithoutIndices}.${key}`, ...(args as any)),
+    [prefixedNameWithoutIndices, t]
+  );
+
+  const onSubmit = useCallback((data) => (submit ? submit(data, append) : append(data)), [append, submit]);
+
+  const submitButtonLabel = translateWithExtraPrefix("add", {
+    defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") }),
+  });
+
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      reset(defaultValues);
+    }
+  }, [defaultValues, isSubmitSuccessful, reset]);
+
+  if (readOnly) {
+    return null;
+  }
+
+  return (
+    <ScmFormContextProvider {...form} t={translateWithExtraPrefix} formId={nameWithPrefix}>
+      <ScmFormPathContextProvider path="">
+        <form id={nameWithPrefix} onSubmit={form.handleSubmit(onSubmit)}></form>
+        {typeof children === "function" ? children(form) : children}
+        <div className="level-right">
+          <Button
+            form={nameWithPrefix}
+            type="submit"
+            variant={isNested ? undefined : "secondary"}
+            disabled={(disableSubmitWhenDirty && !isDirty) || !isValid}
+          >
+            {submitButtonLabel}
+          </Button>
+        </div>
+        <StyledHr />
+      </ScmFormPathContextProvider>
+    </ScmFormContextProvider>
+  );
+}
+
+export default AddListEntryForm;

package/src/Form.stories.tsx

@@ -0,0 +1,295 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/* eslint-disable no-console */
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import Form from "./Form";
+import FormRow from "./FormRow";
+import ControlledInputField from "./input/ControlledInputField";
+import ControlledSecretConfirmationField from "./input/ControlledSecretConfirmationField";
+import ControlledCheckboxField from "./checkbox/ControlledCheckboxField";
+import ControlledList from "./list/ControlledList";
+import ControlledSelectField from "./select/ControlledSelectField";
+import ControlledColumn from "./table/ControlledColumn";
+import ControlledTable from "./table/ControlledTable";
+import AddListEntryForm from "./AddListEntryForm";
+import { ScmFormListContextProvider } from "./ScmFormListContext";
+
+export type SimpleWebHookConfiguration = {
+  urlPattern: string;
+  executeOnEveryCommit: boolean;
+  sendCommitData: boolean;
+  method: string;
+  headers: WebhookHeader[];
+};
+
+export type WebhookHeader = {
+  key: string;
+  value: string;
+  concealed: boolean;
+};
+
+storiesOf("Forms", module)
+  .add("Creation", () => (
+    <Form
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{
+        name: "",
+        password: "",
+        active: true,
+      }}
+    >
+      <FormRow>
+        <ControlledInputField name="name" />
+      </FormRow>
+      <FormRow>
+        <ControlledSecretConfirmationField name="password" />
+      </FormRow>
+      <FormRow>
+        <ControlledCheckboxField name="active" />
+      </FormRow>
+    </Form>
+  ))
+  .add("Editing", () => (
+    <Form
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{
+        name: "trillian",
+        password: "secret",
+        active: true,
+      }}
+    >
+      <FormRow>
+        <ControlledInputField name="name" />
+      </FormRow>
+      <FormRow>
+        <ControlledSecretConfirmationField name="password" />
+      </FormRow>
+      <FormRow>
+        <ControlledCheckboxField name="active" />
+      </FormRow>
+    </Form>
+  ))
+  .add("GlobalConfiguration", () => (
+    <Form
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{
+        url: "",
+        filter: "",
+        username: "",
+        password: "",
+        roleLevel: "",
+        updateIssues: false,
+        disableRepoConfig: false,
+      }}
+    >
+      {({ watch }) => (
+        <>
+          <FormRow>
+            <ControlledInputField name="url" label="URL" helpText="URL of Jira installation (with context path)." />
+          </FormRow>
+          <FormRow>
+            <ControlledInputField name="filter" label="Project Filter" helpText="Filters for jira project key." />
+          </FormRow>
+          <FormRow>
+            <ControlledCheckboxField
+              name="updateIssues"
+              label="Update Jira Issues"
+              helpText="Enable the automatic update function."
+            />
+          </FormRow>
+          <FormRow hidden={watch("filter")}>
+            <ControlledInputField
+              name="username"
+              label="Username"
+              helpText="Jira username for connection."
+              className="is-half"
+            />
+            <ControlledInputField
+              name="password"
+              label="Password"
+              helpText="Jira password for connection."
+              type="password"
+              className="is-half"
+            />
+          </FormRow>
+          <FormRow hidden={watch("filter")}>
+            <ControlledInputField
+              name="roleLevel"
+              label="Role Visibility"
+              helpText="Defines for which Project Role the comments are visible."
+            />
+          </FormRow>
+          <FormRow>
+            <ControlledCheckboxField
+              name="disableRepoConfig"
+              label="Do not allow repository configuration"
+              helpText="Do not allow repository owners to configure jira instances."
+            />
+          </FormRow>
+        </>
+      )}
+    </Form>
+  ))
+  .add("RepoConfiguration", () => (
+    <Form
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{
+        url: "",
+        option: "",
+        anotherOption: "",
+        disableA: false,
+        disableB: false,
+        disableC: true,
+      }}
+    >
+      <ControlledInputField name="url" />
+      <ControlledInputField name="option" />
+      <ControlledInputField name="anotherOption" />
+      <ControlledCheckboxField name="disableA" />
+      <ControlledCheckboxField name="disableB" />
+      <ControlledCheckboxField name="disableC" />
+    </Form>
+  ))
+  .add("ReadOnly", () => (
+    <Form
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{
+        name: "trillian",
+        password: "secret",
+        active: true,
+      }}
+      readOnly
+    >
+      <FormRow>
+        <ControlledInputField name="name" />
+      </FormRow>
+      <FormRow>
+        <ControlledSecretConfirmationField name="password" />
+      </FormRow>
+      <FormRow>
+        <ControlledCheckboxField name="active" />
+      </FormRow>
+    </Form>
+  ))
+  .add("Nested", () => (
+    <Form
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{
+        webhooks: [
+          {
+            urlPattern: "https://hitchhiker.com",
+            executeOnEveryCommit: false,
+            sendCommitData: false,
+            method: "post",
+            headers: [
+              {
+                key: "test",
+                value: "val",
+                concealed: false,
+              },
+              {
+                key: "secret",
+                value: "password",
+                concealed: true,
+              },
+            ],
+          },
+          {
+            urlPattern: "http://test.com",
+            executeOnEveryCommit: false,
+            sendCommitData: false,
+            method: "get",
+            headers: [
+              {
+                key: "other",
+                value: "thing",
+                concealed: true,
+              },
+              {
+                key: "stuff",
+                value: "haha",
+                concealed: false,
+              },
+            ],
+          },
+        ],
+      }}
+    >
+      <ScmFormListContextProvider name="webhooks">
+        <ControlledList withDelete>
+          {({ value: webhook }) => (
+            <>
+              <FormRow>
+                <ControlledSelectField name="method">
+                  {["post", "get", "put"].map((value) => (
+                    <option value={value} key={value}>
+                      {value}
+                    </option>
+                  ))}
+                </ControlledSelectField>
+                <ControlledInputField name="urlPattern" />
+              </FormRow>
+              <FormRow>
+                <ControlledCheckboxField name="executeOnEveryCommit" />
+              </FormRow>
+              <FormRow>
+                <ControlledCheckboxField name="sendCommitData" />
+              </FormRow>
+              <details className="has-background-dark-25 mb-2 p-2">
+                <summary className="is-clickable">Headers</summary>
+                <div>
+                  <ScmFormListContextProvider name="headers">
+                    <ControlledTable withDelete>
+                      <ControlledColumn name="key" />
+                      <ControlledColumn name="value" />
+                      <ControlledColumn name="concealed">{(value) => (value ? <b>Hallo</b> : null)}</ControlledColumn>
+                    </ControlledTable>
+                    <AddListEntryForm defaultValues={{ key: "", value: "", concealed: false }}>
+                      <ControlledInputField
+                        name="key"
+                        rules={{
+                          validate: (newKey) =>
+                            !(webhook as SimpleWebHookConfiguration).headers.some(({ key }) => newKey === key),
+                          required: true,
+                        }}
+                      />
+                      <ControlledInputField name="value" />
+                      <ControlledCheckboxField name="concealed" />
+                    </AddListEntryForm>
+                  </ScmFormListContextProvider>
+                </div>
+              </details>
+            </>
+          )}
+        </ControlledList>
+      </ScmFormListContextProvider>
+    </Form>
+  ));

package/src/Form.tsx

@@ -28,12 +28,7 @@ import { ErrorNotification, Level } from "@scm-manager/ui-components";
 import { ScmFormContextProvider } from "./ScmFormContext";
 import { useTranslation } from "react-i18next";
 import { Button } from "@scm-manager/ui-buttons";
-import FormRow from "./FormRow";
-import ControlledInputField from "./input/ControlledInputField";
-import ControlledCheckboxField from "./checkbox/ControlledCheckboxField";
-import ControlledSecretConfirmationField from "./input/ControlledSecretConfirmationField";
 import { HalRepresentation } from "@scm-manager/ui-types";
-import ControlledSelectField from "./select/ControlledSelectField";
 
 type RenderProps<T extends Record<string, unknown>> = Omit<
   UseFormReturn<T>,
@@ -81,9 +76,24 @@ function Form<FormType extends Record<string, unknown>, DefaultValues extends Fo
   const { formState, handleSubmit, reset } = form;
   const [ns, prefix] = translationPath;
   const { t } = useTranslation(ns, { keyPrefix: prefix });
+  const [defaultTranslate] = useTranslation("commons", { keyPrefix: "form" });
+  const translateWithFallback = useCallback<typeof t>(
+    (key, ...args) => {
+      const translation = t(key, ...(args as any));
+      if (translation === `${prefix}.${key}`) {
+        return "";
+      }
+      return translation;
+    },
+    [prefix, t]
+  );
   const { isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState;
   const [error, setError] = useState<Error | null | undefined>();
   const [showSuccessNotification, setShowSuccessNotification] = useState(false);
+  const submitButtonLabel = t("submit", { defaultValue: defaultTranslate("submit") });
+  const successNotification = translateWithFallback("submit-success-notification", {
+    defaultValue: defaultTranslate("submit-success-notification"),
+  });
 
   // See https://react-hook-form.com/api/useform/reset/
   useEffect(() => {
@@ -100,17 +110,6 @@ function Form<FormType extends Record<string, unknown>, DefaultValues extends Fo
     }
   }, [isDirty]);
 
-  const translateWithFallback = useCallback<typeof t>(
-    (key, ...args) => {
-      const translation = t(key, ...(args as any));
-      if (translation === `${prefix}.${key}`) {
-        return "";
-      }
-      return translation;
-    },
-    [prefix, t]
-  );
-
   const submit = useCallback(
     async (data) => {
       setError(null);
@@ -128,40 +127,31 @@ function Form<FormType extends Record<string, unknown>, DefaultValues extends Fo
   );
 
   return (
-    <ScmFormContextProvider {...form} readOnly={isSubmitting || readOnly} t={translateWithFallback}>
-      <form onSubmit={handleSubmit(submit)}>
-        {showSuccessNotification ? (
-          <SuccessNotification
-            label={translateWithFallback("submit-success-notification")}
-            hide={() => setShowSuccessNotification(false)}
-          />
-        ) : null}
-        {typeof children === "function" ? children(form) : children}
-        {error ? <ErrorNotification error={error} /> : null}
-        {!readOnly ? (
-          <Level
-            right={
-              <Button
-                type="submit"
-                variant="primary"
-                testId={submitButtonTestId ?? "submit-button"}
-                disabled={!isDirty || !isValid}
-                isLoading={isSubmitting}
-              >
-                {t("submit")}
-              </Button>
-            }
-          />
-        ) : null}
-      </form>
+    <ScmFormContextProvider {...form} readOnly={isSubmitting || readOnly} t={translateWithFallback} formId={prefix}>
+      <form onSubmit={handleSubmit(submit)} id={prefix}></form>
+      {showSuccessNotification ? (
+        <SuccessNotification label={successNotification} hide={() => setShowSuccessNotification(false)} />
+      ) : null}
+      {typeof children === "function" ? children(form) : children}
+      {error ? <ErrorNotification error={error} /> : null}
+      {!readOnly ? (
+        <Level
+          right={
+            <Button
+              type="submit"
+              variant="primary"
+              testId={submitButtonTestId ?? "submit-button"}
+              disabled={!isDirty || !isValid}
+              isLoading={isSubmitting}
+              form={prefix}
+            >
+              {submitButtonLabel}
+            </Button>
+          }
+        />
+      ) : null}
     </ScmFormContextProvider>
   );
 }
 
-export default Object.assign(Form, {
-  Row: FormRow,
-  Input: ControlledInputField,
-  Checkbox: ControlledCheckboxField,
-  SecretConfirmation: ControlledSecretConfirmationField,
-  Select: ControlledSelectField,
-});
+export default Form;

package/src/FormPathContext.tsx

@@ -0,0 +1,73 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useContext, useMemo } from "react";
+
+const ScmFormPathContext = React.createContext<string>("");
+
+export function useScmFormPathContext() {
+  return useContext(ScmFormPathContext);
+}
+
+export const ScmFormPathContextProvider: FC<{ path: string }> = ({ children, path }) => (
+  <ScmFormPathContext.Provider value={path}>{children}</ScmFormPathContext.Provider>
+);
+
+/**
+ * This component removes redundancy by declaring a prefix that is shared by all enclosed form-related components.
+ * It might be helpful when the data structure of a list's items does not correspond with the individual list item's
+ * form structure.
+ *
+ * @beta
+ * @since 2.43.0
+ * @example ```
+ * // For data of structure
+ *    {
+ *       subForm: { foo: boolean, bar: string };
+ *       flag: boolean;
+ *       tag: string;
+ *    }
+ * // Because we use ConfigurationForm we get and update the whole object.
+ * // We only want to create a form for 'subForm' without having to repeat it for every subField
+ * // while keeping the original data structure for the whole form. *
+ *
+ * // Using this component we can write:
+ * <Form.PathContext path="subForm">
+ *   <Form.Input name="foo" />
+ *   <Form.Checkbox name="bar" />
+ * </Form.PathContext>
+ *
+ * // Instead of
+ *
+ * <Form.Input name="subForm.foo" />
+ * <Form.Checkbox name="subForm.bar" />
+ *
+ * // This pattern becomes useful in complex or large forms.
+ * ```
+ */
+export const ScmNestedFormPathContextProvider: FC<{ path: string }> = ({ children, path }) => {
+  const prefix = useScmFormPathContext();
+  const pathWithPrefix = useMemo(() => (prefix ? `${prefix}.${path}` : path), [path, prefix]);
+  return <ScmFormPathContext.Provider value={pathWithPrefix}>{children}</ScmFormPathContext.Provider>;
+};

package/src/FormRow.tsx

@@ -24,13 +24,26 @@
 
 import React, { HTMLProps } from "react";
 import classNames from "classnames";
+import styled from "styled-components";
+
+const FormRowDiv = styled.div`
+  .field {
+    margin-left: 0;
+  }
+
+  gap: 1rem;
+
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
 
 const FormRow = React.forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
   ({ className, children, hidden, ...rest }, ref) =>
     hidden ? null : (
-      <div ref={ref} className={classNames("columns", className)} {...rest}>
+      <FormRowDiv ref={ref} className={classNames("is-flex is-flex-wrap-wrap", className)} {...rest}>
         {children}
-      </div>
+      </FormRowDiv>
     )
 );