Merge pull request #1191 from RedisInsight/feature/RI-3470_Formatters_improvements

Feature/ri 3470 formatters improvements

Author: AlenaSY

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

@@ -39,4 +39,66 @@ describe('InlineItemEditor', () => {
     render(<InlineItemEditor {...instance(mockedProps)} onDecline={jest.fn()} />)
     expect(screen.getByTestId(INLINE_ITEM_EDITOR)).toHaveFocus()
   })
+
+  describe('approveByValidation', () => {
+    it('should not render popover after click on Apply btn if approveByValidation return "true" in the props and onApply should be called', () => {
+      const approveByValidationMock = jest.fn().mockReturnValue(true)
+      const onApplyMock = jest.fn().mockReturnValue(false)
+      const { queryByTestId } = render(
+        <InlineItemEditor
+          {...instance(mockedProps)}
+          onApply={onApplyMock}
+          onDecline={jest.fn()}
+          approveByValidation={approveByValidationMock}
+        />
+      )
+
+      fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), { target: { value: 'val123' } })
+
+      fireEvent.click(screen.getByTestId(/apply-btn/))
+      expect(queryByTestId('approve-popover')).not.toBeInTheDocument()
+      expect(onApplyMock).toBeCalled()
+    })
+
+    it('should render popover after click on Apply btn if approveByValidation return "false" in the props and onApply should not be called ', () => {
+      const approveByValidationMock = jest.fn().mockReturnValue(false)
+      const onApplyMock = jest.fn().mockReturnValue(false)
+      const { queryByTestId } = render(
+        <InlineItemEditor
+          {...instance(mockedProps)}
+          onApply={onApplyMock}
+          onDecline={jest.fn()}
+          approveByValidation={approveByValidationMock}
+        />
+      )
+
+      fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), { target: { value: 'val123' } })
+
+      fireEvent.click(screen.getByTestId(/apply-btn/))
+      expect(queryByTestId('approve-popover')).toBeInTheDocument()
+      expect(onApplyMock).not.toBeCalled()
+    })
+
+    it('should render popover after click on Apply btn if approveByValidation return "false" in the props and onApply should be called after click on Save btn', () => {
+      const approveByValidationMock = jest.fn().mockReturnValue(false)
+      const onApplyMock = jest.fn().mockReturnValue(false)
+      const { queryByTestId } = render(
+        <InlineItemEditor
+          {...instance(mockedProps)}
+          onApply={onApplyMock}
+          onDecline={jest.fn()}
+          approveByValidation={approveByValidationMock}
+        />
+      )
+
+      fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), { target: { value: 'val123' } })
+
+      fireEvent.click(screen.getByTestId(/apply-btn/))
+      expect(queryByTestId('approve-popover')).toBeInTheDocument()
+      expect(onApplyMock).not.toBeCalled()
+
+      fireEvent.click(screen.getByTestId(/save-btn/))
+      expect(onApplyMock).toBeCalled()
+    })
+  })
 })

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

@@ -16,6 +16,9 @@ import {
   EuiFocusTrap,
   EuiWindowEvent,
   EuiToolTip,
+  EuiPopover,
+  EuiButton,
+  EuiText,
 } from '@elastic/eui'
 import { IconSize } from '@elastic/eui/src/components/icon/icon'
 import styles from './styles.module.scss'
