#RI-4669 - fe part for clear workbench history

Author: rsergeenko

redisinsight/ui/src/components/query-card/QueryCard.tsx

@@ -39,6 +39,7 @@ export interface Props {
   summary?: ResultsSummary
   createdAt?: Date
   loading?: boolean
+  clearing?: boolean
   isNotStored?: boolean
   executionTime?: number
   db?: number
@@ -80,6 +81,7 @@ const QueryCard = (props: Props) => {
     onQueryProfile,
     onQueryReRun,
     loading,
+    clearing,
     emptyCommand,
     isNotStored,
     executionTime,
@@ -173,6 +175,7 @@ const QueryCard = (props: Props) => {
           isFullScreen={isFullScreen}
           query={command}
           loading={loading}
+          clearing={clearing}
           createdAt={createdAt}
           message={message}
           queryType={queryType}

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -62,6 +62,7 @@ export interface Props {
   queryType: WBQueryType
   selectedValue: string
   loading?: boolean
+  clearing?: boolean
   executionTime?: number
   emptyCommand?: boolean
   db?: number
@@ -96,6 +97,7 @@ const QueryCardHeader = (props: Props) => {
     toggleFullScreen,
     query = '',
     loading,
+    clearing,
     message,
     createdAt,
     mode,
@@ -169,6 +171,7 @@ const QueryCardHeader = (props: Props) => {
   const handleQueryDelete = (event: React.MouseEvent) => {
     eventStop(event)
     onQueryDelete()
+    sendEvent(TelemetryEvent.WORKBENCH_CLEAR_RESULT_CLICKED, query)
   }
 
   const handleQueryReRun = (event: React.MouseEvent) => {
@@ -404,7 +407,7 @@ const QueryCardHeader = (props: Props) => {
         </EuiFlexItem>
         <EuiFlexItem grow={false} className={styles.buttonIcon}>
           <EuiButtonIcon
-            disabled={loading}
+            disabled={loading || clearing}
             iconType="trash"
             aria-label="Delete command"
             data-testid="delete-command"

redisinsight/ui/src/constants/api.ts

@@ -77,7 +77,6 @@ enum ApiEndpoints {
   SETTINGS_AGREEMENTS_SPEC = 'settings/agreements/spec',
 
   WORKBENCH_COMMAND_EXECUTIONS = 'workbench/command-executions',
-  WORKBENCH_COMMANDS_EXECUTION = 'workbench/commands-execution',
 
   PROFILER = 'profiler',
   PROFILER_LOGS = 'profiler/logs',

redisinsight/ui/src/pages/workbench/WorkbenchPage.spec.tsx

@@ -240,6 +240,39 @@ describe('Telemetry', () => {
         rawMode: true,
       }
     })
+
+    sendEventTelemetry.mockRestore()
+  })
+
+  it('should call proper telemetry on delete', async () => {
+    const sendEventTelemetryMock = jest.fn()
+
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+    render(<WorkbenchPage />)
+
+    fireEvent.click(screen.getByTestId('delete-command'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.WORKBENCH_CLEAR_RESULT_CLICKED,
+      eventData: {
+        databaseId: 'instanceId',
+        command: 'info'
+      }
+    })
+
+    sendEventTelemetry.mockRestore()
+
+    fireEvent.click(screen.getByTestId('clear-history-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.WORKBENCH_CLEAR_ALL_RESULTS_CLICKED,
+      eventData: {
+        databaseId: 'instanceId'
+      }
+    })
+
+    sendEventTelemetry.mockRestore()
   })
 })
 describe('Raw mode', () => {

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import cx from 'classnames'
-import { EuiIcon, EuiText } from '@elastic/eui'
+import { EuiButtonEmpty, EuiIcon, EuiText } from '@elastic/eui'
 
 import { Theme } from 'uiSrc/constants'
 import { ProfileQueryType } from 'uiSrc/pages/workbench/constants'
@@ -17,22 +17,26 @@ import styles from './styles.module.scss'
 
 export interface Props {
   items: CommandExecutionUI[]
+  clearing: boolean
   activeMode: RunQueryMode
   activeResultsMode?: ResultsMode
   scrollDivRef: React.Ref<HTMLDivElement>
   onQueryReRun: (query: string, commandId?: Nullable<string>, executeParams?: CodeButtonParams) => void
   onQueryDelete: (commandId: string) => void
+  onAllQueriesDelete: () => void
   onQueryOpen: (commandId: string) => void
   onQueryProfile: (query: string, commandId?: Nullable<string>, executeParams?: CodeButtonParams) => void
 }
 const WBResults = (props: Props) => {
   const {
     items = [],
+    clearing,
     activeMode,
     activeResultsMode,
     onQueryReRun,
     onQueryProfile,
     onQueryDelete,
+    onAllQueriesDelete,
     onQueryOpen,
     scrollDivRef
   } = props
@@ -69,6 +73,20 @@ const WBResults = (props: Props) => {
 
   return (
     <div className={cx(styles.container)}>
+      {!!items.length && (
+        <div className={styles.header}>
+          <EuiButtonEmpty
+            size="s"
+            iconType="trash"
+            iconSize="s"
+            className={styles.clearAllBtn}
+            onClick={() => onAllQueriesDelete?.()}
+            data-testid="clear-history-btn"
+          >
+            Clear Results
+          </EuiButtonEmpty>
+        </div>
+      )}
       <div ref={scrollDivRef} />
       {items.map((
         {
@@ -93,6 +111,7 @@ const WBResults = (props: Props) => {
           isOpen={isOpen}
           result={result}
           summary={summary}
+          clearing={clearing}
           loading={loading}
           command={command}
           createdAt={createdAt}

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss

@@ -14,6 +14,14 @@
   overflow: auto;
 }
 
+.header {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 12px;
+}
+
 .noResults {
   width: 326px;
   height: 100%;
@@ -42,3 +50,14 @@
   width: 42px !important;
   height: 42px !important;
 }
+
+.clearAllBtn {
+  font-size: 14px !important;
+
+  :global {
+    .euiIcon {
+      width: 14px !important;
+      height: 14px !important;
+    }
+  }
+}

redisinsight/ui/src/pages/workbench/components/wb-results/WBResultsWrapper.tsx

@@ -7,12 +7,14 @@ import WBResults from './WBResults'
 
 export interface Props {
   items: CommandExecutionUI[]
+  clearing: boolean
   activeMode: RunQueryMode
   activeResultsMode: ResultsMode
   scrollDivRef: React.Ref<HTMLDivElement>
   onQueryReRun: (query: string, commandId?: Nullable<string>, executeParams?: CodeButtonParams) => void
   onQueryOpen: (commandId: string) => void
   onQueryDelete: (commandId: string) => void
+  onAllQueriesDelete: () => void
   onQueryProfile: (query: string, commandId?: Nullable<string>, executeParams?: CodeButtonParams) => void
 }
 

redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx

@@ -34,6 +34,7 @@ const verticalPanelIds = {
 export interface Props {
   script: string
   items: CommandExecutionUI[]
+  clearing: boolean
   setScript: (script: string) => void
   setScriptEl: Function
   scriptEl: Nullable<monacoEditor.editor.IStandaloneCodeEditor>
@@ -43,6 +44,7 @@ export interface Props {
   onSubmit: (query?: string, commandId?: Nullable<string>, executeParams?: CodeButtonParams) => void
   onQueryOpen: (commandId?: string) => void
   onQueryDelete: (commandId: string) => void
+  onAllQueriesDelete: () => void
   onQueryChangeMode: () => void
   onChangeGroupMode: () => void
 }
@@ -61,6 +63,7 @@ const WBView = (props: Props) => {
   const {
     script = '',
     items,
+    clearing,
     setScript,
     setScriptEl,
     scriptEl,
@@ -69,6 +72,7 @@ const WBView = (props: Props) => {
     onSubmit,
     onQueryOpen,
     onQueryDelete,
+    onAllQueriesDelete,
     onQueryChangeMode,
     onChangeGroupMode,
     scrollDivRef,
@@ -228,13 +232,15 @@ const WBView = (props: Props) => {
                 >
                   <WBResultsWrapper
                     items={items}
+                    clearing={clearing}
                     activeMode={activeMode}
                     activeResultsMode={resultsMode}
                     scrollDivRef={scrollDivRef}
                     onQueryReRun={handleReRun}
                     onQueryProfile={handleProfile}
                     onQueryOpen={onQueryOpen}
                     onQueryDelete={onQueryDelete}
+                    onAllQueriesDelete={onAllQueriesDelete}
                   />
                 </EuiResizablePanel>
               </>

redisinsight/ui/src/pages/workbench/components/wb-view/WBViewWrapper.spec.tsx

@@ -13,9 +13,13 @@ import {
 import QueryWrapper from 'uiSrc/components/query'
 import { Props as QueryProps } from 'uiSrc/components/query/QueryWrapper'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
-import { loadWBHistory, sendWBCommandAction } from 'uiSrc/slices/workbench/wb-results'
-import { getWBGuides } from 'uiSrc/slices/workbench/wb-guides'
-import { getWBTutorials } from 'uiSrc/slices/workbench/wb-tutorials'
+import {
+  clearWbResults,
+  loadWBHistory,
+  processWBCommand,
+  sendWBCommandAction,
+  workbenchResultsSelector
+} from 'uiSrc/slices/workbench/wb-results'
 
 import { getWBCustomTutorials } from 'uiSrc/slices/workbench/wb-custom-tutorials'
 import WBViewWrapper from './WBViewWrapper'
@@ -71,6 +75,10 @@ jest.mock('uiSrc/slices/workbench/wb-results', () => ({
   sendWBCommandClusterAction: jest.fn(),
   processUnsupportedCommand: jest.fn(),
   updateCliCommandHistory: jest.fn,
+  workbenchResultsSelector: jest.fn().mockReturnValue({
+    loading: false,
+    items: []
+  })
 }))
 
 jest.mock('uiSrc/slices/workbench/wb-guides', () => {
@@ -111,6 +119,39 @@ describe('WBViewWrapper', () => {
     )
   })
 
+  it('should call delete command', () => {
+    (workbenchResultsSelector as jest.Mock).mockImplementation(() => ({
+      items: [
+        { id: '1' },
+      ],
+    }))
+    render(<WBViewWrapper />)
+
+    fireEvent.click(screen.getByTestId('delete-command'))
+    expect(clearStoreActions(store.getActions().slice(-1))).toEqual(clearStoreActions([processWBCommand('1')]))
+  })
+
+  it('should call delete all command', () => {
+    (workbenchResultsSelector as jest.Mock).mockImplementation(() => ({
+      items: [
+        { id: '1' },
+      ],
+    }))
+    render(<WBViewWrapper />)
+
+    fireEvent.click(screen.getByTestId('clear-history-btn'))
+    expect(clearStoreActions(store.getActions().slice(-1))).toEqual(clearStoreActions([clearWbResults()]))
+  })
+
+  it('should not display clear results when with empty history', () => {
+    (workbenchResultsSelector as jest.Mock).mockImplementation(() => ({
+      items: [],
+    }))
+    render(<WBViewWrapper />)
+
+    expect(screen.queryByTestId('clear-history-btn')).not.toBeInTheDocument()
+  })
+
   it.skip('"onSubmit" for Cluster connection should call "sendWBCommandClusterAction"', async () => {
     (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
       id: '123',