Merge pull request #1603 from MahtabBukhari/Save_Changes_button_at_Ed…

…it_Node_Modal_should_be_enable 'Save Changes' button at edit node modal should be enable only if there is change in name OR image_url and Space in URL should not be allow
stakwork · Jun 11, 2024 · 5cddf67 · 5cddf67
2 parents 06a701a + 85bd87f
commit 5cddf67
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
@@ -111,10 +111,13 @@ export const Body = () => {
     openRemoveNodeModal()
   }
 
-  const isNodeNameChanged = getValues().name && actualTopicNode?.name !== getValues().name
+  const name = getValues()?.name?.trim()
+
+  const isNodeNameChanged = name && actualTopicNode?.name.trim() !== name
+  const isImageUrlChanged = getValues().image_url && selectedNode?.image_url !== getValues()?.image_url
 
   const shouldDisableSave =
-    loading || topicIsLoading || (!!imageUrl && !isValidImageUrl) || (!imageUrl && !isNodeNameChanged)
+    loading || topicIsLoading || (!!imageUrl && !isValidImageUrl) || (!isNodeNameChanged && !isImageUrlChanged)
 
   return (
     <Wrapper>
@@ -146,7 +149,11 @@ export const Body = () => {
             variant="contained"
           >
             Save Changes
-            {loading && <ClipLoader color={colors.BLUE_PRESS_STATE} size={10} />}
+            {loading && (
+              <ClipLoaderWrapper>
+                <ClipLoader color={colors.lightGray} size={12} />
+              </ClipLoaderWrapper>
+            )}
           </Button>
         </Flex>
       </FormProvider>
@@ -171,3 +178,7 @@ const DeleteButton = styled(Button)`
     }
   }
 `
+
+const ClipLoaderWrapper = styled.span`
+  margin-top: 3px;
+`
diff --git a/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { imageUrlRegex, validateImageInputType } from '~/components/ModalsContainer/EditNodeNameModal/utils'
+import { imageUrlRegex } from '~/components/ModalsContainer/EditNodeNameModal/utils'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { TextInput } from '~/components/common/TextInput'
@@ -74,9 +74,6 @@ export const TitleEditor = () => {
               message: 'Please enter a valid URL',
               value: imageUrlRegex,
             },
-            validate: {
-              source: validateImageInputType,
-            },
           }}
         />
       </Flex>

diff --git a/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts b/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts
@@ -1,4 +1,4 @@
-export const imageUrlRegex = /^https:\/\/.*\.(png|jpe?g|svg)$/
+export const imageUrlRegex = /^https:\/\/\S+\.(png|jpe?g|svg)$/
 
 export function validateImageInputType(url: string): boolean {
   if (imageUrlRegex.test(url)) {