@@ -25,7 +28,7 @@ type Design = 'default' | 'separate'
 
 export interface Props {
   onDecline: (event?: React.MouseEvent<HTMLElement>) => void
-  onApply: (value: string, event: React.MouseEvent<HTMLFormElement, MouseEvent>) => void
+  onApply: (value: string, event: React.MouseEvent) => void
   onChange?: (value: string) => void
   fieldName?: string
   initialValue?: string
@@ -49,6 +52,8 @@ export interface Props {
   disabledTooltipText?: { title: string, text: string }
   preventOutsideClick?: boolean
   disableFocusTrap?: boolean
+  approveByValidation?: (value: string) => boolean
+  approveText?: { title: string, text: string }
 }
 
 const InlineItemEditor = (props: Props) => {
@@ -77,11 +82,14 @@ const InlineItemEditor = (props: Props) => {
     controlsClassName,
     disabledTooltipText,
     preventOutsideClick = false,
-    disableFocusTrap = false
+    disableFocusTrap = false,
+    approveByValidation,
+    approveText,
   } = props
   const containerEl: Ref<HTMLDivElement> = useRef(null)
   const [value, setValue] = useState<string>(initialValue)
   const [isError, setIsError] = useState<boolean>(false)
+  const [isShowApprovePopover, setIsShowApprovePopover] = useState(false)
 
   const inputRef: Ref<HTMLInputElement> = useRef(null)
 
@@ -132,8 +140,17 @@ const InlineItemEditor = (props: Props) => {
     }
   }
 
-  const handleFormSubmit = (event: React.MouseEvent<HTMLFormElement, MouseEvent>): void => {
+  const handleApplyClick = (event: React.MouseEvent) => {
+    if (approveByValidation && !approveByValidation?.(value)) {
+      setIsShowApprovePopover(true)
+    } else {
+      handleFormSubmit(event)
+    }
+  }
+
+  const handleFormSubmit = (event: React.MouseEvent<HTMLElement>): void => {
     event.preventDefault()
+    event.stopPropagation()
     onApply(value, event)
   }
 
@@ -152,10 +169,10 @@ const InlineItemEditor = (props: Props) => {
         iconSize={iconSize ?? 'l'}
         iconType="check"
         color="primary"
-        type="submit"
         aria-label="Apply"
         className={cx(styles.btn, styles.applyBtn)}
         isDisabled={isDisabledApply()}
+        onClick={handleApplyClick}
         data-testid="apply-btn"
       />
     </EuiToolTip>
@@ -218,7 +235,45 @@ const InlineItemEditor = (props: Props) => {
                       isDisabled={isLoading}
                       data-testid="cancel-btn"
                     />
-                    {ApplyBtn}
+                    {!approveByValidation && ApplyBtn}
+                    {approveByValidation && (
+                      <EuiPopover
+                        anchorPosition="leftCenter"
+                        isOpen={isShowApprovePopover}
+                        closePopover={() => setIsShowApprovePopover(false)}
+                        anchorClassName={styles.popoverAnchor}
+                        panelClassName={cx(styles.popoverPanel)}
+                        className={styles.popoverWrapper}
+                        button={ApplyBtn}
+                      >
+                        <div className={styles.popover} data-testid="approve-popover">
+                          <EuiText size="m">
+                            {!!approveText?.title && (
+                            <h4>
+                              <b>{approveText?.title}</b>
+                            </h4>
+                            )}
+                            <EuiText size="s" color="subdued" className={styles.approveText}>
+                              {approveText?.text}
+                            </EuiText>
+                          </EuiText>
+                          <div className={styles.popoverFooter}>
+                            <EuiButton
+                              fill
+                              color="warning"
+                              aria-label="Save"
+                              className={cx(styles.btn, styles.saveBtn)}
+                              isDisabled={isDisabledApply()}
+                              onClick={handleFormSubmit}
+                              data-testid="save-btn"
+                            >
+                              Save
+                            </EuiButton>
+                          </div>
+                        </div>
+
+                      </EuiPopover>
+                    )}
                   </div>
                 </EuiForm>
               </EuiFocusTrap>

redisinsight/ui/src/components/inline-item-editor/styles.module.scss

@@ -23,13 +23,15 @@
   z-index: 1;
 
   .tooltip,
-  :global(.euiButtonIcon) {
+  .declineBtn,
+  .popoverWrapper {
     width: 50% !important;
     height: 100% !important;
   }
 }
 
-.tooltip :global(.euiButtonIcon) {
+.applyBtn {
+  height: 100% !important;
   width: 100% !important;
 }
 
@@ -76,14 +78,19 @@
   width: 60px;
   z-index: 4;
 
-  .btn {
+  .btn,
+  .popoverWrapper {
     margin: 6px 3px;
     height: 24px !important;
     width: 24px !important;
+  }
+
+  .btn:hover {
+    background-color: var(--hoverInListColorDarken) !important;
+  }
 
-    &:hover {
-      background-color: var(--hoverInListColorDarken) !important;
-    }
+  .applyBtn {
+    margin-top: 0;
   }
 
   svg {
@@ -109,3 +116,47 @@
   margin-right: 80px;
   word-break: break-all;
 }
+
+.popoverAnchor,
+.popoverWrapper .tooltip {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.popoverPanel:global(.euiPanel--paddingMedium) {
+  width: 296px !important;
+  padding: 24px 30px !important;
+  border: 1px solid var(--euiColorPrimary) !important;
+  background-color: var(--browserTableRowEven) !important;
+
+  :global(.euiPopover__panelArrow:after) {
+    border-left-color: var(--browserTableRowEven) !important;
+  }
+  :global(.euiPopover__panelArrow:before) {
+    border-left-color: var(--euiColorPrimary) !important;
+  }
+}
+
+.popover {
+  word-wrap: break-word;
+
+  h4 b {
+    font-size: 14px !important;
+    color: var(--htmlColor) !important;
+  }
+}
+.approveText {
+  font-size: 13px !important;
+  letter-spacing: -0.13px;
+}
+
+.popoverFooter {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+
+  .saveBtn {
+    height: 36px !important;
+    width: 86px !important;
+  }
+}

redisinsight/ui/src/constants/browser.ts

@@ -4,5 +4,9 @@ export const TEXT_UNPRINTABLE_CHARACTERS = {
   title: 'Non-printable characters have been detected',
   text: 'Use Workbench or CLI to edit without data loss.',
 }
-
 export const TEXT_DISABLED_FORMATTER_EDITING = 'Cannot edit the value in this format'
+
+export const TEXT_INVALID_VALUE = {
+  title: 'Value will be saved as Unicode',
+  text: 'as it is not valid in the selected format.',
+}

redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx

@@ -44,6 +44,7 @@ import {
   KeyTypes,
   OVER_RENDER_BUFFER_COUNT,
   TableCellAlignment,
+  TEXT_INVALID_VALUE,
   TEXT_DISABLED_FORMATTER_EDITING,
   TEXT_UNPRINTABLE_CHARACTERS
 } from 'uiSrc/constants'
@@ -350,6 +351,12 @@ const HashDetails = (props: Props) => {
                       controlsClassName={styles.textAreaControls}
                       onDecline={() => handleEditField(rowIndex, false)}
                       onApply={() => handleApplyEditField(fieldItem)}
+                      approveText={TEXT_INVALID_VALUE}
+                      approveByValidation={() =>
+                        formattingBuffer(
+                          stringToSerializedBufferFormat(viewFormat, areaValue),
+                          viewFormat
+                        )?.isValid}
                     >
                       <EuiTextArea
                         fullWidth

redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx

@@ -27,6 +27,7 @@ import {
   KeyTypes,
   OVER_RENDER_BUFFER_COUNT,
   TableCellAlignment,
+  TEXT_INVALID_VALUE,
   TEXT_DISABLED_FORMATTER_EDITING,
   TEXT_UNPRINTABLE_CHARACTERS
 } from 'uiSrc/constants'
@@ -296,6 +297,12 @@ const ListDetails = (props: Props) => {
                         disabledTooltipText={TEXT_UNPRINTABLE_CHARACTERS}
                         onDecline={() => handleEditElement(index, false)}
                         onApply={() => handleApplyEditElement(index)}
+                        approveText={TEXT_INVALID_VALUE}
+                        approveByValidation={() =>
+                          formattingBuffer(
+                            stringToSerializedBufferFormat(viewFormat, areaValue),
+                            viewFormat
+                          )?.isValid}
                       >
                         <EuiTextArea
                           fullWidth

redisinsight/ui/src/pages/browser/components/string-details/StringDetails.tsx

@@ -30,8 +30,7 @@ import {
 import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
 import { AddStringFormConfig as config } from 'uiSrc/pages/browser/components/add-key/constants/fields-config'
 import { selectedKeyDataSelector, selectedKeySelector } from 'uiSrc/slices/browser/keys'
-
-import { TEXT_UNPRINTABLE_CHARACTERS } from 'uiSrc/constants'
+import { TEXT_INVALID_VALUE, TEXT_UNPRINTABLE_CHARACTERS } from 'uiSrc/constants'
 import { calculateTextareaLines } from 'uiSrc/utils/calculateTextareaLines'
 
 import styles from './styles.module.scss'
@@ -177,6 +176,12 @@ const StringDetails = (props: Props) => {
           onDecline={onDeclineChanges}
           onApply={onApplyChanges}
           declineOnUnmount={false}
+          approveText={TEXT_INVALID_VALUE}
+          approveByValidation={() =>
+            formattingBuffer(
+              stringToSerializedBufferFormat(viewFormat, areaValue),
+              viewFormat
+            )?.isValid}
         >
           <EuiTextArea
             fullWidth