add action components

Author: irinaAbramova-dev

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-array/RejsonArray.tsx

@@ -8,12 +8,9 @@ import {
   EuiForm,
   EuiLoadingSpinner,
   EuiOutsideClickDetector,
-  EuiTextArea,
   EuiWindowEvent
 } from '@elastic/eui'
-import { bufferToString, createDeleteFieldHeader, createDeleteFieldMessage } from 'uiSrc/utils'
 
-import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
 import FieldMessage from 'uiSrc/components/field-message/FieldMessage'
 import {
   REJSONResponse,
@@ -29,6 +26,10 @@ import {
 } from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/utils'
 import { JSONErrors } from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/constants'
 
+import {
+  EditEntireItemAction,
+  AddItemFieldAction, EditItemFieldAction
+} from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/rejson-details-actions'
 import styles from '../styles.module.scss'
 
 const RejsonArrayComponent = (props: JSONArrayProps) => {
@@ -188,7 +189,7 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
 
   return (
     <>
-      <div className={styles.row}>
+      <div className={styles.row} key={keyName + parentPath}>
         <div className={styles.rowContainer}>
           <div className={styles.quotedKeyName} style={{ paddingLeft: `${leftPadding}em` }}>
             <span
@@ -215,27 +216,16 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
           </div>
           <>
             {!editEntireArray && !loading && (
-              <div className={styles.actionButtons}>
-                <EuiButtonIcon
-                  iconType="documentEdit"
-                  className={styles.jsonButtonStyle}
-                  onClick={onClickEditEntireArray}
-                  aria-label="Edit field"
-                  color="primary"
-                  data-testid="btn-edit-field"
-                />
-                <PopoverDelete
-                  header={createDeleteFieldHeader(keyName.toString())}
-                  text={createDeleteFieldMessage(bufferToString(selectedKey))}
-                  item={keyName.toString()}
-                  suffix="array"
-                  deleting={deleting}
-                  closePopover={() => setDeleting('')}
-                  updateLoading={false}
-                  showPopover={(item) => { setDeleting(`${item}array`) }}
-                  handleDeleteItem={() => handleSubmitRemoveKey(path, keyName.toString())}
-                />
-              </div>
+              <EditItemFieldAction
+                type="array"
+                keyName={keyName.toString()}
+                selectedKey={selectedKey}
+                path={path}
+                deleting={deleting}
+                setDeleting={setDeleting}
+                handleSubmitRemoveKey={handleSubmitRemoveKey}
+                onClickEditEntireItem={onClickEditEntireArray}
+              />
             )}
           </>
           <>
@@ -251,68 +241,15 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
       </div>
       <>
         {editEntireArray ? (
-          <div className={styles.row}>
-            <div style={{ width: '100%', padding: '10px 0' }}>
-              <EuiOutsideClickDetector onOutsideClick={() => { setEditEntireArray(false) }}>
-                <div style={{ marginBottom: '34px' }}>
-                  <EuiWindowEvent event="keydown" handler={(e) => handleOnEsc(e, 'edit')} />
-                  <EuiFocusTrap>
-                    <EuiForm
-                      component="form"
-                      className="relative"
-                      onSubmit={(e) => handleUpdateValueFormSubmit(e)}
-                      noValidate
-                    >
-                      <EuiFlexItem grow component="span">
-                        <EuiTextArea
-                          isInvalid={!!error}
-                          style={{ height: '150px', width: '100%', maxWidth: 'none' }}
-                          value={valueOfEntireArray ? valueOfEntireArray.toString() : ''}
-                          placeholder="Enter JSON value"
-                          onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setValueOfEntireArray(event.target.value)}
-                          data-testid="json-value"
-                        />
-                      </EuiFlexItem>
-                      <div className={cx(styles.controls, styles.controlsBottom)}>
-                        <EuiButtonIcon
-                          iconSize="m"
-                          iconType="cross"
-                          color="primary"
-                          aria-label="Cancel add"
-                          className={styles.declineBtn}
-                          onClick={() => {
-                            setError(null)
-                            setEditEntireArray(false)
-                          }}
-                        />
-                        <EuiButtonIcon
-                          iconSize="m"
-                          iconType="check"
-                          color="primary"
-                          type="submit"
-                          aria-label="Apply"
-                          className={styles.applyBtn}
-                          data-testid="apply-edit-btn"
-                        />
-                      </div>
-                    </EuiForm>
-                    {error && (
-                      <div className={cx(styles.errorMessage, styles.errorMessageForTextArea)}>
-                        <FieldMessage
-                          scrollViewOnAppear
-                          icon="alert"
-                          testID="edit-json-error"
-                        >
-                          {error}
-                        </FieldMessage>
-                      </div>
-                    )}
-                  </EuiFocusTrap>
-                </div>
-
-              </EuiOutsideClickDetector>
-            </div>
-          </div>
+          <EditEntireItemAction
+            error={error}
+            setError={setError}
+            handleOnEsc={handleOnEsc}
+            handleUpdateValueFormSubmit={handleUpdateValueFormSubmit}
+            valueOfEntireItem={valueOfEntireArray}
+            setValueOfEntireItem={setValueOfEntireArray}
+            setEditEntireItem={setEditEntireArray}
+          />
         ) : null}
       </>
       <>
@@ -405,19 +342,11 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
         </>
         <>
           {openIndex && !editEntireArray ? (
-            <div
-              className={styles.row}
-              style={{ paddingLeft: `${leftPadding}em` }}
-            >
-              <span className={styles.defaultFont}>&#93;</span>
-              <EuiButtonIcon
-                iconType="plus"
-                className={styles.jsonButtonStyle}
-                onClick={onClickSetKVPair}
-                aria-label="Add field"
-                data-testid="add-field-btn"
-              />
-            </div>
+            <AddItemFieldAction
+              leftPadding={leftPadding}
+              type="array"
+              onClickSetKVPair={onClickSetKVPair}
+            />
           ) : null}
         </>
       </>

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details-actions/add-item-field-action/AddItemFieldAction.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { EuiButtonIcon } from '@elastic/eui'
+import styles from '../../styles.module.scss'
+
+export interface Props {
+  leftPadding: string;
+  type: string;
+  onClickSetKVPair: () => void
+}
+
+const AddItemFieldAction = ({
+  leftPadding,
+  type,
+  onClickSetKVPair,
+}: Props) => {
+  const brackets = () => {
+    if (type === 'object') return <>&#125;</>
+    if (type === 'array') return <>&#93;</>
+    return <></>
+  }
+
+  return (
+    <div
+      className={styles.row}
+      style={{ paddingLeft: `${leftPadding}em` }}
+    >
+      <span className={styles.defaultFont}>{brackets()}</span>
+      <EuiButtonIcon
+        iconType="plus"
+        className={styles.jsonButtonStyle}
+        onClick={onClickSetKVPair}
+        aria-label="Add field"
+        data-testid="add-field-btn"
+      />
+    </div>
+  )
+}
+
+export { AddItemFieldAction }

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details-actions/edit-entire-item-action/EditEntireItemAction.tsx

@@ -0,0 +1,103 @@
+import React, { ChangeEvent, FormEvent } from 'react'
+import {
+  EuiButtonIcon,
+  EuiFlexItem,
+  EuiFocusTrap,
+  EuiForm,
+  EuiOutsideClickDetector,
+  EuiTextArea,
+  EuiWindowEvent
+} from '@elastic/eui'
+import cx from 'classnames'
+
+import FieldMessage from 'uiSrc/components/field-message/FieldMessage'
+import styles from '../../styles.module.scss'
+
+export interface Props {
+  handleOnEsc: (e: KeyboardEvent, type: string) => void
+  handleUpdateValueFormSubmit: (e: FormEvent<HTMLFormElement>) => void
+  setValueOfEntireItem: (value: any) => void
+  setEditEntireItem: (value: boolean) => void
+  setError: (error: string | null) => void
+  error: string | null
+  valueOfEntireItem: string | null
+}
+
+const EditEntireItemAction = ({
+  handleOnEsc,
+  handleUpdateValueFormSubmit,
+  error,
+  valueOfEntireItem,
+  setValueOfEntireItem,
+  setEditEntireItem,
+  setError
+}: Props) => (
+  <div className={styles.row}>
+    <div style={{ width: '100%', padding: '10px 0' }}>
+      <EuiOutsideClickDetector onOutsideClick={() => {
+        setError(null)
+        setEditEntireItem(false)
+      }}
+      >
+        <div style={{ marginBottom: '34px' }}>
+          <EuiWindowEvent event="keydown" handler={(e) => handleOnEsc(e, 'edit')} />
+          <EuiFocusTrap>
+            <EuiForm
+              component="form"
+              className="relative"
+              onSubmit={(e) => handleUpdateValueFormSubmit(e)}
+              noValidate
+            >
+              <EuiFlexItem grow component="span">
+                <EuiTextArea
+                  isInvalid={!!error}
+                  style={{ height: '150px', width: '100%', maxWidth: 'none' }}
+                  value={valueOfEntireItem ? valueOfEntireItem.toString() : ''}
+                  placeholder="Enter JSON value"
+                  onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setValueOfEntireItem(event.target.value)}
+                  data-testid="json-value"
+                />
+              </EuiFlexItem>
+              <div className={cx(styles.controls, styles.controlsBottom)}>
+                <EuiButtonIcon
+                  iconSize="m"
+                  iconType="cross"
+                  color="primary"
+                  aria-label="Cancel add"
+                  className={styles.declineBtn}
+                  onClick={() => {
+                    setError(null)
+                    setEditEntireItem(false)
+                  }}
+                />
+                <EuiButtonIcon
+                  iconSize="m"
+                  iconType="check"
+                  color="primary"
+                  type="submit"
+                  aria-label="Apply"
+                  className={styles.applyBtn}
+                  data-testid="apply-edit-btn"
+                />
+              </div>
+            </EuiForm>
+            {error && (
+              <div className={cx(styles.errorMessage, styles.errorMessageForTextArea)}>
+                <FieldMessage
+                  scrollViewOnAppear
+                  icon="alert"
+                  testID="edit-json-error"
+                >
+                  {error}
+                </FieldMessage>
+              </div>
+            )}
+          </EuiFocusTrap>
+        </div>
+
+      </EuiOutsideClickDetector>
+    </div>
+  </div>
+)
+
+export { EditEntireItemAction }

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details-actions/edit-item-field-action/EditItemFieldAction.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { EuiButtonIcon } from '@elastic/eui'
+import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
+import { bufferToString, createDeleteFieldHeader, createDeleteFieldMessage } from 'uiSrc/utils'
+import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+import styles from '../../styles.module.scss'
+
+export interface Props {
+  type: string;
+  keyName: string;
+  selectedKey: string | RedisResponseBuffer;
+  path: string,
+  deleting: string,
+  setDeleting: (value: string) => void;
+  handleSubmitRemoveKey: (path: string, jsonKeyName: string) => void;
+  onClickEditEntireItem: () => void;
+}
+
+const EditItemFieldAction = ({
+  type,
+  keyName,
+  selectedKey,
+  path,
+  deleting,
+  setDeleting,
+  handleSubmitRemoveKey,
+  onClickEditEntireItem
+}: Props) => {
+  const dataTestId = () => {
+    if (type === 'object') return 'edit-object-btn'
+    if (type === 'array') return 'btn-edit-field'
+    return ''
+  }
+
+  return (
+    <div className={styles.actionButtons}>
+      <EuiButtonIcon
+        iconType="documentEdit"
+        className={styles.jsonButtonStyle}
+        onClick={onClickEditEntireItem}
+        aria-label="Edit field"
+        color="primary"
+        data-testid={dataTestId}
+      />
+      <PopoverDelete
+        header={createDeleteFieldHeader(keyName)}
+        text={createDeleteFieldMessage(bufferToString(selectedKey))}
+        item={keyName}
+        suffix={type}
+        deleting={deleting}
+        closePopover={() => setDeleting('')}
+        updateLoading={false}
+        showPopover={(item) => { setDeleting(`${item}${type}`) }}
+        handleDeleteItem={() => handleSubmitRemoveKey(path, keyName)}
+      />
+    </div>
+  )
+}
+
+export { EditItemFieldAction }

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details-actions/index.ts

@@ -0,0 +1,3 @@
+export { AddItemFieldAction } from './add-item-field-action/AddItemFieldAction'
+export { EditEntireItemAction } from './edit-entire-item-action/EditEntireItemAction'
+export { EditItemFieldAction } from './edit-item-field-action/EditItemFieldAction'