add validation on submit

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.spec.tsx

@@ -100,5 +100,42 @@ describe('InlineItemEditor', () => {
       fireEvent.click(screen.getByTestId(/save-btn/))
       expect(onApplyMock).toBeCalled()
     })
+
+    it('should not call onApply if form is invalid', () => {
+      const onApplyMock = jest.fn().mockReturnValue(false)
+      render(
+        <InlineItemEditor
+          {...instance(mockedProps)}
+          isLoading
+          onApply={onApplyMock}
+          onDecline={jest.fn()}
+        />
+      )
+
+      expect(screen.getByTestId('apply-btn')).not.toBeDisabled()
+
+      fireEvent.submit(screen.getByTestId(INLINE_ITEM_EDITOR))
+
+      expect(onApplyMock).not.toBeCalled()
+    })
+
+    it('should call onApply if form is valid', () => {
+      const onApplyMock = jest.fn().mockReturnValue(false)
+      render(
+        <InlineItemEditor
+          {...instance(mockedProps)}
+          onApply={onApplyMock}
+          onDecline={jest.fn()}
+        />
+      )
+
+      fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), { target: { value: 'val123' } })
+
+      expect(screen.getByTestId('apply-btn')).not.toBeDisabled()
+
+      fireEvent.submit(screen.getByTestId(INLINE_ITEM_EDITOR))
+
+      expect(onApplyMock).toBeCalled()
+    })
   })
 })

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

@@ -158,7 +158,9 @@ const InlineItemEditor = (props: Props) => {
   const handleFormSubmit = (event: React.MouseEvent<HTMLElement>): void => {
     event.preventDefault()
     event.stopPropagation()
-    onApply(value, event)
+    if (!isDisabledApply()) {
+      onApply(value, event)
+    }
   }
 
   const isDisabledApply = (): boolean =>