Submit form on Enter press (#5419)

clients/admin-ui/cypress/e2e/datamap-report.cy.ts

@@ -299,6 +299,15 @@ describe("Data map report table", () => {
         cy.getByTestId("rename-columns-reset-btn").click({ force: true });
         cy.getByTestId("column-data_use").should("contain.text", "Data use");
       });
+      it("should support pressing the Enter key to apply renamed columns", () => {
+        cy.getByTestId("more-menu").click();
+        cy.getByTestId("rename-columns-btn").click();
+        cy.getByTestId("column-data_use-input").type("Custom Title{enter}");
+        cy.getByTestId("column-data_use").should(
+          "contain.text",
+          "Custom Title",
+        );
+      });
     });
   });
 
@@ -351,7 +360,6 @@ describe("Data map report table", () => {
       }).as("getEmptyCustomReports");
       cy.getByTestId("custom-reports-trigger").click();
       cy.getByTestId("custom-reports-popover").should("be.visible");
-      cy.wait("@getEmptyCustomReports");
       cy.getByTestId("custom-reports-empty-state").should("be.visible");
     });
     it("should list the available reports in the popover", () => {

clients/admin-ui/src/features/common/table/v2/cells.tsx

@@ -19,7 +19,7 @@ import {
   useToast,
   WarningIcon,
 } from "fidesui";
-import { useField } from "formik";
+import { useField, useFormikContext } from "formik";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
@@ -333,6 +333,7 @@ export const EditableHeaderCell = <T,>({
 }) => {
   const headerId = props.column.columnDef.id || "";
   const [field] = useField(headerId);
+  const { submitForm } = useFormikContext();
   return isEditing ? (
     <Input
       {...field}
@@ -341,6 +342,7 @@ export const EditableHeaderCell = <T,>({
       aria-label="Edit column name"
       size="small"
       data-testid={`column-${headerId}-input`}
+      onPressEnter={submitForm}
     />
   ) : (
     <DefaultHeaderCell value={value} {...props} />