diff --git a/cypress/elements/account/left-menu/left-menu-selectors.js b/cypress/elements/account/left-menu/left-menu-selectors.js
index df7c06537..239e60af6 100644
--- a/cypress/elements/account/left-menu/left-menu-selectors.js
+++ b/cypress/elements/account/left-menu/left-menu-selectors.js
@@ -1,31 +1,31 @@
 export const LEFT_MENU_SELECTORS = {
-  catalog: "[data-test='menu-item-label'][data-test-id='catalogue']",
-  pages: "[data-test='menu-item-label'][data-test-id='pages']",
-  configuration: "[data-test='menu-item-label'][data-test-id='configure']",
-  home: "[data-test='menu-item-label'][data-test-id='home']",
-  orders: "[data-test='menu-item-label'][data-test-id='orders']",
-  discounts: "[data-test='menu-item-label'][data-test-id='discounts']",
-  appSection: "[data-test='menu-item-label'][data-test-id='apps_section']",
-  app: "[data-test='menu-item-label'][data-test-id='apps']",
-  translations: "[data-test='menu-item-label'][data-test-id='translations']",
-  customers: "[data-test='menu-item-label'][data-test-id='customers']"
+  catalog: "[data-test-id='menu-item-label-catalogue']",
+  pages: "[data-test-id='menu-item-label-pages']",
+  configuration: "[data-test-id='menu-item-label-configure']",
+  home: "[data-test-id='menu-item-label-home']",
+  orders: "[data-test-id='menu-item-label-orders']",
+  discounts: "[data-test-id='menu-item-label-discounts']",
+  appSection: "[data-test-id='menu-item-label-apps_section']",
+  app: "[data-test-id='menu-item-label-apps']",
+  translations: "[data-test-id='menu-item-label-translations']",
+  customers: "[data-test-id='menu-item-label-customers']",
 };
 export const DISCOUNTS_MENU_SELECTORS = {
-  sales: "[data-test='submenu-item-label'][data-test-id='sales']",
-  vouchers: "[data-test='submenu-item-label'][data-test-id='vouchers']"
+  sales: "[data-test-id='submenu-item-label-sales']",
+  vouchers: "[data-test-id='submenu-item-label-vouchers']",
 };
 export const ORDERS = {
-  orders: "[data-test='submenu-item-label'][data-test-id='orders']",
-  draftOrders: "[data-test='submenu-item-label'][data-test-id='order-drafts']"
+  orders: "[data-test-id='submenu-item-label-orders']",
+  draftOrders: "[data-test-id='submenu-item-label-order-drafts']",
 };
 export const CATALOG = {
-  products: "[data-test='submenu-item-label'][data-test-id='products']",
-  categories: "[data-test='submenu-item-label'][data-test-id='categories']",
-  collections: "[data-test='submenu-item-label'][data-test-id='collections']"
+  products: "[data-test-id='submenu-item-label-products']",
+  categories: "[data-test-id='submenu-item-label-categories']",
+  collections: "[data-test-id='submenu-item-label-collections']",
 };
 
 export const APP_MENU_SELECTORS = {
-  app: "[data-test='submenu-item-label'][data-test-id='apps']"
+  app: "[data-test-id='submenu-item-label-apps']",
 };
 
 export const appCommonSelector = "[data-test-id*='apps']";
diff --git a/cypress/elements/account/login-selectors.js b/cypress/elements/account/login-selectors.js
index 6e351eb5c..a05eadf13 100644
--- a/cypress/elements/account/login-selectors.js
+++ b/cypress/elements/account/login-selectors.js
@@ -3,10 +3,10 @@ export const LOGIN_SELECTORS = {
   emailAddressInput: "input[name='email']",
   emailPasswordInput: "input[name='password']",
   signInButton: "[data-test-id=submit]",
-  userMenu: "[data-test=userMenu]",
+  userMenu: "[data-test-id=userMenu]",
   warningCredentialMessage: "[data-test-id=login-error-message]",
   welcomePage: "[data-test-id=welcome-header]",
   logOutButton: "[data-test-id='log-out-button']",
   resetPasswordLink: "[data-test-id='reset-password-link']",
-  confirmPassword: "[name='confirmPassword']"
+  confirmPassword: "[name='confirmPassword']",
 };
