[RI-7194] fix Create Index style issues (#4813)

* RI-7194: use proper button play icon

* fix flex gap

* update VectorSearchPage telemetry test mock

Author: KrumTy

redisinsight/ui/src/components/base/layout/flex/flex.styles.ts

@@ -316,6 +316,7 @@ export type FlexItemProps = React.HTMLAttributes<HTMLDivElement> &
 
 export const StyledFlexItem = styled.div<FlexItemProps>`
   display: flex;
+  gap: ${({ $gap = 'none' }) => ($gap ? flexGroupStyles.gapSizes[$gap] : '')};
   flex-direction: ${({ $direction = 'column' }) =>
     flexGroupStyles.direction[$direction] ?? 'column'};
   ${({ grow }) => {

redisinsight/ui/src/pages/vector-search/VectorSearchPage.spec.tsx

@@ -7,6 +7,8 @@ import {
   INSTANCE_ID_MOCK,
   INSTANCES_MOCK,
 } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { redisearchListSelector } from 'uiSrc/slices/browser/redisearch'
 import { VectorSearchPage } from './VectorSearchPage'
 
 // Mock the telemetry module, so we don't send actual telemetry data during tests
@@ -35,14 +37,24 @@ describe('VectorSearchPage', () => {
       jest.clearAllMocks()
 
       mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
-      mockUseSelector
-        .mockImplementationOnce(() => INSTANCES_MOCK[0]) // connectedInstanceSelector
-        .mockImplementation(() => ({
+      mockUseSelector.mockImplementation((selector) => {
+        if (selector === connectedInstanceSelector) {
+          return INSTANCES_MOCK[0]
+        }
+        if (selector === redisearchListSelector) {
+          return {
+            loading: false,
+            data: [],
+          }
+        }
+        // Default fallback for other selectors
+        return {
           loading: false,
-          spec: {}, // Provide at least an empty object for COMMANDS_SPEC
+          spec: {},
           commandsArray: [],
           commandGroups: [],
-        })) // appRedisCommandsSelector
+        }
+      })
     })
 
     afterEach(() => {

redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.spec.tsx

@@ -64,7 +64,7 @@ describe('CreateIndexStep', () => {
   it('should render the command preview button', () => {
     render(<CreateIndexStep {...defaultProps} />)
 
-    expect(screen.getByText('► Command preview')).toBeInTheDocument()
+    expect(screen.getByText('Command preview')).toBeInTheDocument()
   })
 
   it('should render the tab labels', () => {
@@ -143,7 +143,7 @@ describe('CreateIndexStep', () => {
 
       // Verify all 8 field boxes are rendered (from bikesIndexFieldsBoxes config)
       const fieldLabels = ['id', 'description', 'price', 'price_1', 'name', 'category', 'embedding', 'embedding_1']
-      
+
       fieldLabels.forEach(label => {
         expect(screen.getByText(label)).toBeInTheDocument()
       })
@@ -161,7 +161,7 @@ describe('CreateIndexStep', () => {
     it('should have proper button text', () => {
       render(<CreateIndexStep {...defaultProps} />)
 
-      const commandPreviewButton = screen.getByText('► Command preview')
+      const commandPreviewButton = screen.getByText('Command preview')
       expect(commandPreviewButton).toBeInTheDocument()
     })
   })

redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.tsx

@@ -13,6 +13,7 @@ import { VectorIndexTab } from 'uiSrc/components/new-index/create-index-step/Cre
 import { BuildNewIndexTabTrigger } from 'uiSrc/components/new-index/create-index-step/build-new-index-tab/BuildNewIndexTabTrigger'
 import { TextInput } from 'uiSrc/components/base/inputs'
 
+import { PlayFilledIcon } from 'uiSrc/components/base/icons'
 import { bikesIndexFieldsBoxes } from './config'
 import { CreateIndexStepScreenWrapper, SearchInputWrapper } from './styles'
 import { PreviewCommandDrawer } from './PreviewCommandDrawer'
@@ -80,8 +81,11 @@ export const CreateIndexStep: IStepComponent = ({
           tabs={indexFieldsTabs}
         />
         <FlexGroup justify="end">
-          <EmptyButton onClick={() => setIsDrawerOpen(true)}>
-            ► Command preview
+          <EmptyButton
+            icon={PlayFilledIcon}
+            onClick={() => setIsDrawerOpen(true)}
+          >
+            Command preview
           </EmptyButton>
         </FlexGroup>
       </FlexItem>

redisinsight/ui/src/pages/vector-search/saved-queries/SavedQueriesScreen.spec.tsx

@@ -67,14 +67,14 @@ describe('SavedQueriesScreen', () => {
   it('should render insert buttons for each query', () => {
     render(<SavedQueriesScreen {...defaultProps} />)
 
-    const insertButtons = screen.getAllByText('► Insert')
+    const insertButtons = screen.getAllByText('Insert')
     expect(insertButtons).toHaveLength(2) // 2 queries in the selected index
   })
 
   it('should call onQueryInsert when insert button is clicked', () => {
     render(<SavedQueriesScreen {...defaultProps} />)
 
-    const firstInsertButton = screen.getAllByText('► Insert')[0]
+    const firstInsertButton = screen.getAllByText('Insert')[0]
     fireEvent.click(firstInsertButton)
 
     expect(mockOnQueryInsert).toHaveBeenCalledTimes(1)
@@ -86,7 +86,7 @@ describe('SavedQueriesScreen', () => {
   it('should call onQueryInsert with correct query value for second button', () => {
     render(<SavedQueriesScreen {...defaultProps} />)
 
-    const insertButtons = screen.getAllByText('► Insert')
+    const insertButtons = screen.getAllByText('Insert')
 
     // Click second insert button
     fireEvent.click(insertButtons[1])
@@ -117,7 +117,7 @@ describe('SavedQueriesScreen', () => {
 
       expect(screen.getByText('Search for restaurants')).toBeInTheDocument()
 
-      const insertButtons = screen.getAllByText('► Insert')
+      const insertButtons = screen.getAllByText('Insert')
       expect(insertButtons).toHaveLength(1) // 1 query in restaurant index
     })
 
@@ -129,7 +129,7 @@ describe('SavedQueriesScreen', () => {
 
       render(<SavedQueriesScreen {...propsWithRestaurantIndex} />)
 
-      const insertButtons = screen.getAllByText('► Insert')
+      const insertButtons = screen.getAllByText('Insert')
 
       fireEvent.click(insertButtons[0])
       expect(mockOnQueryInsert).toHaveBeenCalledWith(
@@ -154,7 +154,7 @@ describe('SavedQueriesScreen', () => {
 
       render(<SavedQueriesScreen {...propsWithEmptyQueries} />)
 
-      expect(screen.queryByText('► Insert')).not.toBeInTheDocument()
+      expect(screen.queryByText('Insert')).not.toBeInTheDocument()
     })
   })
 })

redisinsight/ui/src/pages/vector-search/saved-queries/SavedQueriesScreen.tsx

@@ -6,6 +6,7 @@ import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 import { Button } from 'uiSrc/components/base/forms/buttons'
 import { FieldTag } from 'uiSrc/components/new-index/create-index-step/field-box/FieldTag'
 
+import { PlayFilledIcon } from 'uiSrc/components/base/icons'
 import {
   RightAlignedWrapper,
   TagsWrapper,
@@ -70,9 +71,11 @@ export const SavedQueriesScreen = ({
             <RightAlignedWrapper>
               <Button
                 variant="secondary-invert"
+                icon={PlayFilledIcon}
+                size="s"
                 onClick={() => onQueryInsert(query.value)}
               >
-                ► Insert
+                Insert
               </Button>
             </RightAlignedWrapper>
           </VectorSearchScreenBlockWrapper>