RI-7197 Introduce vector search actions panel (#4741)

- added a simple component to present the different actions on the vector search page
- added button for "manage indexes" to open the corresponding drawer
- added a placeholder button for "saved queries" drawer

re #RI-7197

Author: valkirilov

redisinsight/ui/src/pages/vector-search/manage-indexes/ManageIndexesDrawer.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { cleanup, render, screen } from 'uiSrc/utils/test-utils'
+import {
+  ManageIndexesDrawer,
+  ManageIndexesDrawerProps,
+} from './ManageIndexesDrawer'
+
+// Workaround for @redis-ui/components Title component issue with react-children-utilities
+// TypeError: react_utils.childrenToString is not a function
+jest.mock('uiSrc/components/base/layout/drawer', () => ({
+  ...jest.requireActual('uiSrc/components/base/layout/drawer'),
+  DrawerHeader: jest.fn().mockReturnValue(null),
+}))
+
+const renderComponent = (props?: Partial<ManageIndexesDrawerProps>) => {
+  const defaultProps: ManageIndexesDrawerProps = {
+    open: true,
+    onOpenChange: jest.fn(),
+  }
+
+  return render(<ManageIndexesDrawer {...defaultProps} {...props} />)
+}
+
+describe('ManageIndexesDrawer', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it('should render', () => {
+    const { container } = renderComponent()
+
+    expect(container).toBeTruthy()
+
+    const drawer = screen.getByTestId('manage-indexes-drawer')
+    expect(drawer).toBeInTheDocument()
+
+    // Note: Since we mocked DrawerHeader, we can't check its presence
+    // const header = screen.getByText('Manage indexes')
+    // expect(header).toBeInTheDocument()
+
+    // TODO: Check the body content, once implemented
+    const body = screen.getByTestId('manage-indexes-drawer-body')
+    expect(body).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/pages/vector-search/manage-indexes/ManageIndexesDrawer.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { DrawerProps } from '@redis-ui/components'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+} from 'uiSrc/components/base/layout/drawer'
+
+export interface ManageIndexesDrawerProps extends DrawerProps {}
+
+export const ManageIndexesDrawer = ({
+  open,
+  onOpenChange,
+  ...rest
+}: ManageIndexesDrawerProps) => (
+  <Drawer
+    open={open}
+    onOpenChange={onOpenChange}
+    data-testid="manage-indexes-drawer"
+    {...rest}
+  >
+    <DrawerHeader title="Manage indexes" />
+    <DrawerBody data-testid="manage-indexes-drawer-body">
+      <p>Manage indexes info will be added later</p>
+    </DrawerBody>
+  </Drawer>
+)

redisinsight/ui/src/pages/vector-search/query/HeaderActions.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { cleanup, render, screen, userEvent } from 'uiSrc/utils/test-utils'
+
+import { HeaderActions } from './HeaderActions'
+
+// Workaround for @redis-ui/components Title component issue with react-children-utilities
+// TypeError: react_utils.childrenToString is not a function
+jest.mock('uiSrc/components/base/layout/drawer', () => ({
+  ...jest.requireActual('uiSrc/components/base/layout/drawer'),
+  DrawerHeader: jest.fn().mockReturnValue(null),
+}))
+
+const renderComponent = () => render(<HeaderActions />)
+
+describe('ManageIndexesDrawer', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it('should render', () => {
+    const { container } = renderComponent()
+
+    expect(container).toBeTruthy()
+
+    const headerActions = screen.getByTestId('vector-search-header-actions')
+    expect(headerActions).toBeInTheDocument()
+
+    // Verify the presence of the actions
+    const savedQueriesButton = screen.getByText('Saved queries')
+    expect(savedQueriesButton).toBeInTheDocument()
+
+    const manageIndexesButton = screen.getByText('Manage indexes')
+    expect(manageIndexesButton).toBeInTheDocument()
+  })
+
+  it('should open a drawer when "Manage indexes" is clicked', async () => {
+    renderComponent()
+
+    const manageIndexesButton = screen.getByText('Manage indexes')
+    expect(manageIndexesButton).toBeInTheDocument()
+
+    // Simulate clicking the "Manage indexes" button
+    await userEvent.click(manageIndexesButton)
+
+    // Check if the drawer is opened
+    const drawer = screen.getByTestId('manage-indexes-drawer')
+    expect(drawer).toBeInTheDocument()
+
+    // Simulate clicking outside the drawer to close it
+    await userEvent.click(document.body, { pointerEventsCheck: 0 })
+    expect(drawer).not.toBeInTheDocument()
+  })
+})

redisinsight/ui/src/pages/vector-search/query/HeaderActions.styles.ts

@@ -0,0 +1,16 @@
+import { TextButton } from '@redis-ui/components'
+import styled from 'styled-components'
+import { FlexGroup } from 'uiSrc/components/base/layout/flex'
+
+export const StyledHeaderAction = styled(FlexGroup)`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+`
+
+export const StyledTextButton = styled(TextButton)`
+  color: ${({ theme }) => theme.color.blue400};
+  &:hover {
+    color: ${({ theme }) => theme.color.blue500};
+  }
+`

redisinsight/ui/src/pages/vector-search/query/HeaderActions.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import { StyledHeaderAction, StyledTextButton } from './HeaderActions.styles'
+import { ManageIndexesDrawer } from '../manage-indexes/ManageIndexesDrawer'
+
+export const HeaderActions = () => {
+  const [isManageIndexesDrawerOpen, setIsManageIndexesDrawerOpen] =
+    useState<boolean>(false)
+
+  return (
+    <>
+      <StyledHeaderAction data-testid="vector-search-header-actions">
+        <StyledTextButton>Saved queries</StyledTextButton>
+        <StyledTextButton onClick={() => setIsManageIndexesDrawerOpen(true)}>
+          Manage indexes
+        </StyledTextButton>
+      </StyledHeaderAction>
+
+      <ManageIndexesDrawer
+        open={isManageIndexesDrawerOpen}
+        onOpenChange={setIsManageIndexesDrawerOpen}
+      />
+    </>
+  )
+}

redisinsight/ui/src/pages/vector-search/query/VectorSearchQuery.tsx

@@ -1,8 +1,11 @@
 import React from 'react'
+import { HeaderActions } from './HeaderActions'
+import { CreateIndexWrapper } from '../create-index/styles'
 
-export const VectorSearchQuery = () => {
-  // TODO: implement this component
-  // https://www.figma.com/design/oO2eYRuuLmfzUYLkvCkFhM/Search-page?node-id=645-37412&t=TSwcttCYa4Ld9WzC-4
-  ;
-  return <h4>TODO</h4>
-}
+// TODO: implement this component
+// https://www.figma.com/design/oO2eYRuuLmfzUYLkvCkFhM/Search-page?node-id=645-37412&t=TSwcttCYa4Ld9WzC-4
+export const VectorSearchQuery = () => (
+  <CreateIndexWrapper direction="column" justify="between">
+    <HeaderActions />
+  </CreateIndexWrapper>
+)