feat(ui): added "delete index"

- extend the "manage indexes" boxes with a button to allow deleting the index
- added unit tests

re #RI-7197

Author: valkirilov

redisinsight/api/src/modules/browser/redisearch/dto/index.ts

@@ -2,3 +2,4 @@ export * from './create.redisearch-index.dto';
 export * from './search.redisearch.dto';
 export * from './list.redisearch-indexes.response';
 export * from './index.info.dto';
+export * from './index.delete.dto';

redisinsight/ui/src/components/notifications/success-messages.tsx

@@ -196,6 +196,14 @@ export default {
     title: 'Index has been created',
     message: 'Open the list of indexes to see it.',
   }),
+  DELETE_INDEX: (indexName: string) => ({
+    title: 'Index has been deleted',
+    message: (
+      <>
+        <b>{formatNameShort(indexName)}</b> has been deleted from Redis Insight.
+      </>
+    ),
+  }),
   TEST_CONNECTION: () => ({
     title: 'Connection is successful',
   }),

redisinsight/ui/src/mocks/handlers/browser/redisearchHandlers.ts

@@ -28,6 +28,10 @@ const handlers: RestHandler[] = [
     async (_req, res, ctx) =>
       res(ctx.status(200), ctx.json(MOCK_REDISEARCH_INDEX_INFO)),
   ),
+  rest.delete(
+    getMswURL(getUrl(INSTANCE_ID_MOCK, ApiEndpoints.REDISEARCH)),
+    async (_req, res, ctx) => res(ctx.status(204)),
+  ),
 ]
 
 export default handlers

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

@@ -1,39 +1,89 @@
 import React from 'react'
-import { cloneDeep } from 'lodash'
 import { Provider } from 'react-redux'
+import { rest } from 'msw'
+import { configureStore, combineReducers } from '@reduxjs/toolkit'
+import { mswServer } from 'uiSrc/mocks/server'
 import {
   cleanup,
   render,
   screen,
-  mockStore,
   initialStateDefault,
   userEvent,
+  getMswURL,
 } from 'uiSrc/utils/test-utils'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import { MOCK_REDISEARCH_INDEX_INFO } from 'uiSrc/mocks/data/redisearch'
+import Notifications from 'uiSrc/components/notifications'
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
+import { ApiEndpoints } from 'uiSrc/constants'
+import { getUrl } from 'uiSrc/utils'
+import { RootState } from 'uiSrc/slices/store'
+import notificationsReducer from 'uiSrc/slices/app/notifications'
+import appInfoReducer from 'uiSrc/slices/app/info'
+import redisearchReducer from 'uiSrc/slices/browser/redisearch'
+import instancesReducer from 'uiSrc/slices/instances/instances'
 import { IndexSection, IndexSectionProps } from './IndexSection'
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+const createTestStore = () => {
+  // TODO: Use rootReducer instead, once you realize how to solve the issue with the instancesReducer
+  // console.error No reducer provided for key "instances"
+  // > 81 |   connections: combineReducers({
+  const testReducer = combineReducers({
+    app: combineReducers({
+      notifications: notificationsReducer,
+      info: appInfoReducer,
+    }),
+    browser: combineReducers({
+      redisearch: redisearchReducer,
+    }),
+    connections: combineReducers({
+      instances: instancesReducer,
+    }),
+  })
+
+  const testState: RootState = {
+    ...initialStateDefault,
+
+    connections: {
+      ...initialStateDefault.connections,
+      instances: {
+        ...initialStateDefault.connections.instances,
+        connectedInstance: {
+          ...initialStateDefault.connections.instances.connectedInstance,
+          id: INSTANCE_ID_MOCK,
+          name: 'test-instance',
+          host: 'localhost',
+          port: 6379,
+          modules: [],
+        },
+      },
+    },
+  }
+
+  return configureStore({
+    reducer: testReducer,
+    preloadedState: testState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({ serializableCheck: false }),
+  })
+}
+
 const renderComponent = (props?: Partial<IndexSectionProps>) => {
   const defaultProps: IndexSectionProps = {
     index: 'test-index',
   }
 
-  // Create a mock store with proper connected instance state
-  const stateWithConnectedInstance = cloneDeep(initialStateDefault)
-  stateWithConnectedInstance.connections.instances.connectedInstance = {
-    ...stateWithConnectedInstance.connections.instances.connectedInstance,
-    id: INSTANCE_ID_MOCK,
-    name: 'test-instance',
-    host: 'localhost',
-    port: 6379,
-    modules: [],
-  }
-
-  const store = mockStore(stateWithConnectedInstance)
+  const store = createTestStore()
 
   return render(
     <Provider store={store}>
       <IndexSection {...defaultProps} {...props} />
+      <Notifications />
     </Provider>,
   )
 }
