From 39ef5a47036d7be0da9ee73e2eda47899eedf487 Mon Sep 17 00:00:00 2001
From: vvava <94397450+vvava@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:06:04 +0200
Subject: [PATCH] fix: CP-9166 add tooltip and disabled button (#47)

---
 src/localization/locales/en/translation.json |  1 +
 src/pages/Networks/AddNetwork.tsx            | 41 +++++++++++++-------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/localization/locales/en/translation.json b/src/localization/locales/en/translation.json
index a95468c0f..a8474b5ef 100644
--- a/src/localization/locales/en/translation.json
+++ b/src/localization/locales/en/translation.json
@@ -810,6 +810,7 @@
   "The secret key can be assigned by the Fireblocks workspace admin": "The secret key can be assigned by the Fireblocks workspace admin",
   "The transaction has been reverted": "The transaction has been reverted",
   "The transaction timed out": "The transaction timed out",
+  "There are invalid fields in the form": "There are invalid fields in the form",
   "There is no search result.": "There is no search result.",
   "There was a problem with the transfer": "There was a problem with the transfer",
   "These are the addresses derived from your Keystone device": "These are the addresses derived from your Keystone device",
diff --git a/src/pages/Networks/AddNetwork.tsx b/src/pages/Networks/AddNetwork.tsx
index af773d019..6bd96644f 100644
--- a/src/pages/Networks/AddNetwork.tsx
+++ b/src/pages/Networks/AddNetwork.tsx
@@ -6,6 +6,7 @@ import {
   Scrollbars,
   ScrollbarsRef,
   Stack,
+  Tooltip,
   Typography,
   styled,
   toast,
@@ -68,6 +69,9 @@ export const AddNetwork = () => {
   );
 
   useEffect(() => {
+    if (Object.keys(pageHistoryData).length) {
+      setShowErrors(true);
+    }
     setNetwork({ ...defaultNetworkValues, ...pageHistoryData });
   }, [defaultNetworkValues, pageHistoryData]);
 
@@ -147,25 +151,32 @@ export const AddNetwork = () => {
           size="large"
           fullWidth
           onClick={history.goBack}
+          sx={{ px: 0 }}
         >
           {t('Cancel')}
         </Button>
-        <Button
-          color="primary"
-          data-testid="add-network-save"
-          size="large"
-          fullWidth
-          disabled={isSaving}
-          isLoading={isSaving}
-          onClick={() => {
-            setShowErrors(true);
-            if (isFormValid) {
-              handleSave();
-            }
-          }}
+        <Tooltip
+          title={!isFormValid && t('There are invalid fields in the form')}
+          sx={{ boxSizing: 'border-box', width: '100%' }}
         >
-          {t('Save')}
-        </Button>
+          <Button
+            color="primary"
+            data-testid="add-network-save"
+            size="large"
+            fullWidth
+            disabled={!isFormValid || isSaving}
+            isLoading={isSaving}
+            onClick={() => {
+              setShowErrors(true);
+              if (isFormValid) {
+                handleSave();
+              }
+            }}
+            sx={{ px: 0 }}
+          >
+            {t('Save')}
+          </Button>
+        </Tooltip>
       </Stack>
     </Stack>
   );