fix: inline forms layout

- fixes node name edit forms layout when displayed in the title
canonical · Mar 20, 2024 · b9b0ec5 · b9b0ec5
1 parent 6dc7b2e
commit b9b0ec5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 30 deletions.
diff --git a/src/app/base/components/FormikFormContent/FormikFormContent.test.tsx b/src/app/base/components/FormikFormContent/FormikFormContent.test.tsx
@@ -21,6 +21,7 @@ import {
   render,
   screen,
   renderWithBrowserRouter,
+  renderWithMockStore,
 } from "@/testing/utils";
 
 const mockStore = configureStore<RootState>();
@@ -497,4 +498,21 @@ describe("FormikFormContent", () => {
 
     expect(screen.getByTestId("footer")).toBeInTheDocument();
   });
+
+  it("renders inline form correctly when inline prop is true", () => {
+    renderWithMockStore(
+      <Formik initialValues={{}} onSubmit={vi.fn()}>
+        <FormikFormContent aria-label="inline form" inline>
+          <Field aria-label="test field" name="testField" />
+        </FormikFormContent>
+      </Formik>
+    );
+
+    expect(screen.getByRole("form", { name: "inline form" })).toHaveClass(
+      "p-form--inline"
+    );
+    expect(
+      screen.getByRole("textbox", { name: "test field" })
+    ).toBeInTheDocument();
+  });
 });
diff --git a/src/app/base/components/FormikFormContent/FormikFormContent.tsx b/src/app/base/components/FormikFormContent/FormikFormContent.tsx
@@ -142,6 +142,7 @@ const FormikFormContent = <V extends object, E = null>({
   }, [onSuccess, hasErrors, hasSaved, values]);
 
   // Send an analytics event when form is saved.
+
   useSendAnalyticsWhen(
     saved,
     onSaveAnalytics.category,
@@ -167,44 +168,53 @@ const FormikFormContent = <V extends object, E = null>({
     }
   }, [navigate, savedRedirect, saved]);
 
+  const renderFormContent = () => (
+    <>
+      {!!nonFieldError && (
+        <Notification severity="negative" title="Error:">
+          {nonFieldError}
+        </Notification>
+      )}
+      {typeof children === "function" ? children(formikContext) : children}
+    </>
+  );
+
+  const renderFormButtons = () => (
+    <FormikFormButtons
+      {...buttonsProps}
+      buttonsBehavior={buttonsBehavior}
+      cancelDisabled={cancelDisabled === false ? false : saving}
+      inline={inline}
+      saved={saved}
+      saving={saving}
+      submitDisabled={loading || saving || formDisabled || submitDisabled}
+    />
+  );
+
   return (
     <Form
       aria-label={ariaLabel}
       className={className}
       inline={inline}
       onSubmit={handleSubmit}
     >
-      {/* collapse content section when there's no content */}
-      <ContentSection className={!children ? "u-no-padding--top" : undefined}>
-        <ContentSection.Content>
-          {!!nonFieldError && (
-            <Notification severity="negative" title="Error:">
-              {nonFieldError}
-            </Notification>
-          )}
-          {typeof children === "function"
-            ? children({ ...formikContext })
-            : children}
-        </ContentSection.Content>
-        <ContentSection.Footer
-          className={!children ? "u-no-margin--top" : undefined}
-        >
-          {editable && (
-            <FormikFormButtons
-              {...buttonsProps}
-              buttonsBehavior={buttonsBehavior}
-              cancelDisabled={cancelDisabled === false ? false : saving}
-              inline={inline}
-              saved={saved}
-              saving={saving}
-              submitDisabled={
-                loading || saving || formDisabled || submitDisabled
-              }
-            />
-          )}
+      {inline ? (
+        <>
+          {renderFormContent()}
+          {editable && renderFormButtons()}
           {footer}
-        </ContentSection.Footer>
-      </ContentSection>
+        </>
+      ) : (
+        <ContentSection className={!children ? "u-no-padding--top" : undefined}>
+          <ContentSection.Content>{renderFormContent()}</ContentSection.Content>
+          <ContentSection.Footer
+            className={!children ? "u-no-margin--top" : undefined}
+          >
+            {editable && renderFormButtons()}
+            {footer}
+          </ContentSection.Footer>
+        </ContentSection>
+      )}
     </Form>
   );
 };