diff --git a/cypress/elements/catalog/collection-selectors.js b/cypress/elements/catalog/collection-selectors.js
index 8f1d4badc..723c7594f 100644
--- a/cypress/elements/catalog/collection-selectors.js
+++ b/cypress/elements/catalog/collection-selectors.js
@@ -1,7 +1,7 @@
 export const COLLECTION_SELECTORS = {
   createCollectionButton: "[data-test-id = 'create-collection']",
   nameInput: "[name='name']",
-  saveButton: "[data-test='button-bar-confirm']",
+  saveButton: "[data-test-id='button-bar-confirm']",
   addProductButton: "[data-test-id='add-product']",
   descriptionInput: '[data-test-id="rich-text-editor-description"]',
   placeholder: "[data-placeholder]",
diff --git a/cypress/elements/catalog/products/products-list.js b/cypress/elements/catalog/products/products-list.js
index d1404994a..a97771c57 100644
--- a/cypress/elements/catalog/products/products-list.js
+++ b/cypress/elements/catalog/products/products-list.js
@@ -47,8 +47,8 @@ export const PRODUCTS_LIST = {
     },
     filterBySearchInput: '[data-test-id="filter-field-autocomplete-input"]',
   },
-  nextPageButton: "[data-test='button-pagination-next']",
-  previousPagePagination: "[data-test='button-pagination-back']",
+  nextPageButton: "[data-test-id='button-pagination-next']",
+  previousPagePagination: "[data-test-id='button-pagination-back']",
   resultsOnPageSelect: "[data-test-id='PaginationRowNumberSelect']",
   rowNumberOption: "[data-test-id='rowNumberOption']",
 };
diff --git a/cypress/elements/catalog/products/variants-selectors.js b/cypress/elements/catalog/products/variants-selectors.js
index dc78846cb..1958f4ea0 100644
--- a/cypress/elements/catalog/products/variants-selectors.js
+++ b/cypress/elements/catalog/products/variants-selectors.js
@@ -5,11 +5,11 @@ export const VARIANTS_SELECTORS = {
   attributeSelector: "[data-test-id='attribute-value']",
   addWarehouseButton: "[data-test-id='add-warehouse']",
   warehouseOption: "[role='menuitem']",
-  saveButton: "[data-test='button-bar-confirm']",
+  saveButton: "[data-test-id='button-bar-confirm']",
   skuInputInAddVariant: "[name='sku']",
   stockInput: "[data-test-id='stock-input']",
   booleanAttributeCheckbox: "[name*='attribute'][type='checkbox']",
   selectOption: "[data-test-id='multi-autocomplete-select-option']",
-  manageChannels: "[data-testid='manage-channels-button']",
+  manageChannels: "[data-test-id='manage-channels-button']",
   allChannels: "[name='allChannels']",
 };