@@ -147,4 +197,115 @@ describe('IndexSection', () => {
     expect(weightValue[0]).toBeInTheDocument()
     expect(separatorValue[0]).toBeInTheDocument()
   })
+
+  describe('delete index', () => {
+    let confirmSpy: jest.SpyInstance
+    let telemetryMock: jest.Mock
+
+    beforeEach(() => {
+      // Mock window.confirm to return true (user confirms deletion)
+      confirmSpy = jest.spyOn(window, 'confirm').mockReturnValue(true)
+
+      // Mock the telemetry function
+      telemetryMock = sendEventTelemetry as jest.Mock
+      telemetryMock.mockClear()
+    })
+
+    afterEach(() => {
+      confirmSpy.mockRestore()
+      mswServer.resetHandlers()
+    })
+
+    it('should delete an index when the delete button is clicked and confirmed', async () => {
+      renderComponent()
+
+      const deleteButton = screen.getByText('Delete')
+      expect(deleteButton).toBeInTheDocument()
+
+      // Click the delete button
+      await userEvent.click(deleteButton)
+
+      // Verify that confirm was called with the correct message
+      expect(confirmSpy).toHaveBeenCalledWith(
+        'Are you sure you want to delete this index?',
+      )
+
+      // Wait for the success notification to appear
+      const successNotification = await screen.findByText(
+        'Index has been deleted',
+      )
+      expect(successNotification).toBeInTheDocument()
+
+      // Verify that telemetry event was sent with correct data
+      expect(telemetryMock).toHaveBeenCalledTimes(1)
+      const telemetryCall = telemetryMock.mock.calls[0][0]
+      expect(telemetryCall.event).toBe(TelemetryEvent.SEARCH_INDEX_DELETED)
+      expect(telemetryCall.eventData.databaseId).toBe(INSTANCE_ID_MOCK)
+      expect(telemetryCall.eventData.indexName).toBeDefined()
+    })
+
+    it('should not delete an index when the deletion is cancelled', async () => {
+      // Mock window.confirm to return false (user cancels deletion)
+      confirmSpy.mockReturnValueOnce(false)
+
+      renderComponent()
+
+      const deleteButton = screen.getByText('Delete')
+      expect(deleteButton).toBeInTheDocument()
+
+      // Click the delete button
+      await userEvent.click(deleteButton)
+
+      // Verify that confirm was called with the correct message
+      expect(confirmSpy).toHaveBeenCalledWith(
+        'Are you sure you want to delete this index?',
+      )
+
+      // Verify that no API call was made and no notification appears
+      expect(telemetryMock).not.toHaveBeenCalled()
+
+      const successNotification = screen.queryByText('Index has been deleted')
+      expect(successNotification).not.toBeInTheDocument()
+    })
+
+    it('should handle deletion failure gracefully', async () => {
+      // Override the MSW handler to return an error for this test
+      mswServer.use(
+        rest.delete(
+          getMswURL(getUrl(INSTANCE_ID_MOCK, ApiEndpoints.REDISEARCH)),
+          async (_req, res, ctx) =>
+            res(
+              ctx.status(500),
+              ctx.json({
+                error: 'Internal Server Error',
+                statusCode: 500,
+                message: 'Failed to delete index',
+              }),
+            ),
+        ),
+      )
+
+      renderComponent()
+
+      const deleteButton = screen.getByText('Delete')
+      expect(deleteButton).toBeInTheDocument()
+
+      // Click the delete button
+      await userEvent.click(deleteButton)
+
+      // Verify that confirm was called with the correct message
+      expect(confirmSpy).toHaveBeenCalledWith(
+        'Are you sure you want to delete this index?',
+      )
+
+      // Wait for the error notification to appear
+      const errorNotification = await screen.findByText(
+        'Failed to delete index',
+      )
+      expect(errorNotification).toBeInTheDocument()
+
+      // Verify that telemetry event was not sent on error
+      expect(telemetryMock).not.toHaveBeenCalled()
+    })
+  })
 })

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

