Merge pull request #2650 from RedisInsight/feature/RI-4711_exact-match

#RI-4711 - add exact match option

Author: vlad-dargel

redisinsight/ui/src/components/multi-search/MultiSearch.tsx

@@ -32,6 +32,7 @@ export interface Props {
     onDelete: (ids: string[]) => void
     loading?: boolean
   }
+  optionalButton?: React.ReactNode
   onChange: (value: string) => void
   onChangeOptions?: (options: string[]) => void
   onClear?: () => void
@@ -52,6 +53,7 @@ const MultiSearch = (props: Props) => {
     onChange,
     onKeyDown,
     onClear = () => {},
+    optionalButton,
     className,
     compressed,
     ...rest
@@ -249,6 +251,7 @@ const MultiSearch = (props: Props) => {
               />
             </EuiToolTip>
           )}
+          {optionalButton}
           {!!suggestionOptions?.length && (
             <EuiToolTip
               content={suggestions?.buttonTooltipTitle}

redisinsight/ui/src/constants/storage.ts

@@ -4,6 +4,7 @@ enum BrowserStorageItem {
   theme = 'theme',
   browserViewType = 'browserViewType',
   browserSearchMode = 'browserSearchMode',
+  browserExactMatch = 'browserExactMatch',
   cliClientUuid = 'cliClientUuid',
   cliResizableContainer = 'cliResizableContainer',
   cliInputHistory = 'cliInputHistory',

redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.spec.tsx

@@ -10,10 +10,18 @@ import {
   screen,
   act,
 } from 'uiSrc/utils/test-utils'
-import { keysSelector, loadKeys, loadSearchHistory, setFilter, setPatternSearchMatch } from 'uiSrc/slices/browser/keys'
+import {
+  changeExactMatch,
+  keysSelector,
+  loadKeys,
+  loadSearchHistory,
+  setFilter,
+  setPatternSearchMatch
+} from 'uiSrc/slices/browser/keys'
 
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import SearchKeyList from './SearchKeyList'
 
 jest.mock('uiSrc/slices/browser/keys', () => ({
@@ -47,6 +55,11 @@ jest.mock('uiSrc/slices/browser/redisearch', () => ({
   }),
 }))
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -137,4 +150,51 @@ describe('SearchKeyList', () => {
       clearStoreActions([...afterRenderActions])
     )
   })
+
+  it('should change exact match after click on button', () => {
+    keysSelector.mockImplementation(() => ({
+      searchMode: SearchMode.Pattern,
+      viewType: KeyViewType.Browser,
+      isSearch: false,
+      isFiltered: false,
+    }))
+
+    render(<SearchKeyList />)
+
+    const afterRenderActions = [...store.getActions()]
+
+    fireEvent.click(screen.getByTestId('exact-match-button'))
+
+    expect(clearStoreActions(store.getActions())).toEqual(
+      clearStoreActions([...afterRenderActions, changeExactMatch(true)])
+    )
+  })
+
+  it('should call proper telemetry after click exact match button', () => {
+    keysSelector.mockImplementation(() => ({
+      searchMode: SearchMode.Pattern,
+      viewType: KeyViewType.Browser,
+      isSearch: false,
+      isFiltered: false,
+    }))
+
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<SearchKeyList />)
+
+    fireEvent.click(screen.getByTestId('exact-match-button'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.BROWSER_FILTER_PER_PATTERN_CLICKED,
+      eventData: {
+        databaseId: 'instanceId',
+        current: 'Exact',
+        previous: 'Pattern',
+        view: KeyViewType.Browser
+      }
+    });
+
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
 })

redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.tsx

@@ -1,12 +1,14 @@
-import { keys } from '@elastic/eui'
+import { EuiButtonIcon, EuiToolTip, keys } from '@elastic/eui'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 
+import { useParams } from 'react-router-dom'
 import MultiSearch from 'uiSrc/components/multi-search/MultiSearch'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { replaceSpaces } from 'uiSrc/utils'
 import {
+  changeExactMatch,
   deleteSearchHistoryAction,
   fetchKeys,
   fetchSearchHistoryAction,
@@ -15,13 +17,11 @@ import {
   setFilter,
   setSearchMatch
 } from 'uiSrc/slices/browser/keys'
-import { SearchMode, KeyViewType, SearchHistoryItem } from 'uiSrc/slices/interfaces/keys'
-import {
-  redisearchHistorySelector,
-  redisearchSelector
-} from 'uiSrc/slices/browser/redisearch'
+import { KeyViewType, SearchHistoryItem, SearchMode } from 'uiSrc/slices/interfaces/keys'
+import { redisearchHistorySelector, redisearchSelector } from 'uiSrc/slices/browser/redisearch'
 
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import styles from './styles.module.scss'
 
 const placeholders = {
@@ -31,7 +31,7 @@ const placeholders = {
 
 const SearchKeyList = () => {
   const { id } = useSelector(connectedInstanceSelector)
-  const { search, viewType, searchMode } = useSelector(keysSelector)
+  const { search, viewType, searchMode, exactMatch } = useSelector(keysSelector)
   const { search: redisearchQuery, selectedIndex } = useSelector(redisearchSelector)
   const { data: rediSearchHistory, loading: rediSearchHistoryLoading } = useSelector(redisearchHistorySelector)
   const { data: searchHistory, loading: searchHistoryLoading } = useSelector(keysSearchHistorySelector)
@@ -40,6 +40,7 @@ const SearchKeyList = () => {
   const [disableSubmit, setDisableSubmit] = useState(false)
 
   const dispatch = useDispatch()
+  const { instanceId } = useParams<{ instanceId: string }>()
 
   useEffect(() => {
     if (id) {
@@ -114,6 +115,23 @@ const SearchKeyList = () => {
     handleApply('')
   }
 
+  const handleChangeExactMatch = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.BROWSER_FILTER_PER_PATTERN_CLICKED,
+      eventData: {
+        databaseId: instanceId,
+        view: viewType,
+        previous: exactMatch ? 'Exact' : 'Pattern',
+        current: exactMatch ? 'Pattern' : 'Exact',
+      }
+    })
+    dispatch(changeExactMatch(!exactMatch))
+
+    if (value) {
+      handleApply()
+    }
+  }
+
   return (
     <div className={cx(styles.container, { [styles.redisearchMode]: searchMode === SearchMode.Redisearch })}>
       <MultiSearch
@@ -130,6 +148,24 @@ const SearchKeyList = () => {
           onApply: handleApplySuggestion,
           onDelete: handleDeleteSuggestions,
         }}
+        optionalButton={searchMode === SearchMode.Pattern ? (
+          <EuiToolTip
+            title="Exact Search"
+            content={exactMatch ? 'Disable to see keys matching your pattern' : 'Enable to see keys that exactly match your pattern'}
+            position="bottom"
+          >
+            <EuiButtonIcon
+              display="empty"
+              iconType="bullseye"
+              color="primary"
+              size="xs"
+              onClick={handleChangeExactMatch}
+              aria-label="exact match button"
+              className={cx(styles.exactSearchIcon, { [styles.disabled]: !exactMatch })}
+              data-testid="exact-match-button"
+            />
+          </EuiToolTip>
+        ) : null}
         disableSubmit={disableSubmit}
         placeholder={placeholders[searchMode]}
         className={styles.input}

redisinsight/ui/src/pages/browser/components/search-key-list/styles.module.scss

@@ -31,3 +31,12 @@
   margin-right: 50px;
   word-break: break-all;
 }
+
+.exactSearchIcon {
+  margin-left: 8px;
+  margin-right: -4px;
+
+  &.disabled {
+    opacity: 0.5;
+  }
+}

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

@@ -80,6 +80,7 @@ export const initialState: KeysStore = {
   isBrowserFullScreen: false,
   searchMode: localStorageService?.get(BrowserStorageItem.browserSearchMode) ?? SearchMode.Pattern,
   viewType: localStorageService?.get(BrowserStorageItem.browserViewType) ?? KeyViewType.Browser,
+  exactMatch: localStorageService?.get(BrowserStorageItem.browserExactMatch) ?? true,
   data: {
     total: 0,
     scanned: 0,
@@ -355,6 +356,11 @@ const keysSlice = createSlice({
       state.searchMode = payload
     },
 
+    changeExactMatch: (state, { payload }: { payload: boolean }) => {
+      state.exactMatch = payload
+      localStorageService?.set(BrowserStorageItem.browserExactMatch, payload)
+    },
+
     resetAddKey: (state) => {
       state.addKey = cloneDeep(initialState.addKey)
     },
@@ -457,6 +463,7 @@ export const {
   toggleBrowserFullScreen,
   setViewFormat,
   changeSearchMode,
+  changeExactMatch,
   loadSearchHistory,
   loadSearchHistorySuccess,
   loadSearchHistoryFailure,
@@ -513,16 +520,17 @@ export function fetchPatternKeysAction(
       sourceKeysFetch = CancelToken.source()
 
       const state = stateInit()
-      const { search: match, filter: type } = state.browser.keys
+      const { search: match, filter: type, exactMatch } = state.browser.keys
       const { encoding } = state.app.info
+      const withExactMatch = exactMatch ? match : `*${match}*`
 
       const { data, status } = await apiService.post<GetKeysWithDetailsResponse[]>(
         getUrl(
           state.connections.instances?.connectedInstance?.id ?? '',
           ApiEndpoints.KEYS
         ),
         {
-          cursor, count, type, match: match || DEFAULT_SEARCH_MATCH, keysInfo: false,
+          cursor, count, type, match: withExactMatch || DEFAULT_SEARCH_MATCH, keysInfo: false,
         },
         {
           params: { encoding },

redisinsight/ui/src/slices/interfaces/keys.ts

@@ -32,6 +32,7 @@ export interface KeysStore {
   isBrowserFullScreen: boolean
   viewType: KeyViewType
   searchMode: SearchMode
+  exactMatch: boolean
   data: KeysStoreData
   selectedKey: {
     loading: boolean

redisinsight/ui/src/telemetry/events.ts

@@ -75,6 +75,7 @@ export enum TelemetryEvent {
   BROWSER_WORKBENCH_LINK_CLICKED = 'BROWSER_WORKBENCH_LINK_CLICKED',
   BROWSER_DATABASE_INDEX_CHANGED = 'BROWSER_DATABASE_INDEX_CHANGED',
   BROWSER_FILTER_MODE_CHANGE_FAILED = 'BROWSER_FILTER_MODE_CHANGE_FAILED',
+  BROWSER_FILTER_PER_PATTERN_CLICKED = 'BROWSER_FILTER_PER_PATTERN_CLICKED',
   BROWSER_TUTORIAL_CLICKED = 'BROWSER_TUTORIAL_CLICKED',
   LIST_VIEW_OPENED = 'LIST_VIEW_OPENED',
   OVERVIEW_MENU_CLICKED = 'OVERVIEW_MENU_CLICKED',

tests/e2e/pageObjects/browser-page.ts

@@ -107,6 +107,7 @@ export class BrowserPage extends InstancePage {
     clearFilterHistoryBtn = Selector('[data-testid=clear-history-btn]');
     guideLinksBtn = Selector('[data-testid^=guide-button-]');
     backToBrowserBtn = Selector('[data-testid=back-right-panel-btn]');
+    exactSearchBtn = Selector('[data-testid=exact-match-button]');
     //CONTAINERS
     streamGroupsContainer = Selector('[data-testid=stream-groups-container]');
     streamConsumersContainer = Selector('[data-testid=stream-consumers-container]');

tests/e2e/tests/regression/browser/filtering.e2e.ts

@@ -7,11 +7,13 @@ import { DatabaseAPIRequests } from '../../../helpers/api/api-database';
 import { keyTypes } from '../../../helpers/keys';
 import { Common } from '../../../helpers/common';
 import { APIKeyRequests } from '../../../helpers/api/api-keys';
+import { BrowserActions } from '../../../common-actions/browser-actions';
 
 const browserPage = new BrowserPage();
 const databaseHelper = new DatabaseHelper();
 const databaseAPIRequests = new DatabaseAPIRequests();
 const apiKeyRequests = new APIKeyRequests();
+const browserActions = new BrowserActions();
 
 let keyName = Common.generateWord(20);
 let keyName2 = Common.generateWord(20);
@@ -58,8 +60,39 @@ test('Verify that user can filter per pattern with ? (matches keys with any char
     // Filter per pattern with ?
     await browserPage.searchByKeyName(searchedValue);
     // Verify that key was found
+    // Verify that filter requests are sent as entered when Exact Search enabled
     await t.expect(await browserPage.isKeyIsDisplayedInTheList(keyName)).ok('The key was not found');
 });
+test('Verify that filter requests are sent as entered when Exact Search enabled', async t => {
+    const randomValue = Common.generateWord(10);
+    const searchedValue = 'eyForSearch*?\\[]';
+    const tooltipExactSearchEnabledText = 'Disable to see keys matching your pattern';
+    const tooltipExactSearchDisabledText = 'Enable to see keys that exactly match your pattern';
+    keyName = `KeyForSearch*?[]789${randomValue}`;
+
+    // Add new key
+    await browserPage.addStringKey(keyName);
+    // Filter by Exact Search
+    await browserPage.searchByKeyName(searchedValue);
+    // Verify that key was not found
+    // Verify that Exact Search is enabled by default
+    await t.expect(await browserPage.isKeyIsDisplayedInTheList(keyName)).notOk('The key was found by Exact Search with not full name');
+
+    // Verify that user can see ”Exact Search Disable to see keys matching your pattern” text when hover over the icon with enabled Exact Search
+    await t.hover(browserPage.exactSearchBtn);
+    await browserActions.verifyTooltipContainsText(tooltipExactSearchEnabledText, true);
+
+    // Disable Exact Search
+    await t.click(browserPage.exactSearchBtn);
+    // Verify that user can see ”Exact Search Enable to see keys that exactly match your pattern” text when hover over the icon with disabled Exact Search
+    await t.hover(browserPage.exactSearchBtn);
+    await browserActions.verifyTooltipContainsText(tooltipExactSearchDisabledText, true);
+
+    await browserPage.searchByKeyName(searchedValue);
+    // Verify that key was found
+    // Verify that user can see results that fit into this pattern: *{request}* when Exact Search is disabled
+    await t.expect(await browserPage.isKeyIsDisplayedInTheList(keyName)).ok('The key was not found with disabled Exact Search');
+});
 test
     .after(async() => {
         // Clear and delete database