RI-8222 Add "Add element" to the array View tab

redisinsight/ui/src/components/production-write-confirmation/ProductionWriteConfirmationProvider.constants.ts

@@ -20,6 +20,7 @@ export enum BrowserConfirmationCommandId {
   AddListElements = 'browser:add-list-elements',
   AddSetMembers = 'browser:add-set-members',
   AddHashFields = 'browser:add-hash-fields',
+  AddArrayElements = 'browser:add-array-elements',
   AddStreamEntry = 'browser:add-stream-entry',
   RenameKey = 'browser:rename-key',
   ChangeTtl = 'browser:change-ttl',

redisinsight/ui/src/constants/api.ts

@@ -83,6 +83,8 @@ enum ApiEndpoints {
   ARRAY_GET_COUNT = 'array/get-count',
   ARRAY_AGGREGATE = 'array/aggregate',
   ARRAY_SEARCH = 'array/search',
+  ARRAY_SET_ELEMENT = 'array/set-element',
+  ARRAY_APPEND = 'array/append',
 
   STREAMS = 'streams',
   STREAMS_ENTRIES = 'streams/entries',

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

@@ -15,10 +15,12 @@ import * as S from './ArrayDetails.styles'
 
 export interface Props extends KeyDetailsHeaderProps {
   keyProp: RedisResponseBuffer | null
+  onOpenAddItemPanel?: () => void
+  onCloseAddItemPanel?: () => void
 }
 
 const ArrayDetails = (props: Props) => {
-  const { keyProp } = props
+  const { keyProp, onOpenAddItemPanel, onCloseAddItemPanel } = props
 
   const [activeTab, setActiveTab] = useState<ArrayDetailsTab>(
     DEFAULT_ARRAY_DETAILS_TAB,
@@ -31,7 +33,11 @@ const ArrayDetails = (props: Props) => {
         <ArrayTabs value={activeTab} onChange={setActiveTab} />
       </S.TabsWrapper>
       <S.TabSlot $hidden={activeTab !== ArrayDetailsTab.View}>
-        <ViewTab keyProp={keyProp} />
+        <ViewTab
+          keyProp={keyProp}
+          onOpenAddItemPanel={onOpenAddItemPanel}
+          onCloseAddItemPanel={onCloseAddItemPanel}
+        />
       </S.TabSlot>
       <S.TabSlot $hidden={activeTab !== ArrayDetailsTab.Search}>
         <SearchTab keyProp={keyProp} />

redisinsight/ui/src/pages/browser/modules/key-details/components/array-details/array-add-form/ArrayAddForm.constants.ts

@@ -0,0 +1,17 @@
+export const ARRAY_ADD_FORM_TEST_ID = 'array-add-form'
+
+export const VALUE_LABEL = 'Value'
+export const INDEX_LABEL = 'Index'
+export const INDEX_PLACEHOLDER = 'Leave empty to append to the end'
+export const INDEX_HINT =
+  'Leave empty to append the value to the end of the array. Enter an index to ' +
+  'set the value at that exact position (overwriting any existing value there).'
+export const INVALID_INDEX_MESSAGE =
+  'Index must be an integer string between 0 and 18446744073709551614'
+export const ADD_BUTTON_LABEL = 'Add'
+export const CANCEL_BUTTON_LABEL = 'Cancel'
+
+export const CONFIRM_TITLE = 'Add element to a production database?'
+export const CONFIRM_DESCRIPTION =
+  'You are about to add an element to a key on a production database.'
+export const CONFIRM_BUTTON_TEXT = 'Add'

redisinsight/ui/src/pages/browser/modules/key-details/components/array-details/array-add-form/ArrayAddForm.spec.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import {
+  act,
+  fireEvent,
+  initialStateDefault,
+  mockStore,
+  render,
+  screen,
+  waitFor,
+} from 'uiSrc/utils/test-utils'
+import { apiService } from 'uiSrc/services'
+import { stringToBuffer } from 'uiSrc/utils'
+
+import { ArrayAddForm } from './ArrayAddForm'
+
+const keyProp = stringToBuffer('mykey')
+
+// The form's key must be the live selected key, otherwise applyArrayWriteResult
+// suppresses the success side effects (onSuccess/closePanel) as a stale write.
+const stateWithKeySelected = {
+  ...initialStateDefault,
+  app: {
+    ...initialStateDefault.app,
+    context: {
+      ...initialStateDefault.app.context,
+      browser: {
+        ...initialStateDefault.app.context.browser,
+        keyList: {
+          ...initialStateDefault.app.context.browser.keyList,
+          selectedKey: keyProp,
+        },
+      },
+    },
+  },
+}
+
+const renderForm = (closePanel = jest.fn()) =>
+  render(<ArrayAddForm keyProp={keyProp} closePanel={closePanel} />, {
+    store: mockStore(stateWithKeySelected),
+  })
+
+const findCall = (fragment: string) =>
+  (apiService.post as jest.Mock).mock.calls.find(([url]) =>
+    (url as string).includes(fragment),
+  )
+
+describe('ArrayAddForm', () => {
+  beforeEach(() => {
+    apiService.post = jest.fn().mockResolvedValue({ status: 200, data: {} })
+  })
+
+  it('renders the value and index inputs', () => {
+    renderForm()
+    expect(screen.getByTestId('array-add-form-value')).toBeInTheDocument()
+    expect(screen.getByTestId('array-add-form-index')).toBeInTheDocument()
+  })
+
+  it('appends (POST /array/append) when the index is left empty', async () => {
+    const closePanel = jest.fn()
+    renderForm(closePanel)
+
+    fireEvent.change(screen.getByTestId('array-add-form-value'), {
+      target: { value: 'hello' },
+    })
+    fireEvent.click(screen.getByTestId('array-add-form-submit'))
+
+    await waitFor(() => {
+      expect(findCall('array/append')).toBeTruthy()
+    })
+    expect(findCall('array/set-element')).toBeFalsy()
+    expect(closePanel).toHaveBeenCalled()
+  })
+
+  it('sets at index (POST /array/set-element) when an index is provided', async () => {
+    renderForm()
+
+    fireEvent.change(screen.getByTestId('array-add-form-value'), {
+      target: { value: 'hello' },
+    })
+    fireEvent.change(screen.getByTestId('array-add-form-index'), {
+      target: { value: '5' },
+    })
+    fireEvent.click(screen.getByTestId('array-add-form-submit'))
+
+    await waitFor(() => {
+      const call = findCall('array/set-element')
+      expect(call).toBeTruthy()
+      expect((call?.[1] as { index: string }).index).toBe('5')
+    })
+    expect(findCall('array/append')).toBeFalsy()
+  })
+
+  it('disables Add for a non-canonical index', () => {
+    renderForm()
+
+    act(() => {
+      fireEvent.change(screen.getByTestId('array-add-form-index'), {
+        target: { value: '007' },
+      })
+    })
+
+    expect(screen.getByTestId('array-add-form-submit')).toBeDisabled()
+  })
+})

redisinsight/ui/src/pages/browser/modules/key-details/components/array-details/array-add-form/ArrayAddForm.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react'
+
+import { useAppDispatch, useAppSelector } from 'uiSrc/slices/hooks'
+import { selectedKeySelector } from 'uiSrc/slices/browser/keys'
+import { appendArrayElement, addArrayElement } from 'uiSrc/slices/browser/array'
+import {
+  BrowserConfirmationCommandId,
+  useProductionWriteConfirmation,
+} from 'uiSrc/components/production-write-confirmation'
+import { stringToSerializedBufferFormat } from 'uiSrc/utils'
+import { parseArrayIndex } from 'uiSrc/utils/arrayIndex'
+import { FormField } from 'uiSrc/components/base/forms/FormField'
+import { TextInput } from 'uiSrc/components/base/inputs'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import {
+  PrimaryButton,
+  SecondaryButton,
+} from 'uiSrc/components/base/forms/buttons'
+
+import { EntryContent } from '../../common/AddKeysContainer.styled'
+import {
+  ARRAY_ADD_FORM_TEST_ID as TEST_ID,
+  ADD_BUTTON_LABEL,
+  CANCEL_BUTTON_LABEL,
+  CONFIRM_BUTTON_TEXT,
+  CONFIRM_DESCRIPTION,
+  CONFIRM_TITLE,
+  INDEX_HINT,
+  INDEX_LABEL,
+  INDEX_PLACEHOLDER,
+  INVALID_INDEX_MESSAGE,
+  VALUE_LABEL,
+} from './ArrayAddForm.constants'
+import { ArrayAddFormProps } from './ArrayAddForm.types'
+
+/**
+ * Content of the "Add element" slide-out panel (rendered inside the shared
+ * `AddKeysContainer`, matching List / Vector Set). The index is optional:
+ * leaving it empty appends to the end (POST /array/append, atomic ARSET at the
+ * current length); providing one sets at that index (POST /array/set-element).
+ * `ARINSERT` is intentionally not used — see docs/array-modify-vertical-plan.md.
+ */
+export const ArrayAddForm = ({ keyProp, closePanel }: ArrayAddFormProps) => {
+  const dispatch = useAppDispatch()
+  const { viewFormat } = useAppSelector(selectedKeySelector)
+  const { requestConfirmation } = useProductionWriteConfirmation()
+
+  const [value, setValue] = useState('')
+  const [index, setIndex] = useState('')
+
+  // The index input is optional (empty → append). When provided it must be a
+  // canonical decimal string, matching the backend @IsArrayIndex validator.
+  const trimmedIndex = index.trim()
+  const indexInvalid =
+    trimmedIndex.length > 0 && parseArrayIndex(trimmedIndex) !== trimmedIndex
+
+  const handleSuccess = () => {
+    setValue('')
+    setIndex('')
+    closePanel()
+  }
+
+  const handleAdd = () => {
+    requestConfirmation({
+      title: CONFIRM_TITLE,
+      actionDescription: CONFIRM_DESCRIPTION,
+      confirmButtonText: CONFIRM_BUTTON_TEXT,
+      commandId: BrowserConfirmationCommandId.AddArrayElements,
+      disableConfirmationInput: true,
+      onConfirm: () => {
+        const serialized = stringToSerializedBufferFormat(viewFormat, value)
+        if (trimmedIndex.length === 0) {
+          dispatch(
+            appendArrayElement(
+              { key: keyProp, value: serialized },
+              handleSuccess,
+            ),
+          )
+        } else {
+          dispatch(
+            addArrayElement(
+              { key: keyProp, index: trimmedIndex, value: serialized },
+              handleSuccess,
+            ),
+          )
+        }
+      },
+    })
+  }
+
+  return (
+    <Col gap="m">
+      <EntryContent gap="m" data-testid={TEST_ID}>
+        <Row align="end" gap="m">
+          <FlexItem grow>
+            <FormField label={VALUE_LABEL}>
+              <TextInput
+                value={value}
+                onChange={setValue}
+                placeholder="Enter value"
+                data-testid={`${TEST_ID}-value`}
+              />
+            </FormField>
+          </FlexItem>
+          <FlexItem>
+            <FormField
+              label={INDEX_LABEL}
+              infoIconProps={{ content: INDEX_HINT }}
+            >
+              <TextInput
+                value={index}
+                onChange={setIndex}
+                placeholder={INDEX_PLACEHOLDER}
+                error={indexInvalid ? INVALID_INDEX_MESSAGE : undefined}
+                data-testid={`${TEST_ID}-index`}
+              />
+            </FormField>
+          </FlexItem>
+        </Row>
+      </EntryContent>
+
+      <Row justify="end" gap="m" grow={false}>
+        <FlexItem grow={false}>
+          <SecondaryButton
+            onClick={() => closePanel(true)}
+            data-testid={`${TEST_ID}-cancel`}
+          >
+            {CANCEL_BUTTON_LABEL}
+          </SecondaryButton>
+        </FlexItem>
+        <FlexItem grow={false}>
+          <PrimaryButton
+            onClick={handleAdd}
+            disabled={indexInvalid}
+            data-testid={`${TEST_ID}-submit`}
+          >
+            {ADD_BUTTON_LABEL}
+          </PrimaryButton>
+        </FlexItem>
+      </Row>
+    </Col>
+  )
+}

redisinsight/ui/src/pages/browser/modules/key-details/components/array-details/array-add-form/ArrayAddForm.types.ts

@@ -0,0 +1,9 @@
+import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+
+export interface ArrayAddFormProps {
+  /** The array key being viewed; the element is added to it. */
+  keyProp: RedisResponseBuffer
+  /** Closes the add panel. `isCancelled` distinguishes an explicit Cancel from
+   *  a close-after-success (mirrors the other types' add panels). */
+  closePanel: (isCancelled?: boolean) => void
+}

redisinsight/ui/src/pages/browser/modules/key-details/components/array-details/array-add-form/index.ts

@@ -0,0 +1 @@
+export { ArrayAddForm } from './ArrayAddForm'