fix: CP-9166 add tooltip and disabled button (#47)

ava-labs · Sep 27, 2024 · 39ef5a4 · 39ef5a4
1 parent 709160e
commit 39ef5a4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git 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
@@ -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>
   );