Merge pull request #3566 from RedisInsight/fe/bugfix/inline_editor_submit

add validation on submit

Author: vlad-dargel

redisinsight/api/config/features-config.json

@@ -1,5 +1,5 @@
 {
-  "version": 2.52,
+  "version": 2.5202,
   "features": {
     "rdi": {
       "flag": true,
@@ -18,7 +18,7 @@
     },
     "documentationChat": {
       "flag": true,
-      "perc": [[0,5]],
+      "perc": [[0,20]],
       "filters": [
         {
           "name": "config.server.buildType",
@@ -29,7 +29,7 @@
     },
     "databaseChat": {
       "flag": true,
-      "perc": [[0,5]],
+      "perc": [[0,20]],
       "filters": [
         {
           "name": "config.server.buildType",
@@ -78,11 +78,6 @@
           "name": "config.server.buildType",
           "value": "ELECTRON",
           "cond": "eq"
-        },
-        {
-          "name": "agreements.analytics",
-          "value": true,
-          "cond": "eq"
         }
       ]
     },

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')).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 =>