RI-7196: add SavedQueriesScreen (#4803)

* RI-7196: add SavedQueriesScreen

* fix border color

* add SavedQueriesScreen tests

* various style fixes, link saved queries

* fix failing unit tests

* fix manage indexes issue

* update SavedQueriesScreen and tests

* update HeaderActions tests

Author: KrumTy

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

@@ -2,11 +2,15 @@ import React from 'react'
 import { TelemetryPageView } from 'uiSrc/telemetry'
 import { usePageViewTelemetry } from 'uiSrc/telemetry/usePageViewTelemetry'
 
+import { Loader } from 'uiSrc/components/base/display'
 import { VectorSearchCreateIndex } from './create-index/VectorSearchCreateIndex'
 import { VectorSearchQuery } from './query/VectorSearchQuery'
+import { VectorSearchPageWrapper } from './styles'
+import { useRedisearchListData } from './useRedisearchListData'
 
 export const VectorSearchPage = () => {
-  const hasIndexes = true
+  const { data, loading } = useRedisearchListData()
+  const hasIndexes = data?.length > 0
 
   usePageViewTelemetry({
     page: TelemetryPageView.VECTOR_SEARCH_PAGE,
@@ -17,9 +21,10 @@ export const VectorSearchPage = () => {
   //   `${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)} - Vector Search`,
   // )
 
-  if (!hasIndexes) {
-    return <VectorSearchCreateIndex />
-  }
-
-  return <VectorSearchQuery />
+  return (
+    <VectorSearchPageWrapper>
+      {loading && <Loader />}
+      {hasIndexes ? <VectorSearchQuery /> : <VectorSearchCreateIndex />}
+    </VectorSearchPageWrapper>
+  )
 }

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

@@ -7,12 +7,6 @@ import { Button, SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
 
 import { selectedBikesIndexFields, stepContents } from './steps'
-import {
-  CreateIndexContent,
-  CreateIndexFooter,
-  CreateIndexHeader,
-  CreateIndexWrapper,
-} from './styles'
 import {
   CreateSearchIndexParameters,
   PresetDataType,
@@ -21,6 +15,12 @@ import {
   SearchIndexType,
 } from './types'
 import { useCreateIndex } from './hooks/useCreateIndex'
+import {
+  VectorSearchScreenContent,
+  VectorSearchScreenFooter,
+  VectorSearchScreenHeader,
+  VectorSearchScreenWrapper,
+} from '../styles'
 
 const stepNextButtonTexts = [
   'Proceed to adding data',
@@ -73,8 +73,8 @@ export const VectorSearchCreateIndex = ({
   }
 
   return (
-    <CreateIndexWrapper direction="column" justify="between">
-      <CreateIndexHeader direction="row">
+    <VectorSearchScreenWrapper direction="column" justify="between">
+      <VectorSearchScreenHeader direction="row">
         <Title size="M" data-testid="title">
           New vector search
         </Title>
@@ -83,14 +83,14 @@ export const VectorSearchCreateIndex = ({
           <Stepper.Step>Adding data</Stepper.Step>
           <Stepper.Step>Create Index</Stepper.Step>
         </Stepper>
-      </CreateIndexHeader>
-      <CreateIndexContent direction="column" grow={1}>
+      </VectorSearchScreenHeader>
+      <VectorSearchScreenContent direction="column" grow={1}>
         <StepContent
           parameters={createSearchIndexParameters}
           setParameters={setParameters}
         />
-      </CreateIndexContent>
-      <CreateIndexFooter direction="row">
+      </VectorSearchScreenContent>
+      <VectorSearchScreenFooter direction="row">
         {showBackButton && (
           <SecondaryButton
             iconSide="left"
@@ -101,8 +101,10 @@ export const VectorSearchCreateIndex = ({
           </SecondaryButton>
         )}
         <div />
-        <Button loading={loading} onClick={onNextClick}>{stepNextButtonTexts[step]}</Button>
-      </CreateIndexFooter>
-    </CreateIndexWrapper>
+        <Button loading={loading} onClick={onNextClick}>
+          {stepNextButtonTexts[step]}
+        </Button>
+      </VectorSearchScreenFooter>
+    </VectorSearchScreenWrapper>
   )
 }

redisinsight/ui/src/pages/vector-search/create-index/styles.ts

@@ -1,31 +1,13 @@
 import { Loader } from '@redis-ui/components'
-import React, { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import {
-  fetchRedisearchListAction,
-  redisearchListSelector,
-} from 'uiSrc/slices/browser/redisearch'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
-import { bufferToString, isRedisearchAvailable } from 'uiSrc/utils'
+import React from 'react'
+
+import { bufferToString } from 'uiSrc/utils'
 import { StyledManageIndexesListAction } from './ManageIndexesList.styles'
 import { IndexSection } from './IndexSection'
+import { useRedisearchListData } from '../useRedisearchListData'
 
 export const ManageIndexesList = () => {
-  const { loading, data } = useSelector(redisearchListSelector)
-  const { modules, host: instanceHost } = useSelector(connectedInstanceSelector)
-
-  const dispatch = useDispatch()
-
-  useEffect(() => {
-    if (!instanceHost) {
-      return
-    }
-
-    const moduleExists = isRedisearchAvailable(modules)
-    if (moduleExists) {
-      dispatch(fetchRedisearchListAction())
-    }
-  }, [instanceHost, modules])
+  const { data, loading } = useRedisearchListData()
 
   return (
     <StyledManageIndexesListAction data-testid="manage-indexes-list">

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cleanup, render, screen, userEvent } from 'uiSrc/utils/test-utils'
 
-import { HeaderActions } from './HeaderActions'
+import { HeaderActions, HeaderActionsProps } from './HeaderActions'
 
 // Workaround for @redis-ui/components Title component issue with react-children-utilities
 // TypeError: react_utils.childrenToString is not a function
@@ -10,11 +10,20 @@ jest.mock('uiSrc/components/base/layout/drawer', () => ({
   DrawerHeader: jest.fn().mockReturnValue(null),
 }))
 
-const renderComponent = () => render(<HeaderActions />)
+const mockProps: HeaderActionsProps = {
+  isManageIndexesDrawerOpen: false,
+  setIsManageIndexesDrawerOpen: jest.fn(),
+  isSavedQueriesOpen: false,
+  setIsSavedQueriesOpen: jest.fn(),
+}
 
-describe('ManageIndexesDrawer', () => {
+const renderComponent = (props = mockProps) =>
+  render(<HeaderActions {...props} />)
+
+describe('HeaderActions', () => {
   beforeEach(() => {
     cleanup()
+    jest.clearAllMocks()
   })
 
   it('should render', () => {
@@ -33,21 +42,63 @@ describe('ManageIndexesDrawer', () => {
     expect(manageIndexesButton).toBeInTheDocument()
   })
 
-  it('should open a drawer when "Manage indexes" is clicked', async () => {
-    renderComponent()
+  it('should call setIsSavedQueriesOpen when "Saved queries" is clicked', async () => {
+    const mockSetIsSavedQueriesOpen = jest.fn()
+    renderComponent({
+      ...mockProps,
+      setIsSavedQueriesOpen: mockSetIsSavedQueriesOpen,
+    })
 
-    const manageIndexesButton = screen.getByText('Manage indexes')
-    expect(manageIndexesButton).toBeInTheDocument()
+    const savedQueriesButton = screen.getByText('Saved queries')
+    await userEvent.click(savedQueriesButton)
+
+    expect(mockSetIsSavedQueriesOpen).toHaveBeenCalledWith(true)
+  })
+
+  it('should call setIsSavedQueriesOpen with false when "Saved queries" is clicked and isSavedQueriesOpen is true', async () => {
+    const mockSetIsSavedQueriesOpen = jest.fn()
+    renderComponent({
+      ...mockProps,
+      isSavedQueriesOpen: true,
+      setIsSavedQueriesOpen: mockSetIsSavedQueriesOpen,
+    })
+
+    const savedQueriesButton = screen.getByText('Saved queries')
+    await userEvent.click(savedQueriesButton)
 
-    // Simulate clicking the "Manage indexes" button
+    expect(mockSetIsSavedQueriesOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('should call setIsManageIndexesDrawerOpen when "Manage indexes" is clicked', async () => {
+    const mockSetIsManageIndexesDrawerOpen = jest.fn()
+    renderComponent({
+      ...mockProps,
+      setIsManageIndexesDrawerOpen: mockSetIsManageIndexesDrawerOpen,
+    })
+
+    const manageIndexesButton = screen.getByText('Manage indexes')
     await userEvent.click(manageIndexesButton)
 
-    // Check if the drawer is opened
+    expect(mockSetIsManageIndexesDrawerOpen).toHaveBeenCalledWith(true)
+  })
+
+  it('should render ManageIndexesDrawer when isManageIndexesDrawerOpen is true', () => {
+    renderComponent({
+      ...mockProps,
+      isManageIndexesDrawerOpen: true,
+    })
+
     const drawer = screen.getByTestId('manage-indexes-drawer')
     expect(drawer).toBeInTheDocument()
+  })
+
+  it('should not render ManageIndexesDrawer when isManageIndexesDrawerOpen is false', () => {
+    renderComponent({
+      ...mockProps,
+      isManageIndexesDrawerOpen: false,
+    })
 
-    // Simulate clicking outside the drawer to close it
-    await userEvent.click(document.body, { pointerEventsCheck: 0 })
+    const drawer = screen.queryByTestId('manage-indexes-drawer')
     expect(drawer).not.toBeInTheDocument()
   })
 })

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

@@ -6,6 +6,7 @@ export const StyledHeaderAction = styled(FlexGroup)`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  margin-bottom: ${({ theme }) => theme.core.space.space200};
 `
 
 export const StyledTextButton = styled(TextButton)`

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

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

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

@@ -1,9 +1,4 @@
 import styled from 'styled-components'
-import { ResizableContainer } from 'uiSrc/components/base/layout'
-
-export const StyledResizableContainer = styled(ResizableContainer)`
-  padding: 10px;
-`
 
 export const StyledNoResultsWrapper = styled.div`
   display: flex;