@@ -1,11 +1,19 @@
 import React, { useEffect, useState } from 'react'
 import { CategoryValueList, Section, SectionProps } from '@redis-ui/components'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { CategoryValueListItem } from '@redis-ui/components/dist/Section/components/Header/components/CategoryValueList'
 import { RedisString } from 'uiSrc/slices/interfaces'
-import { bufferToString, formatLongName } from 'uiSrc/utils'
-import { fetchRedisearchInfoAction } from 'uiSrc/slices/browser/redisearch'
-import { IndexInfoDto } from 'apiSrc/modules/browser/redisearch/dto'
+import { bufferToString, formatLongName, stringToBuffer } from 'uiSrc/utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import {
+  deleteRedisearchIndexAction,
+  fetchRedisearchInfoAction,
+} from 'uiSrc/slices/browser/redisearch'
+import {
+  IndexInfoDto,
+  IndexDeleteRequestBodyDto,
+} from 'apiSrc/modules/browser/redisearch/dto'
 import { IndexAttributesList, IndexInfoTableData } from './IndexAttributesList'
 
 export interface IndexSectionProps extends Omit<SectionProps, 'label'> {
@@ -15,6 +23,7 @@ export interface IndexSectionProps extends Omit<SectionProps, 'label'> {
 export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
   const dispatch = useDispatch()
   const indexName = bufferToString(index)
+  const { id: instanceId } = useSelector(connectedInstanceSelector)
 
   const [tableData, setTableData] = useState<IndexInfoTableData[]>([])
   const [indexSummaryInfo, setIndexSummaryInfo] = useState<
@@ -32,6 +41,30 @@ export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
     )
   }, [indexName, dispatch])
 
+  const handleDelete = () => {
+    // TODO: Replace with confirmation popup once the design is ready
+    // eslint-disable-next-line no-restricted-globals
+    const result = confirm('Are you sure you want to delete this index?')
+
+    if (result) {
+      const data: IndexDeleteRequestBodyDto = {
+        index: stringToBuffer(indexName),
+      }
+
+      dispatch(deleteRedisearchIndexAction(data, onDeletedIndexSuccess))
+    }
+  }
+
+  const onDeletedIndexSuccess = (data: IndexDeleteRequestBodyDto) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.SEARCH_INDEX_DELETED,
+      eventData: {
+        databaseId: instanceId,
+        indexName: data.index,
+      },
+    })
+  }
+
   return (
     <Section
       collapsible
@@ -41,7 +74,7 @@ export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
       label={formatLongName(indexName)}
       defaultOpen={false}
       actionButtonText="Delete" // TODO: Replace with an icon of a trash can
-      // onAction={handleDelete} // TODO: Implement delete functionality
+      onAction={handleDelete}
       data-testid={`manage-indexes-list--item--${indexName}`}
       {...rest}
     />

redisinsight/ui/src/slices/browser/redisearch.ts

@@ -23,6 +23,7 @@ import { SearchHistoryItem } from 'uiSrc/slices/interfaces/keys'
 import { GetKeysWithDetailsResponse } from 'apiSrc/modules/browser/keys/dto'
 import {
   CreateRedisearchIndexDto,
+  IndexDeleteRequestBodyDto,
   ListRedisearchIndexesResponse,
 } from 'apiSrc/modules/browser/redisearch/dto'
 
@@ -521,6 +522,43 @@ export function createRedisearchIndexAction(
   }
 }
 
+export function deleteRedisearchIndexAction(
+  data: IndexDeleteRequestBodyDto,
+  onSuccess?: (data: IndexDeleteRequestBodyDto) => void,
+  onFailed?: () => void,
+) {
+  return async (dispatch: AppDispatch, stateInit: () => RootState) => {
+    try {
+      const state = stateInit()
+      const { encoding } = state.app.info
+      const { status } = await apiService.delete<void>(
+        getUrl(
+          state.connections.instances.connectedInstance?.id,
+          ApiEndpoints.REDISEARCH,
+        ),
+        {
+          data,
+          params: { encoding },
+        },
+      )
+
+      if (isStatusSuccessful(status)) {
+        dispatch(
+          addMessageNotification(
+            successMessages.DELETE_INDEX(bufferToString(data.index as string)),
+          ),
+        )
+        dispatch(fetchRedisearchListAction())
+        onSuccess?.(data)
+      }
+    } catch (_err) {
+      const error = _err as AxiosError
+      dispatch(addErrorNotification(error))
+      onFailed?.()
+    }
+  }
+}
+
 export function fetchRedisearchHistoryAction(
   onSuccess?: () => void,
   onFailed?: () => void,