diff --git a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx index 53f393944..06aa23654 100644 --- 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 ( @@ -146,7 +149,11 @@ export const Body = () => { variant="contained" > Save Changes - {loading && } + {loading && ( + + + + )} @@ -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 index 9c2823749..92350ad3d 100644 --- 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, - }, }} /> diff --git a/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts b/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts index f883bce52..c971a2a83 100644 --- 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)) {