task: JSONForm footer should always stick to bottom when fixed footer enabled (#13904)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/JSONFormWidget/JSONForm_Footer_spec.js

@@ -0,0 +1,86 @@
+const dslWithoutSchema = require("../../../../../fixtures/jsonFormDslWithoutSchema.json");
+const dslWithSchema = require("../../../../../fixtures/jsonFormDslWithSchema.json");
+
+describe("JSONForm Footer spec", () => {
+  it("sticks to the bottom when fixed footer is true and content is less", () => {
+    cy.addDsl(dslWithoutSchema);
+    // add small source data
+    const sourceData = {
+      name: "John",
+    };
+    cy.openPropertyPane("jsonformwidget");
+    cy.testJsontext("sourcedata", JSON.stringify(sourceData));
+
+    // check if fixed footer enabled
+    cy.get(".t--property-control-fixedfooter")
+      .find("label.bp3-control")
+      .should("have.class", "checked");
+
+    // Check if there is a gap between body and footer
+    cy.get(".t--jsonform-body").then(($body) => {
+      cy.get(".t--jsonform-footer").then(($footer) => {
+        const gap = $footer.prop("offsetTop") - $body.prop("scrollHeight");
+
+        expect(gap).greaterThan(0);
+      });
+    });
+  });
+
+  it("sticks to the content when fixed footer is off", () => {
+    // Disable fixed footer
+    cy.togglebarDisable(".t--property-control-fixedfooter input");
+
+    // Check if there is a gap between body and footer
+    cy.get(".t--jsonform-body").then(($body) => {
+      cy.get(".t--jsonform-footer").then(($footer) => {
+        const gap = $footer.prop("offsetTop") - $body.prop("scrollHeight");
+
+        expect(gap).equals(0);
+      });
+    });
+  });
+
+  it("floats to the bottom when fixed footer is true and content overflows", () => {
+    cy.addDsl(dslWithSchema);
+
+    cy.openPropertyPane("jsonformwidget");
+
+    // check if fixed footer enabled
+    cy.get(".t--property-control-fixedfooter")
+      .find("label.bp3-control")
+      .should("have.class", "checked");
+
+    // Check if footer is floating
+    cy.get(".t--draggable-jsonformwidget")
+      .find("form")
+      .then(($form) => {
+        cy.get(".t--jsonform-footer").then(($footer) => {
+          const gap =
+            $footer.prop("offsetTop") +
+            $footer.prop("offsetHeight") -
+            $form.prop("offsetHeight");
+
+          expect(gap).equals(0);
+        });
+      });
+  });
+
+  it("floats to the bottom when fixed footer is false and content overflows", () => {
+    // Disable fixed footer
+    cy.togglebarDisable(".t--property-control-fixedfooter input");
+
+    // Check if footer is floating
+    cy.get(".t--draggable-jsonformwidget")
+      .find("form")
+      .then(($form) => {
+        cy.get(".t--jsonform-footer").then(($footer) => {
+          const gap =
+            $footer.prop("offsetTop") +
+            $footer.prop("offsetHeight") -
+            $form.prop("scrollHeight");
+
+          expect(gap).equals(0);
+        });
+      });
+  });
+});

app/client/src/widgets/JSONFormWidget/component/Form.tsx

@@ -42,6 +42,7 @@ export type FormProps<TValues = any> = PropsWithChildren<{
 }>;
 
 type StyledFormProps = {
+  fixedFooter: boolean;
   scrollContents: boolean;
 };
 
@@ -96,6 +97,7 @@ const StyledForm = styled.form<StyledFormProps>`
   display: flex;
   flex-direction: column;
   height: 100%;
+  justify-content: ${({ fixedFooter }) => fixedFooter && "space-between"};
   overflow-y: ${({ scrollContents }) => (scrollContents ? "auto" : "hidden")};
 `;
 
@@ -260,14 +262,22 @@ function Form<TValues = any>({
 
   return (
     <FormProvider {...methods}>
-      <StyledForm ref={bodyRef} scrollContents={scrollContents}>
+      <StyledForm
-        <StyledFormBody stretchBodyVertically={stretchBodyVertically}>
+        fixedFooter={fixedFooter}
+        ref={bodyRef}
+        scrollContents={scrollContents}
+      >
+        <StyledFormBody
+          className="t--jsonform-body"
+          stretchBodyVertically={stretchBodyVertically}
+        >
           <StyledTitle>{title}</StyledTitle>
           {children}
         </StyledFormBody>
         {!hideFooter && (
           <StyledFormFooter
             backgroundColor={backgroundColor}
+            className="t--jsonform-footer"
             fixedFooter={fixedFooter}
             ref={footerRef}
           >