diff --git a/cypress/elements/channels/add-channel-form-selectors.js b/cypress/elements/channels/add-channel-form-selectors.js
index dce16fe3c..d25f8b2af 100644
--- a/cypress/elements/channels/add-channel-form-selectors.js
+++ b/cypress/elements/channels/add-channel-form-selectors.js
@@ -3,7 +3,7 @@ export const ADD_CHANNEL_FORM_SELECTORS = {
   slug: "[name='slug']",
   currency: "[data-test-id='channel-currency-select-input']",
   currencyOptions: "[data-test-id='single-autocomplete-select-option']",
-  saveButton: "[data-test='button-bar-confirm']",
+  saveButton: "[data-test-id='button-bar-confirm']",
   backToChannelsList: "[data-test-id='app-header-back-button']",
   currencyValidationMessage: "[data-test-id='currency-text-input-helper-text']",
   slugValidationMessage: "[data-test-id='slug-text-input-helper-text']",
diff --git a/cypress/elements/discounts/sales.js b/cypress/elements/discounts/sales.js
index 5243aa02c..3790e2038 100644
--- a/cypress/elements/discounts/sales.js
+++ b/cypress/elements/discounts/sales.js
@@ -5,7 +5,7 @@ export const SALES_SELECTORS = {
   fixedOption: "[value='FIXED']",
   discountValue: "[name='value']",
   startDateInput: "[name='startDate']",
-  saveButton: "[data-test='button-bar-confirm']",
+  saveButton: "[data-test-id='button-bar-confirm']",
   productsTab: "[data-test-id='products-tab']",
   variantsTab: "[data-test-id='variants-tab']",
   assignProducts: "[data-test-id='assign-products']",
diff --git a/cypress/elements/orders/draft-order-selectors.js b/cypress/elements/orders/draft-order-selectors.js
index 2cd6218f1..b54ef68b1 100644
--- a/cypress/elements/orders/draft-order-selectors.js
+++ b/cypress/elements/orders/draft-order-selectors.js
@@ -5,7 +5,7 @@ export const DRAFT_ORDER_SELECTORS = {
   selectCustomer: "[data-test-id='select-customer']",
   selectCustomerOption: "[data-test-type='option']",
   addShippingCarrierLink: "[data-test-id='add-shipping-carrier']",
-  finalizeButton: "[data-test='button-bar-confirm']",
+  finalizeButton: "[data-test-id='button-bar-confirm']",
   editShippingAddress: '[data-test-id="edit-shipping-address"]',
   editBillingAddress: '[data-test-id="edit-billing-address"]',
   customerEmail: '[data-test-id="customer-email"]',
diff --git a/cypress/elements/shared/button-selectors.js b/cypress/elements/shared/button-selectors.js
index 3b43a160f..850a32155 100644
--- a/cypress/elements/shared/button-selectors.js
+++ b/cypress/elements/shared/button-selectors.js
@@ -1,17 +1,17 @@
 export const BUTTON_SELECTORS = {
   back: '[data-test-id="app-header-back-button"]',
   submit: '[data-test-id="submit"]',
-  confirm: '[data-test="button-bar-confirm"]',
+  confirm: '[data-test-id="button-bar-confirm"]',
   goBackButton: "[data-test-id='app-header-back-button']",
   checkbox: "[type='checkbox']",
   checked: "[class*='checked']",
   selectOption: "[data-test-id*='select-option']",
   notSelectedOption: ":not([aria-selected])",
-  deleteButton: '[data-test="button-bar-delete"]',
+  deleteButton: '[data-test-id="button-bar-delete"]',
   deleteItemsButton: '[data-test-id="button-delete-items"]',
   confirmDeleteButton: '[data-test-id="confirm-delete"]',
   expandIcon: '[data-test-id="expand-icon"]',
-  nextPaginationButton: '[data-test="button-pagination-next"]',
+  nextPaginationButton: '[data-test-id="button-pagination-next"]',
   deleteIcon: '[data-test-id="delete-icon"]',
   showMoreButton: '[data-test-id="show-more-button"]',
   button: "button",
diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js
index d3c530567..b5afdbced 100644
--- a/cypress/elements/shared/sharedElements.js
+++ b/cypress/elements/shared/sharedElements.js
@@ -6,8 +6,9 @@ export const SHARED_ELEMENTS = {
   skeleton: '[data-test-id="skeleton"]',
   table: 'table[class*="Table"]',
   tableRow: '[data-test-id*="id"], [class*="MuiTableRow"]',
-  notificationSuccess: '[data-test="notification"][data-test-type="success"]',
-  notificationFailure: '[data-test="notification"][data-test-type="error"]',
+  notificationSuccess:
+    '[data-test-id="notification"][data-test-type="success"]',
+  notificationFailure: '[data-test-id="notification"][data-test-type="error"]',
   dialog: '[role="dialog"]',
   searchInput: '[data-test-id="search-input"]',
   selectOption: '[data-test-id*="select-field-option"]',
diff --git a/package-lock.json b/package-lock.json
index 6c41ce7b4..efd5e1a73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,6 @@
         "color-convert": "^2.0.1",
         "crc-32": "^1.2.0",
         "currency-codes": "^2.1.0",
-        "cypress-repeat": "^2.3.3",
         "downshift": "^6.1.7",
         "editorjs-inline-tool": "^0.4.0",
         "faker": "^5.1.0",
@@ -182,6 +181,7 @@
         "cypress-mailhog": "^1.3.0",
         "cypress-mochawesome-reporter": "^2.3.0",
         "cypress-multi-reporters": "^1.5.0",
+        "cypress-repeat": "^2.3.3",
         "cypress-timings": "^1.0.0",
         "eslint": "^7.4.0",
         "eslint-config-prettier": "^8.5.0",
@@ -9330,7 +9330,7 @@
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
       "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
-      "dev": true,
+      "optional": true,
       "engines": {
         "node": ">=6"
       }
@@ -14285,7 +14285,8 @@
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "devOptional": true
     },
     "node_modules/blueimp-md5": {
       "version": "2.18.0",
@@ -17046,6 +17047,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/cypress-repeat/-/cypress-repeat-2.3.3.tgz",
       "integrity": "sha512-DoPiN5A/SMC9p6B2lRbvOxQvQUS6LO8Zeblkc3ZQQl5cQMmGBa15EOMLdBpQ1ctjOgssvcYawodBkxiNMHI49g==",
+      "optional": true,
       "dependencies": {
         "arg": "5.0.2",
         "bluebird": "3.7.2",
@@ -17062,12 +17064,14 @@
     "node_modules/cypress-repeat/node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "optional": true
     },
     "node_modules/cypress-repeat/node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "optional": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -17084,6 +17088,7 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
       "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -51619,7 +51624,7 @@
           "version": "3.6.1",
           "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
           "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
-          "dev": true
+          "optional": true
         },
         "react": {
           "version": "16.14.0",
@@ -55673,7 +55678,8 @@
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "devOptional": true
     },
     "blueimp-md5": {
       "version": "2.18.0",
@@ -58237,6 +58243,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/cypress-repeat/-/cypress-repeat-2.3.3.tgz",
       "integrity": "sha512-DoPiN5A/SMC9p6B2lRbvOxQvQUS6LO8Zeblkc3ZQQl5cQMmGBa15EOMLdBpQ1ctjOgssvcYawodBkxiNMHI49g==",
+      "optional": true,
       "requires": {
         "arg": "5.0.2",
         "bluebird": "3.7.2",
@@ -58247,12 +58254,14 @@
         "arg": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-          "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+          "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+          "optional": true
         },
         "debug": {
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
           "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "optional": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -58260,7 +58269,8 @@
         "dotenv": {
           "version": "8.2.0",
           "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
-          "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+          "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+          "optional": true
         }
       }
     },
diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
index c135aa4b5..ad062901f 100644
--- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
+++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
@@ -109,7 +109,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
             />
             <FormSpacer />
             <Button
-              data-test="button-bar-confirm"
+              data-test-id="button-bar-confirm"
               className={classes.submit}
               disabled={loading || data.password.length === 0 || passwordError}
               variant="primary"
diff --git a/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx b/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
index 1e4391b31..06a194d27 100644
--- a/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
+++ b/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
@@ -60,7 +60,7 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
           name="syncEvents"
           value={data.syncEvents}
           onChange={onSyncEventChange}
-          data-test="syncEvents"
+          data-test-id="syncEvents"
           testId="syncEvent"
         />
         <VerticalSpacer spacing={2} />
@@ -86,7 +86,7 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
           name="asyncEvents"
           value={data.asyncEvents}
           onChange={onAsyncEventChange}
-          data-test="asyncEvents"
+          data-test-id="asyncEvents"
           testId="asyncEvent"
         />
       </CardContent>
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx
index 8f6926872..2a0b4d9e1 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx
@@ -50,7 +50,7 @@ const GiftCardCreateDialogCodeContent: React.FC<GiftCardCreateDialogCodeContentP
           {intl.formatMessage(messages.copyCodeLabel)}
         </Button>
         <HorizontalSpacer spacing={2} />
-        <Button variant="primary" onClick={onClose} data-test="submit">
+        <Button variant="primary" onClick={onClose} data-test-id="submit">
           {intl.formatMessage(buttonMessages.ok)}
         </Button>
       </DialogActions>
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index a687e5d5a..f02804d80 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -73,7 +73,7 @@ const OrderFulfillmentAcceptDialog: React.FC<OrderFulfillmentAcceptDialogProps>
                 <FormattedMessage {...buttonMessages.cancel} />
               </Button>
               <ConfirmButton
-                data-test="submit"
+                data-test-id="submit"
                 transitionState={confirmButtonState}
                 onClick={submit}
               >
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx
index 0ad7efbd7..70bf6c57a 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx
@@ -20,7 +20,7 @@ export const CreateVariantTitle: React.FC<CreateVariantTitleProps> = ({
       toolbar={
         <Button
           variant="tertiary"
-          data-testid="manage-channels-button"
+          data-test-id="manage-channels-button"
           disabled={false}
           onClick={onManageClick}
         >
diff --git a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx
index 71ab000d1..63ed4567c 100644
--- a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx
+++ b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx
@@ -38,7 +38,7 @@ const TranslationFieldsSave: React.FC<TranslationFieldsSaveProps> = props => {
   return (
     <div className={classes.root}>
       <ConfirmButton
-        data-test="button-bar-confirm"
+        data-test-id="button-bar-confirm"
         className={classes.confirmButton}
         transitionState={saveButtonState}
         onClick={onSave}