RI-6188 There is no dropdown to specify how to add elements for adding a new list

Author: Kristiyan Ivanov

redisinsight/api/src/modules/browser/list/list.service.ts

@@ -234,17 +234,25 @@ export class ListService {
     client: RedisClient,
     dto: PushElementToListDto,
   ): Promise<void> {
-    const { keyName, elements } = dto;
-    await client.sendCommand([BrowserToolListCommands.LPush, keyName, ...elements]);
+    const { keyName, elements, destination } = dto;
+    await client.sendCommand([
+      BrowserToolListCommands[destination === ListElementDestination.Tail ? 'RPush' : 'LPush'],
+      keyName,
+      ...elements
+    ]);
   }
 
   public async createListWithExpiration(
     client: RedisClient,
     dto: CreateListWithExpireDto,
   ): Promise<void> {
-    const { keyName, elements, expire } = dto;
+    const { keyName, elements, expire, destination } = dto;
     const transactionResults = await client.sendPipeline([
-      [BrowserToolListCommands.LPush, keyName, ...elements],
+      [
+        BrowserToolListCommands[destination === ListElementDestination.Tail ? 'RPush' : 'LPush'],
+        keyName,
+        ...elements
+      ],
       [BrowserToolKeysCommands.Expire, keyName, expire],
     ]);
     catchMultiTransactionError(transactionResults);

redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx

@@ -9,17 +9,20 @@ import {
   EuiFlexItem,
   EuiPanel,
   EuiFieldText,
+  EuiSuperSelect,
 } from '@elastic/eui'
 
 import { Maybe, stringToBuffer } from 'uiSrc/utils'
 import { addKeyStateSelector, addListKey } from 'uiSrc/slices/browser/keys'
-import { CreateListWithExpireDto } from 'apiSrc/modules/browser/list/dto'
+import { CreateListWithExpireDto, ListElementDestination } from 'apiSrc/modules/browser/list/dto'
 
 import {
   AddListFormConfig as config,
 } from '../constants/fields-config'
 import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
 import AddMultipleFields from '../../add-multiple-fields'
+import { optionsDestinations, TAIL_DESTINATION } from 'uiSrc/pages/browser/modules/key-details/components/list-details/add-list-elements/AddListElements'
+
 
 export interface Props {
   keyName: string
@@ -30,6 +33,7 @@ export interface Props {
 const AddKeyList = (props: Props) => {
   const { keyName = '', keyTTL, onCancel } = props
   const [elements, setElements] = useState<string[]>([''])
+  const [destination, setDestination] = useState<ListElementDestination>(TAIL_DESTINATION)
 
   const [isFormValid, setIsFormValid] = useState<boolean>(false)
 
@@ -70,6 +74,7 @@ const AddKeyList = (props: Props) => {
 
   const submitData = (): void => {
     const data: CreateListWithExpireDto = {
+      destination,
       keyName: stringToBuffer(keyName),
       elements: elements.map((el) => stringToBuffer(el)),
     }
@@ -81,6 +86,12 @@ const AddKeyList = (props: Props) => {
 
   return (
     <EuiForm component="form" onSubmit={onFormSubmit}>
+      <EuiSuperSelect
+        valueOfSelected={destination}
+        options={optionsDestinations}
+        onChange={(value) => setDestination(value as ListElementDestination)}
+        data-testid="destination-select"
+      />
       <AddMultipleFields
         items={elements}
         onClickRemove={onClickRemove}

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/add-list-elements/AddListElements.tsx

@@ -36,7 +36,7 @@ export enum ListElementDestination {
 export const TAIL_DESTINATION: ListElementDestination = ListElementDestination.Tail
 export const HEAD_DESTINATION: ListElementDestination = ListElementDestination.Head
 
-const optionsDestinations: EuiSuperSelectOption<string>[] = [
+export const optionsDestinations: EuiSuperSelectOption<string>[] = [
   {
     value: TAIL_DESTINATION,
     inputDisplay: 'Push to tail',