From 587ee0d9d5b62e186ca02b302f641439c5a9acfe Mon Sep 17 00:00:00 2001
From: Hein Jeong <heinje@amazon.com>
Date: Thu, 22 Sep 2022 21:16:49 +0000
Subject: [PATCH] chore: differentiate reset for datastore update form

---
 ...studio-ui-codegen-react-forms.test.ts.snap | 397 +++++++++++-------
 .../lib/forms/form-renderer-helper.ts         |  49 +--
 .../codegen-ui-react/lib/forms/form-state.ts  | 131 ++++--
 .../lib/forms/react-form-renderer.ts          |  46 +-
 .../helpers/map-cta.test.ts                   |  27 ++
 .../generate-form-definition.ts               |   2 +-
 .../helpers/defaults.ts                       |  14 -
 .../helpers/map-cta.ts                        |  64 ++-
 .../helpers/map-cta-buttons.ts                |  69 ++-
 9 files changed, 494 insertions(+), 305 deletions(-)
 create mode 100644 packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/map-cta.test.ts

diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
index d3f4d8c3c..1489cca3d 100644
--- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
+++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -18,18 +18,25 @@ import {
 export default function CustomDataForm(props) {
   const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
     props;
-  const [name, setName] = React.useState(undefined);
-  const [email, setEmail] = React.useState(undefined);
-  const [city, setCity] = React.useState(undefined);
-  const [category, setCategory] = React.useState(undefined);
-  const [pages, setPages] = React.useState(0);
+  const initialValues = {
+    name: undefined,
+    email: undefined,
+    city: undefined,
+    category: undefined,
+    pages: 0,
+  };
+  const [name, setName] = React.useState(initialValues.name);
+  const [email, setEmail] = React.useState(initialValues.email);
+  const [city, setCity] = React.useState(initialValues.city);
+  const [category, setCategory] = React.useState(initialValues.category);
+  const [pages, setPages] = React.useState(initialValues.pages);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setName(undefined);
-    setEmail(undefined);
-    setCity(undefined);
-    setCategory(undefined);
-    setPages(0);
+    setName(initialValues.name);
+    setEmail(initialValues.email);
+    setCity(initialValues.city);
+    setCategory(initialValues.category);
+    setPages(initialValues.pages);
     setErrors({});
   };
   const validations = {
@@ -264,7 +271,7 @@ export default function CustomDataForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"go back\\"
             type=\\"button\\"
@@ -344,18 +351,25 @@ import {
 export default function CustomDataForm(props) {
   const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
     props;
-  const [name, setName] = React.useState(undefined);
-  const [email, setEmail] = React.useState(undefined);
-  const [city, setCity] = React.useState(undefined);
-  const [category, setCategory] = React.useState(undefined);
-  const [pages, setPages] = React.useState(0);
+  const initialValues = {
+    name: undefined,
+    email: undefined,
+    city: undefined,
+    category: undefined,
+    pages: 0,
+  };
+  const [name, setName] = React.useState(initialValues.name);
+  const [email, setEmail] = React.useState(initialValues.email);
+  const [city, setCity] = React.useState(initialValues.city);
+  const [category, setCategory] = React.useState(initialValues.category);
+  const [pages, setPages] = React.useState(initialValues.pages);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setName(undefined);
-    setEmail(undefined);
-    setCity(undefined);
-    setCategory(undefined);
-    setPages(0);
+    setName(initialValues.name);
+    setEmail(initialValues.email);
+    setCity(initialValues.city);
+    setCategory(initialValues.category);
+    setPages(initialValues.pages);
     setErrors({});
   };
   React.useEffect(() => {
@@ -600,9 +614,9 @@ export default function CustomDataForm(props) {
           children=\\"empty\\"
           type=\\"reset\\"
           onClick={resetStateValues}
-          {...getOverrideProps(overrides, \\"ClearButton\\")}
+          {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"go back\\"
             type=\\"button\\"
@@ -810,13 +824,17 @@ function ArrayField({
 export default function CustomDataForm(props) {
   const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
     props;
-  const [name, setName] = React.useState(undefined);
-  const [email, setEmail] = React.useState(undefined);
+  const initialValues = {
+    name: undefined,
+    email: undefined,
+  };
+  const [name, setName] = React.useState(initialValues.name);
+  const [email, setEmail] = React.useState(initialValues.email);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setName(undefined);
-    setEmail(undefined);
-    setCurrentEmailValue(undefined);
+    setName(initialValues.name);
+    setEmail(initialValues.email);
+    setCurrentEmailValue(\\"\\");
     setErrors({});
   };
   const [currentEmailValue, setCurrentEmailValue] = React.useState(\\"\\");
@@ -943,7 +961,7 @@ export default function CustomDataForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"go back\\"
             type=\\"button\\"
@@ -1154,19 +1172,28 @@ export default function MyPostForm(props) {
     overrides,
     ...rest
   } = props;
-  const [username, setUsername] = React.useState(undefined);
-  const [caption, setCaption] = React.useState(undefined);
-  const [Customtags, setCustomtags] = React.useState(undefined);
-  const [post_url, setPost_url] = React.useState(undefined);
-  const [profile_url, setProfile_url] = React.useState(undefined);
+  const initialValues = {
+    username: undefined,
+    caption: undefined,
+    Customtags: undefined,
+    post_url: undefined,
+    profile_url: undefined,
+  };
+  const [username, setUsername] = React.useState(initialValues.username);
+  const [caption, setCaption] = React.useState(initialValues.caption);
+  const [Customtags, setCustomtags] = React.useState(initialValues.Customtags);
+  const [post_url, setPost_url] = React.useState(initialValues.post_url);
+  const [profile_url, setProfile_url] = React.useState(
+    initialValues.profile_url
+  );
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setUsername(undefined);
-    setCaption(undefined);
-    setCustomtags(undefined);
-    setCurrentCustomtagsValue(undefined);
-    setPost_url(undefined);
-    setProfile_url(undefined);
+    setUsername(initialValues.username);
+    setCaption(initialValues.caption);
+    setCustomtags(initialValues.Customtags);
+    setCurrentCustomtagsValue(\\"\\");
+    setPost_url(initialValues.post_url);
+    setProfile_url(initialValues.profile_url);
     setErrors({});
   };
   const [currentCustomtagsValue, setCurrentCustomtagsValue] =
@@ -1255,7 +1282,7 @@ export default function MyPostForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -1497,14 +1524,19 @@ export default function NestedJson(props) {
   const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
     props;
   const { tokens } = useTheme();
-  const [firstName, setFirstName] = React.useState(undefined);
-  const [lastName, setLastName] = React.useState(undefined);
-  const [bio, setBio] = React.useState({});
+  const initialValues = {
+    firstName: undefined,
+    lastName: undefined,
+    bio: {},
+  };
+  const [firstName, setFirstName] = React.useState(initialValues.firstName);
+  const [lastName, setLastName] = React.useState(initialValues.lastName);
+  const [bio, setBio] = React.useState(initialValues.bio);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setFirstName(undefined);
-    setLastName(undefined);
-    setBio({});
+    setFirstName(initialValues.firstName);
+    setLastName(initialValues.lastName);
+    setBio(initialValues.bio);
     setErrors({});
   };
   const validations = {
@@ -1670,7 +1702,7 @@ export default function NestedJson(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -1742,14 +1774,19 @@ import { Button, Flex, Grid, Heading, TextField } from \\"@aws-amplify/ui-react\
 export default function NestedJson(props) {
   const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
     props;
-  const [firstName, setFirstName] = React.useState(undefined);
-  const [lastName, setLastName] = React.useState(undefined);
-  const [bio, setBio] = React.useState({});
+  const initialValues = {
+    firstName: undefined,
+    lastName: undefined,
+    bio: {},
+  };
+  const [firstName, setFirstName] = React.useState(initialValues.firstName);
+  const [lastName, setLastName] = React.useState(initialValues.lastName);
+  const [bio, setBio] = React.useState(initialValues.bio);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setFirstName(undefined);
-    setLastName(undefined);
-    setBio({});
+    setFirstName(initialValues.firstName);
+    setLastName(initialValues.lastName);
+    setBio(initialValues.bio);
     setErrors({});
   };
   React.useEffect(() => {
@@ -1921,12 +1958,12 @@ export default function NestedJson(props) {
         {...getOverrideProps(overrides, \\"CTAFlex\\")}
       >
         <Button
-          children=\\"Clear\\"
+          children=\\"Reset\\"
           type=\\"reset\\"
           onClick={resetStateValues}
-          {...getOverrideProps(overrides, \\"ClearButton\\")}
+          {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2007,10 +2044,13 @@ import {
 export default function CustomWithSectionalElements(props) {
   const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
     props;
-  const [name, setName] = React.useState(undefined);
+  const initialValues = {
+    name: undefined,
+  };
+  const [name, setName] = React.useState(initialValues.name);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setName(undefined);
+    setName(initialValues.name);
     setErrors({});
   };
   const validations = {
@@ -2104,7 +2144,7 @@ export default function CustomWithSectionalElements(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2180,16 +2220,24 @@ export default function MyPostForm(props) {
     overrides,
     ...rest
   } = props;
-  const [caption, setCaption] = React.useState(undefined);
-  const [username, setUsername] = React.useState(undefined);
-  const [post_url, setPost_url] = React.useState(undefined);
-  const [profile_url, setProfile_url] = React.useState(undefined);
+  const initialValues = {
+    caption: undefined,
+    username: undefined,
+    post_url: undefined,
+    profile_url: undefined,
+  };
+  const [caption, setCaption] = React.useState(initialValues.caption);
+  const [username, setUsername] = React.useState(initialValues.username);
+  const [post_url, setPost_url] = React.useState(initialValues.post_url);
+  const [profile_url, setProfile_url] = React.useState(
+    initialValues.profile_url
+  );
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setCaption(undefined);
-    setUsername(undefined);
-    setPost_url(undefined);
-    setProfile_url(undefined);
+    setCaption(initialValues.caption);
+    setUsername(initialValues.username);
+    setPost_url(initialValues.post_url);
+    setProfile_url(initialValues.profile_url);
     setErrors({});
   };
   const validations = {
@@ -2267,7 +2315,7 @@ export default function MyPostForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2460,36 +2508,41 @@ export default function MyPostForm(props) {
     overrides,
     ...rest
   } = props;
-  const [TextAreaFieldbbd63464, setTextAreaFieldbbd63464] =
-    React.useState(undefined);
-  const [caption, setCaption] = React.useState(undefined);
-  const [username, setUsername] = React.useState(undefined);
-  const [profile_url, setProfile_url] = React.useState(undefined);
-  const [post_url, setPost_url] = React.useState(undefined);
+  const initialValues = {
+    TextAreaFieldbbd63464: undefined,
+    caption: undefined,
+    username: undefined,
+    profile_url: undefined,
+    post_url: undefined,
+  };
+  const [TextAreaFieldbbd63464, setTextAreaFieldbbd63464] = React.useState(
+    initialValues.TextAreaFieldbbd63464
+  );
+  const [caption, setCaption] = React.useState(initialValues.caption);
+  const [username, setUsername] = React.useState(initialValues.username);
+  const [profile_url, setProfile_url] = React.useState(
+    initialValues.profile_url
+  );
+  const [post_url, setPost_url] = React.useState(initialValues.post_url);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setTextAreaFieldbbd63464(undefined);
-    setCaption(undefined);
-    setUsername(undefined);
-    setProfile_url(undefined);
-    setPost_url(undefined);
+    const cleanValues = { ...initialValues, ...postRecord };
+    setTextAreaFieldbbd63464(cleanValues.TextAreaFieldbbd63464);
+    setCaption(cleanValues.caption);
+    setUsername(cleanValues.username);
+    setProfile_url(cleanValues.profile_url);
+    setPost_url(cleanValues.post_url);
     setErrors({});
   };
   const [postRecord, setPostRecord] = React.useState(post);
   React.useEffect(() => {
     const queryData = async () => {
       const record = id ? await DataStore.query(Post, id) : post;
-      if (record) {
-        setPostRecord(record);
-        setTextAreaFieldbbd63464(record.TextAreaFieldbbd63464);
-        setCaption(record.caption);
-        setUsername(record.username);
-        setProfile_url(record.profile_url);
-        setPost_url(record.post_url);
-      }
+      setPostRecord(record);
     };
     queryData();
   }, [id, post]);
+  React.useEffect(resetStateValues, [postRecord]);
   const validations = {
     TextAreaFieldbbd63464: [],
     caption: [],
@@ -2566,12 +2619,12 @@ export default function MyPostForm(props) {
         {...getOverrideProps(overrides, \\"CTAFlex\\")}
       >
         <Button
-          children=\\"Clear\\"
+          children=\\"Reset\\"
           type=\\"reset\\"
           onClick={resetStateValues}
-          {...getOverrideProps(overrides, \\"ClearButton\\")}
+          {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2734,12 +2787,12 @@ export default function MyPostForm(props) {
         {...getOverrideProps(overrides, \\"CTAFlex\\")}
       >
         <Button
-          children=\\"Clear\\"
+          children=\\"Reset\\"
           type=\\"reset\\"
           onClick={resetStateValues}
-          {...getOverrideProps(overrides, \\"ClearButton\\")}
+          {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2965,27 +3018,40 @@ export default function InputGalleryCreateForm(props) {
     overrides,
     ...rest
   } = props;
-  const [num, setNum] = React.useState(undefined);
-  const [rootbeer, setRootbeer] = React.useState(undefined);
-  const [attend, setAttend] = React.useState(undefined);
-  const [maybeSlide, setMaybeSlide] = React.useState(false);
-  const [maybeCheck, setMaybeCheck] = React.useState(undefined);
-  const [arrayTypeField, setArrayTypeField] = React.useState(undefined);
-  const [timestamp, setTimestamp] = React.useState(undefined);
-  const [ippy, setIppy] = React.useState(undefined);
-  const [timeisnow, setTimeisnow] = React.useState(undefined);
+  const initialValues = {
+    num: undefined,
+    rootbeer: undefined,
+    attend: undefined,
+    maybeSlide: false,
+    maybeCheck: undefined,
+    arrayTypeField: undefined,
+    timestamp: undefined,
+    ippy: undefined,
+    timeisnow: undefined,
+  };
+  const [num, setNum] = React.useState(initialValues.num);
+  const [rootbeer, setRootbeer] = React.useState(initialValues.rootbeer);
+  const [attend, setAttend] = React.useState(initialValues.attend);
+  const [maybeSlide, setMaybeSlide] = React.useState(initialValues.maybeSlide);
+  const [maybeCheck, setMaybeCheck] = React.useState(initialValues.maybeCheck);
+  const [arrayTypeField, setArrayTypeField] = React.useState(
+    initialValues.arrayTypeField
+  );
+  const [timestamp, setTimestamp] = React.useState(initialValues.timestamp);
+  const [ippy, setIppy] = React.useState(initialValues.ippy);
+  const [timeisnow, setTimeisnow] = React.useState(initialValues.timeisnow);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setNum(undefined);
-    setRootbeer(undefined);
-    setAttend(undefined);
-    setMaybeSlide(false);
-    setMaybeCheck(undefined);
-    setArrayTypeField(undefined);
-    setCurrentArrayTypeFieldValue(undefined);
-    setTimestamp(undefined);
-    setIppy(undefined);
-    setTimeisnow(undefined);
+    setNum(initialValues.num);
+    setRootbeer(initialValues.rootbeer);
+    setAttend(initialValues.attend);
+    setMaybeSlide(initialValues.maybeSlide);
+    setMaybeCheck(initialValues.maybeCheck);
+    setArrayTypeField(initialValues.arrayTypeField);
+    setCurrentArrayTypeFieldValue(\\"\\");
+    setTimestamp(initialValues.timestamp);
+    setIppy(initialValues.ippy);
+    setTimeisnow(initialValues.timeisnow);
     setErrors({});
   };
   const [currentArrayTypeFieldValue, setCurrentArrayTypeFieldValue] =
@@ -3391,7 +3457,7 @@ export default function InputGalleryCreateForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -3624,27 +3690,41 @@ export default function InputGalleryCreateForm(props) {
     overrides,
     ...rest
   } = props;
-  const [num, setNum] = React.useState(undefined);
-  const [rootbeer, setRootbeer] = React.useState(undefined);
-  const [attend, setAttend] = React.useState(undefined);
-  const [maybeSlide, setMaybeSlide] = React.useState(false);
-  const [maybeCheck, setMaybeCheck] = React.useState(undefined);
-  const [arrayTypeField, setArrayTypeField] = React.useState(undefined);
-  const [timestamp, setTimestamp] = React.useState(undefined);
-  const [ippy, setIppy] = React.useState(undefined);
-  const [timeisnow, setTimeisnow] = React.useState(undefined);
+  const initialValues = {
+    num: undefined,
+    rootbeer: undefined,
+    attend: undefined,
+    maybeSlide: false,
+    maybeCheck: undefined,
+    arrayTypeField: undefined,
+    timestamp: undefined,
+    ippy: undefined,
+    timeisnow: undefined,
+  };
+  const [num, setNum] = React.useState(initialValues.num);
+  const [rootbeer, setRootbeer] = React.useState(initialValues.rootbeer);
+  const [attend, setAttend] = React.useState(initialValues.attend);
+  const [maybeSlide, setMaybeSlide] = React.useState(initialValues.maybeSlide);
+  const [maybeCheck, setMaybeCheck] = React.useState(initialValues.maybeCheck);
+  const [arrayTypeField, setArrayTypeField] = React.useState(
+    initialValues.arrayTypeField
+  );
+  const [timestamp, setTimestamp] = React.useState(initialValues.timestamp);
+  const [ippy, setIppy] = React.useState(initialValues.ippy);
+  const [timeisnow, setTimeisnow] = React.useState(initialValues.timeisnow);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setNum(undefined);
-    setRootbeer(undefined);
-    setAttend(undefined);
-    setMaybeSlide(false);
-    setMaybeCheck(undefined);
-    setArrayTypeField(undefined);
-    setCurrentArrayTypeFieldValue(undefined);
-    setTimestamp(undefined);
-    setIppy(undefined);
-    setTimeisnow(undefined);
+    const cleanValues = { ...initialValues, ...inputGalleryRecord };
+    setNum(cleanValues.num);
+    setRootbeer(cleanValues.rootbeer);
+    setAttend(cleanValues.attend);
+    setMaybeSlide(cleanValues.maybeSlide);
+    setMaybeCheck(cleanValues.maybeCheck);
+    setArrayTypeField(cleanValues.arrayTypeField);
+    setCurrentArrayTypeFieldValue(\\"\\");
+    setTimestamp(cleanValues.timestamp);
+    setIppy(cleanValues.ippy);
+    setTimeisnow(cleanValues.timeisnow);
     setErrors({});
   };
   const [inputGalleryRecord, setInputGalleryRecord] =
@@ -3654,21 +3734,11 @@ export default function InputGalleryCreateForm(props) {
       const record = id
         ? await DataStore.query(InputGallery, id)
         : inputGallery;
-      if (record) {
-        setInputGalleryRecord(record);
-        setNum(record.num);
-        setRootbeer(record.rootbeer);
-        setAttend(record.attend);
-        setMaybeSlide(record.maybeSlide);
-        setMaybeCheck(record.maybeCheck);
-        setArrayTypeField(record.arrayTypeField);
-        setTimestamp(record.timestamp);
-        setIppy(record.ippy);
-        setTimeisnow(record.timeisnow);
-      }
+      setInputGalleryRecord(record);
     };
     queryData();
   }, [id, inputGallery]);
+  React.useEffect(resetStateValues, [inputGalleryRecord]);
   const [currentArrayTypeFieldValue, setCurrentArrayTypeFieldValue] =
     React.useState(\\"\\");
   const arrayTypeFieldRef = React.createRef();
@@ -4079,12 +4149,12 @@ export default function InputGalleryCreateForm(props) {
         {...getOverrideProps(overrides, \\"CTAFlex\\")}
       >
         <Button
-          children=\\"Clear\\"
+          children=\\"Reset\\"
           type=\\"reset\\"
           onClick={resetStateValues}
-          {...getOverrideProps(overrides, \\"ClearButton\\")}
+          {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -4184,18 +4254,27 @@ export default function PostCreateFormRow(props) {
     overrides,
     ...rest
   } = props;
-  const [username, setUsername] = React.useState(undefined);
-  const [caption, setCaption] = React.useState(undefined);
-  const [post_url, setPost_url] = React.useState(undefined);
-  const [profile_url, setProfile_url] = React.useState(undefined);
-  const [status, setStatus] = React.useState(undefined);
+  const initialValues = {
+    username: undefined,
+    caption: undefined,
+    post_url: undefined,
+    profile_url: undefined,
+    status: undefined,
+  };
+  const [username, setUsername] = React.useState(initialValues.username);
+  const [caption, setCaption] = React.useState(initialValues.caption);
+  const [post_url, setPost_url] = React.useState(initialValues.post_url);
+  const [profile_url, setProfile_url] = React.useState(
+    initialValues.profile_url
+  );
+  const [status, setStatus] = React.useState(initialValues.status);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    setUsername(undefined);
-    setCaption(undefined);
-    setPost_url(undefined);
-    setProfile_url(undefined);
-    setStatus(undefined);
+    setUsername(initialValues.username);
+    setCaption(initialValues.caption);
+    setPost_url(initialValues.post_url);
+    setProfile_url(initialValues.profile_url);
+    setStatus(initialValues.status);
     setErrors({});
   };
   const validations = {
@@ -4427,7 +4506,7 @@ export default function PostCreateFormRow(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"SubmitAndResetFlex\\")}>
+        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
index 49491c9b1..154cfda52 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
@@ -45,6 +45,7 @@ import {
   capitalizeFirstLetter,
   getCurrentValueIdentifier,
   getCurrentValueName,
+  getSetNameIdentifier,
   resetValuesName,
   setFieldState,
   setStateExpression,
@@ -203,7 +204,7 @@ export const addFormAttributes = (component: StudioComponent | StudioComponentCh
       );
     }
   }
-  if (componentName === 'ClearButton') {
+  if (componentName === 'ClearButton' || componentName === 'ResetButton') {
     attributes.push(
       factory.createJsxAttribute(
         factory.createIdentifier('onClick'),
@@ -1112,33 +1113,6 @@ export const onSubmitValidationRun = [
   ),
 ];
 
-export const ifRecordDefinedExpression = (dataTypeName: string, fieldConfigs: Record<string, FieldConfigMetadata>) => {
-  return factory.createIfStatement(
-    factory.createIdentifier('record'),
-    factory.createBlock(
-      [
-        factory.createExpressionStatement(
-          factory.createCallExpression(factory.createIdentifier(`set${dataTypeName}Record`), undefined, [
-            factory.createIdentifier('record'),
-          ]),
-        ),
-        ...Object.keys(fieldConfigs).map((field) =>
-          factory.createExpressionStatement(
-            factory.createCallExpression(factory.createIdentifier(`set${capitalizeFirstLetter(field)}`), undefined, [
-              factory.createPropertyAccessExpression(
-                factory.createIdentifier('record'),
-                factory.createIdentifier(field),
-              ),
-            ]),
-          ),
-        ),
-      ],
-      true,
-    ),
-    undefined,
-  );
-};
-
 export const buildSetStateFunction = (fieldConfigs: Record<string, FieldConfigMetadata>) => {
   const fieldSet = new Set<string>();
   const expression = Object.keys(fieldConfigs).reduce<ExpressionStatement[]>((acc, field) => {
@@ -1161,7 +1135,18 @@ export const buildSetStateFunction = (fieldConfigs: Record<string, FieldConfigMe
   return factory.createIfStatement(factory.createIdentifier('initialData'), factory.createBlock(expression, true));
 };
 
-export const buildUpdateDatastoreQuery = (dataTypeName: string, fieldConfigs: Record<string, FieldConfigMetadata>) => {
+// ex. React.useEffect(resetStateValues, [bookRecord])
+export const buildResetValuesOnRecordUpdate = (recordName: string) => {
+  return factory.createExpressionStatement(
+    factory.createCallExpression(
+      factory.createPropertyAccessExpression(factory.createIdentifier('React'), factory.createIdentifier('useEffect')),
+      undefined,
+      [resetValuesName, factory.createArrayLiteralExpression([factory.createIdentifier(recordName)], false)],
+    ),
+  );
+};
+
+export const buildUpdateDatastoreQuery = (dataTypeName: string, recordName: string) => {
   // TODO: update this once cpk is supported in datastore
   const pkQueryIdentifier = factory.createIdentifier('id');
   return [
@@ -1210,7 +1195,11 @@ export const buildUpdateDatastoreQuery = (dataTypeName: string, fieldConfigs: Re
                       NodeFlags.Const,
                     ),
                   ),
-                  ifRecordDefinedExpression(dataTypeName, fieldConfigs),
+                  factory.createExpressionStatement(
+                    factory.createCallExpression(getSetNameIdentifier(recordName), undefined, [
+                      factory.createIdentifier('record'),
+                    ]),
+                  ),
                 ],
                 true,
               ),
diff --git a/packages/codegen-ui-react/lib/forms/form-state.ts b/packages/codegen-ui-react/lib/forms/form-state.ts
index 67383068a..8773aab62 100644
--- a/packages/codegen-ui-react/lib/forms/form-state.ts
+++ b/packages/codegen-ui-react/lib/forms/form-state.ts
@@ -24,6 +24,7 @@ import {
   SyntaxKind,
   ObjectLiteralExpression,
   CallExpression,
+  PropertyAssignment,
 } from 'typescript';
 
 export const getCurrentValueName = (fieldName: string) => `current${capitalizeFirstLetter(fieldName)}Value`;
@@ -72,20 +73,65 @@ export const getDefaultValueExpression = (
   }
   return factory.createIdentifier('undefined');
 };
+/* ex. const initialValues = {
+  name: undefined,
+  isChecked: false
+}
+*/
+export const getInitialValues = (fieldConfigs: Record<string, FieldConfigMetadata>): Statement => {
+  const stateNames = new Set<string>();
+  const propertyAssignments = Object.entries(fieldConfigs).reduce<PropertyAssignment[]>(
+    (acc, [name, { dataType, componentType }]) => {
+      const stateName = name.split('.')[0];
+      if (!stateNames.has(stateName)) {
+        acc.push(
+          factory.createPropertyAssignment(
+            factory.createIdentifier(stateName),
+            getDefaultValueExpression(name, componentType, dataType),
+          ),
+        );
+        stateNames.add(stateName);
+      }
+      return acc;
+    },
+    [],
+  );
+
+  return factory.createVariableStatement(
+    undefined,
+    factory.createVariableDeclarationList(
+      [
+        factory.createVariableDeclaration(
+          factory.createIdentifier('initialValues'),
+          undefined,
+          undefined,
+          factory.createObjectLiteralExpression(propertyAssignments, true),
+        ),
+      ],
+      NodeFlags.Const,
+    ),
+  );
+};
 
 /**
  * iterates field configs to create useState hooks for each field
- * populates the default values as undefined if it as a nested object, relationship model or nonModel
- * the default is an empty object
  * @param fieldConfigs
  * @returns
  */
 export const getUseStateHooks = (fieldConfigs: Record<string, FieldConfigMetadata>): Statement[] => {
   const stateNames = new Set<string>();
-  return Object.entries(fieldConfigs).reduce<Statement[]>((acc, [name, { dataType, componentType }]) => {
+  return Object.keys(fieldConfigs).reduce<Statement[]>((acc, name) => {
     const stateName = name.split('.')[0];
     if (!stateNames.has(stateName)) {
-      acc.push(buildUseStateExpression(stateName, getDefaultValueExpression(name, componentType, dataType)));
+      acc.push(
+        buildUseStateExpression(
+          stateName,
+          factory.createPropertyAccessExpression(
+            factory.createIdentifier('initialValues'),
+            factory.createIdentifier(stateName),
+          ),
+        ),
+      );
       stateNames.add(stateName);
     }
     return acc;
@@ -93,39 +139,68 @@ export const getUseStateHooks = (fieldConfigs: Record<string, FieldConfigMetadat
 };
 
 /**
- * function used by the onClear/onReset button cta
+ * function used by the Clear/ Reset button
  * it's a reset type but we also need to clear the state of the input fields as well
  *
  * ex.
  * const resetStateValues = () => {
- *  setName('')
- *  setLastName('')
+ *  setName(initialValues.name)
+ *  setLastName(initialValues.lastName)
  *   ....
  * };
  */
-export const resetStateFunction = (fieldConfigs: Record<string, FieldConfigMetadata>) => {
+export const resetStateFunction = (fieldConfigs: Record<string, FieldConfigMetadata>, recordName?: string) => {
+  const cleanValues = recordName ? 'cleanValues' : 'initialValues';
+
   const stateNames = new Set<string>();
-  const setStateExpressions = Object.entries(fieldConfigs).reduce<Statement[]>(
-    (acc, [name, { dataType, componentType, isArray }]) => {
-      const stateName = name.split('.')[0];
-      if (!stateNames.has(stateName)) {
-        acc.push(setStateExpression(stateName, getDefaultValueExpression(name, componentType, dataType)));
-        if (isArray) {
-          acc.push(
-            setStateExpression(
-              getCurrentValueName(stateName),
-              getDefaultValueExpression(name, componentType, dataType),
-            ),
-          );
-        }
-        stateNames.add(stateName);
+  const expressions = Object.entries(fieldConfigs).reduce<Statement[]>((acc, [name, { isArray }]) => {
+    const stateName = name.split('.')[0];
+    if (!stateNames.has(stateName)) {
+      acc.push(
+        setStateExpression(
+          stateName,
+          factory.createPropertyAccessExpression(
+            factory.createIdentifier(cleanValues),
+            factory.createIdentifier(stateName),
+          ),
+        ),
+      );
+      if (isArray) {
+        acc.push(setStateExpression(getCurrentValueName(stateName), factory.createStringLiteral('')));
       }
-      return acc;
-    },
-    [],
-  );
+      stateNames.add(stateName);
+    }
+    return acc;
+  }, []);
+
+  // ex. const cleanValues = {...initialValues, ...bookRecord}
+  if (recordName) {
+    expressions.unshift(
+      factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              factory.createIdentifier('cleanValues'),
+              undefined,
+              undefined,
+              factory.createObjectLiteralExpression(
+                [
+                  factory.createSpreadAssignment(factory.createIdentifier('initialValues')),
+                  factory.createSpreadAssignment(factory.createIdentifier(recordName)),
+                ],
+                false,
+              ),
+            ),
+          ],
+          NodeFlags.Const,
+        ),
+      ),
+    );
+  }
+
   // also reset the state of the errors
-  setStateExpressions.push(setStateExpression('errors', factory.createObjectLiteralExpression()));
+  expressions.push(setStateExpression('errors', factory.createObjectLiteralExpression()));
   return factory.createVariableStatement(
     undefined,
     factory.createVariableDeclarationList(
@@ -140,7 +215,7 @@ export const resetStateFunction = (fieldConfigs: Record<string, FieldConfigMetad
             [],
             undefined,
             factory.createToken(SyntaxKind.EqualsGreaterThanToken),
-            factory.createBlock(setStateExpressions, true),
+            factory.createBlock(expressions, true),
           ),
         ),
       ],
diff --git a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
index f0ee0d0e8..d1a96b7ea 100644
--- a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
+++ b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
@@ -65,12 +65,19 @@ import { RequiredKeys } from '../utils/type-utils';
 import {
   buildMutationBindings,
   buildOverrideTypesBindings,
+  buildResetValuesOnRecordUpdate,
   buildSetStateFunction,
   buildUpdateDatastoreQuery,
   buildValidations,
   runValidationTasksFunction,
 } from './form-renderer-helper';
-import { buildUseStateExpression, getCurrentValueName, getUseStateHooks, resetStateFunction } from './form-state';
+import {
+  buildUseStateExpression,
+  getCurrentValueName,
+  getInitialValues,
+  getUseStateHooks,
+  resetStateFunction,
+} from './form-state';
 import {
   buildFormPropNode,
   baseValidationConditionalType,
@@ -328,6 +335,8 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
       formActionType,
     } = this.component;
     const lowerCaseDataTypeName = lowerCaseFirst(dataTypeName);
+    const lowerCaseDataTypeNameRecord = `${lowerCaseDataTypeName}Record`;
+    const isDataStoreUpdateForm = dataSourceType === 'DataStore' && formActionType === 'update';
 
     if (!formMetadata) {
       throw new Error(`Form Metadata is missing from form: ${this.component.name}`);
@@ -392,11 +401,29 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
       );
     }
 
-    statements.push(...getUseStateHooks(formMetadata.fieldConfigs));
+    statements.push(getInitialValues(formMetadata.fieldConfigs));
 
+    statements.push(...getUseStateHooks(formMetadata.fieldConfigs));
     statements.push(buildUseStateExpression('errors', factory.createObjectLiteralExpression()));
 
-    statements.push(resetStateFunction(formMetadata.fieldConfigs));
+    statements.push(
+      resetStateFunction(formMetadata.fieldConfigs, isDataStoreUpdateForm ? lowerCaseDataTypeNameRecord : undefined),
+    );
+
+    if (isDataStoreUpdateForm) {
+      statements.push(
+        buildUseStateExpression(lowerCaseDataTypeNameRecord, factory.createIdentifier(lowerCaseDataTypeName)),
+      );
+      statements.push(
+        addUseEffectWrapper(
+          buildUpdateDatastoreQuery(dataTypeName, lowerCaseDataTypeNameRecord),
+          // TODO: change once cpk is supported in datastore
+          ['id', lowerCaseDataTypeName],
+        ),
+      );
+
+      statements.push(buildResetValuesOnRecordUpdate(lowerCaseDataTypeNameRecord));
+    }
 
     this.importCollection.addMappedImport(ImportValue.VALIDATE_FIELD);
     this.importCollection.addMappedImport(ImportValue.FETCH_BY_PATH);
@@ -404,19 +431,8 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
     // add model import for datastore type
     if (dataSourceType === 'DataStore') {
       this.importCollection.addImport(ImportSource.LOCAL_MODELS, dataTypeName);
-      if (formActionType === 'update') {
-        statements.push(
-          buildUseStateExpression(`${lowerCaseDataTypeName}Record`, factory.createIdentifier(lowerCaseDataTypeName)),
-        );
-        statements.push(
-          addUseEffectWrapper(
-            buildUpdateDatastoreQuery(dataTypeName, formMetadata.fieldConfigs),
-            // TODO: change once cpk is supported in datastore
-            ['id', lowerCaseDataTypeName],
-          ),
-        );
-      }
     }
+
     if (dataSourceType === 'Custom' && formActionType === 'update') {
       statements.push(addUseEffectWrapper([buildSetStateFunction(formMetadata.fieldConfigs)], []));
     }
diff --git a/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/map-cta.test.ts b/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/map-cta.test.ts
new file mode 100644
index 000000000..fcb3afa7d
--- /dev/null
+++ b/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/map-cta.test.ts
@@ -0,0 +1,27 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+import { mapButtons } from '../../../generate-form-definition/helpers/map-cta';
+
+describe('mapButtons', () => {
+  it('correctly excludes from matrix but returns all configs', () => {
+    const buttonConfigs = mapButtons('create', { submit: { excluded: true } });
+
+    expect(buttonConfigs.buttonMatrix).toStrictEqual([['clear'], ['cancel']]);
+    expect(buttonConfigs.buttonConfigs.submit).toBeDefined();
+    expect(buttonConfigs.buttonConfigs.cancel).toBeDefined();
+    expect(buttonConfigs.buttonConfigs.clear).toBeDefined();
+  });
+});
diff --git a/packages/codegen-ui/lib/generate-form-definition/generate-form-definition.ts b/packages/codegen-ui/lib/generate-form-definition/generate-form-definition.ts
index 1ea15244e..88d660634 100644
--- a/packages/codegen-ui/lib/generate-form-definition/generate-form-definition.ts
+++ b/packages/codegen-ui/lib/generate-form-definition/generate-form-definition.ts
@@ -78,7 +78,7 @@ export function generateFormDefinition({
 
   mapElements({ form, formDefinition, modelFieldsConfigs });
 
-  formDefinition.buttons = mapButtons(form.cta);
+  formDefinition.buttons = mapButtons(form.formActionType, form.cta);
 
   return formDefinition;
 }
diff --git a/packages/codegen-ui/lib/generate-form-definition/helpers/defaults.ts b/packages/codegen-ui/lib/generate-form-definition/helpers/defaults.ts
index ba1b4f312..57a56c959 100644
--- a/packages/codegen-ui/lib/generate-form-definition/helpers/defaults.ts
+++ b/packages/codegen-ui/lib/generate-form-definition/helpers/defaults.ts
@@ -41,18 +41,4 @@ export const FORM_DEFINITION_DEFAULTS = {
   sectionalElement: {
     text: 'text',
   },
-
-  cta: {
-    position: 'bottom',
-    buttonMatrix: [['clear'], ['cancel', 'submit']],
-    cancel: {
-      label: 'Cancel',
-    },
-    clear: {
-      label: 'Clear',
-    },
-    submit: {
-      label: 'Submit',
-    },
-  },
 };
diff --git a/packages/codegen-ui/lib/generate-form-definition/helpers/map-cta.ts b/packages/codegen-ui/lib/generate-form-definition/helpers/map-cta.ts
index 3b859e444..21d533847 100644
--- a/packages/codegen-ui/lib/generate-form-definition/helpers/map-cta.ts
+++ b/packages/codegen-ui/lib/generate-form-definition/helpers/map-cta.ts
@@ -13,64 +13,92 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { FORM_DEFINITION_DEFAULTS } from './defaults';
-import { StudioFormCTA, ButtonConfig, StudioFormCTAButton, FormDefinitionButtonElement } from '../../types';
+import {
+  StudioFormCTA,
+  ButtonConfig,
+  StudioFormCTAButton,
+  FormDefinitionButtonElement,
+  StudioFormActionType,
+} from '../../types';
 
 function getButtonElement(
   key: 'cancel' | 'clear' | 'submit',
+  formActionType: StudioFormActionType,
   override?: StudioFormCTAButton,
 ): FormDefinitionButtonElement | undefined {
-  if (override && 'excluded' in override) {
-    return undefined;
-  }
+  const resetLabel = formActionType === 'create' ? 'Clear' : 'Reset';
 
-  const ButtonMap = {
+  const buttonMap = {
     cancel: {
       name: 'CancelButton',
       type: 'button',
+      label: 'Cancel',
     },
     clear: {
-      name: 'ClearButton',
+      name: `${resetLabel}Button`,
       type: 'reset',
+      label: resetLabel,
     },
     submit: {
       name: 'SubmitButton',
       type: 'submit',
       variation: 'primary',
+      label: 'Submit',
     },
   };
 
-  const { cta: defaults } = FORM_DEFINITION_DEFAULTS;
-
   const element: FormDefinitionButtonElement = {
-    name: ButtonMap[key].name,
+    name: buttonMap[key].name,
     componentType: 'Button',
     props: {
-      children: override?.children ?? defaults[key].label,
-      type: ButtonMap[key].type,
+      children: buttonMap[key].label,
+      type: buttonMap[key].type,
     },
   };
 
+  if (override && 'children' in override && override.children) {
+    element.props.children = override.children;
+  }
+
   if (key === 'submit') {
-    element.props.variation = ButtonMap[key].variation;
+    element.props.variation = buttonMap[key].variation;
   }
 
   return element;
 }
 
-export function mapButtons(buttons?: StudioFormCTA): ButtonConfig {
-  const defaults = FORM_DEFINITION_DEFAULTS.cta;
+// TODO: temporary logic. it should take reordering into consideration
+function mapMatrix(buttons?: StudioFormCTA): string[][] {
+  const matrix: ('clear' | 'cancel' | 'submit')[][] = [['clear'], ['cancel', 'submit']];
+  if (!buttons) {
+    return matrix;
+  }
+
+  return matrix.map((subArray) => {
+    return subArray.filter((element) => {
+      if (
+        buttons[element] &&
+        'excluded' in (buttons[element] as StudioFormCTAButton) &&
+        (buttons[element] as { excluded: boolean }).excluded
+      ) {
+        return false;
+      }
+      return true;
+    });
+  });
+}
 
+export function mapButtons(formActionType: StudioFormActionType, buttons?: StudioFormCTA): ButtonConfig {
   const buttonMapping: ButtonConfig = {
-    position: buttons?.position ?? defaults.position,
-    buttonMatrix: defaults.buttonMatrix,
+    position: buttons?.position ?? 'bottom',
+    buttonMatrix: mapMatrix(buttons),
     buttonConfigs: {},
   };
 
   const keys: (keyof ButtonConfig['buttonConfigs'])[] = ['submit', 'cancel', 'clear'];
 
   keys.forEach((key) => {
-    buttonMapping.buttonConfigs[key] = getButtonElement(key, buttons?.[key]);
+    buttonMapping.buttonConfigs[key] = getButtonElement(key, formActionType, buttons?.[key]);
   });
 
   return buttonMapping;
diff --git a/packages/codegen-ui/lib/utils/form-to-component/helpers/map-cta-buttons.ts b/packages/codegen-ui/lib/utils/form-to-component/helpers/map-cta-buttons.ts
index a745a190d..8d8e626a7 100644
--- a/packages/codegen-ui/lib/utils/form-to-component/helpers/map-cta-buttons.ts
+++ b/packages/codegen-ui/lib/utils/form-to-component/helpers/map-cta-buttons.ts
@@ -13,34 +13,27 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { StudioComponentChild, FormDefinition, ButtonConfig } from '../../../types';
+import { StudioComponentChild, FormDefinition } from '../../../types';
 import { FormDefinitionButtonElement } from '../../../types/form/form-definition-element';
 
-const mapButtonPosition = (buttonElement: FormDefinitionButtonElement): StudioComponentChild => {
-  return {
-    componentType: buttonElement.componentType,
-    name: buttonElement.name,
-    properties: {
-      children: {
-        value: buttonElement.props.children,
-      },
-      type: {
-        value: buttonElement.props.type ? buttonElement.props.type : 'button',
-      },
-      ...(buttonElement.props.variation && { variation: { value: buttonElement.props.variation } }),
-    },
-  };
-};
-
-const mapButtonNameToConfig = (name: string, config: ButtonConfig) => {
-  if (name === 'clear') {
-    return config.buttonConfigs.clear;
-  }
-  if (name === 'cancel') {
-    return config.buttonConfigs.cancel;
+function getButtonChild(
+  key: string,
+  buttonConfigs: { [key: string]: FormDefinitionButtonElement },
+): StudioComponentChild | undefined {
+  const buttonElement = buttonConfigs[key];
+  if (buttonElement) {
+    return {
+      name: buttonElement.name,
+      componentType: buttonElement.componentType,
+      properties: Object.fromEntries(
+        Object.entries(buttonElement.props).map(([propKey, value]) => {
+          return [propKey, { value }];
+        }),
+      ),
+    };
   }
-  return config.buttonConfigs.submit;
-};
+  return undefined;
+}
 
 export const ctaButtonMapper = (formDefinition: FormDefinition): StudioComponentChild => {
   const CTAComponent: StudioComponentChild = {
@@ -54,30 +47,26 @@ export const ctaButtonMapper = (formDefinition: FormDefinition): StudioComponent
     children: [],
   };
 
-  formDefinition.buttons.buttonMatrix[0].forEach((button) => {
-    if (Object.keys(formDefinition.buttons.buttonConfigs).includes(button)) {
-      const config = mapButtonNameToConfig(button, formDefinition.buttons);
-      if (config) {
-        const buttonDefinition = mapButtonPosition(config);
-        CTAComponent.children?.push(buttonDefinition);
-      }
+  formDefinition.buttons.buttonMatrix[0].forEach((buttonKey) => {
+    const buttonChild = getButtonChild(buttonKey, formDefinition.buttons.buttonConfigs);
+
+    if (buttonChild) {
+      CTAComponent.children?.push(buttonChild);
     }
   });
 
   const rightAlignCTA: StudioComponentChild = {
     componentType: 'Flex',
-    name: 'SubmitAndResetFlex',
+    name: 'RightAlignCTASubFlex',
     properties: {},
     children: [],
   };
 
-  formDefinition.buttons.buttonMatrix[1].forEach((button) => {
-    if (Object.keys(formDefinition.buttons.buttonConfigs).includes(button)) {
-      const config = mapButtonNameToConfig(button, formDefinition.buttons);
-      if (config) {
-        const buttonDefinition = mapButtonPosition(config);
-        rightAlignCTA.children?.push(buttonDefinition);
-      }
+  formDefinition.buttons.buttonMatrix[1].forEach((buttonKey) => {
+    const buttonChild = getButtonChild(buttonKey, formDefinition.buttons.buttonConfigs);
+
+    if (buttonChild) {
+      rightAlignCTA.children?.push(buttonChild);
     }
   });