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

Revert "#RI-4711 - add exact match option"

Author: vlad-dargel

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

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

redisinsight/ui/src/constants/storage.ts

@@ -4,7 +4,6 @@ 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,18 +10,10 @@ import {
   screen,
   act,
 } from 'uiSrc/utils/test-utils'
-import {
-  changeExactMatch,
-  keysSelector,
-  loadKeys,
-  loadSearchHistory,
-  setFilter,
-  setPatternSearchMatch
-} from 'uiSrc/slices/browser/keys'
+import { 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', () => ({
@@ -55,11 +47,6 @@ jest.mock('uiSrc/slices/browser/redisearch', () => ({
   }),
 }))
 
-jest.mock('uiSrc/telemetry', () => ({
-  ...jest.requireActual('uiSrc/telemetry'),
-  sendEventTelemetry: jest.fn(),
-}))
-
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -150,51 +137,4 @@ 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,14 +1,12 @@
-import { EuiButtonIcon, EuiToolTip, keys } from '@elastic/eui'
+import { 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,
@@ -17,11 +15,13 @@ import {
   setFilter,
   setSearchMatch
 } from 'uiSrc/slices/browser/keys'
-import { KeyViewType, SearchHistoryItem, SearchMode } from 'uiSrc/slices/interfaces/keys'
-import { redisearchHistorySelector, redisearchSelector } from 'uiSrc/slices/browser/redisearch'
+import { SearchMode, KeyViewType, SearchHistoryItem } 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, exactMatch } = useSelector(keysSelector)
+  const { search, viewType, searchMode } = useSelector(keysSelector)
   const { search: redisearchQuery, selectedIndex } = useSelector(redisearchSelector)
   const { data: rediSearchHistory, loading: rediSearchHistoryLoading } = useSelector(redisearchHistorySelector)
   const { data: searchHistory, loading: searchHistoryLoading } = useSelector(keysSearchHistorySelector)
@@ -40,7 +40,6 @@ const SearchKeyList = () => {
   const [disableSubmit, setDisableSubmit] = useState(false)
 
   const dispatch = useDispatch()
-  const { instanceId } = useParams<{ instanceId: string }>()
 
   useEffect(() => {
     if (id) {
@@ -115,23 +114,6 @@ 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
@@ -148,24 +130,6 @@ 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,12 +31,3 @@
   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,7 +80,6 @@ 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,
@@ -356,11 +355,6 @@ 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)
     },
@@ -463,7 +457,6 @@ export const {
   toggleBrowserFullScreen,
   setViewFormat,
   changeSearchMode,
-  changeExactMatch,
   loadSearchHistory,
   loadSearchHistorySuccess,
   loadSearchHistoryFailure,
@@ -520,17 +513,16 @@ export function fetchPatternKeysAction(
       sourceKeysFetch = CancelToken.source()
 
       const state = stateInit()
-      const { search: match, filter: type, exactMatch } = state.browser.keys
+      const { search: match, filter: type } = 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: withExactMatch || DEFAULT_SEARCH_MATCH, keysInfo: false,
+          cursor, count, type, match: match || DEFAULT_SEARCH_MATCH, keysInfo: false,
         },
         {
           params: { encoding },

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

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

redisinsight/ui/src/telemetry/events.ts

@@ -78,7 +78,6 @@ 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,7 +107,6 @@ 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,13 +7,11 @@ 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);
@@ -60,39 +58,8 @@ 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