RI-7195: Extend Query component (#4794)

with useLiteActions

Author: pawelangelow

redisinsight/ui/src/components/query/index.ts

@@ -1,5 +1,6 @@
 import QueryCard from './query-card'
 import QueryActions from './query-actions'
+import QueryLiteActions from './query-lite-actions'
 import QueryTutorials from './query-tutorials'
 
-export { QueryCard, QueryActions, QueryTutorials }
+export { QueryCard, QueryActions, QueryLiteActions, QueryTutorials }

redisinsight/ui/src/components/query/query-lite-actions/QueryActions.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import QueryLiteActions from './QueryLiteActions'
+
+describe('QueryLiteActions', () => {
+  const onSubmit = jest.fn()
+  const onClear = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render both buttons', () => {
+    render(<QueryLiteActions onSubmit={onSubmit} onClear={onClear} />)
+
+    expect(screen.getByTestId('btn-submit')).toBeInTheDocument()
+    expect(screen.getByTestId('btn-clear')).toBeInTheDocument()
+  })
+
+  it('should call onSubmit when Run button is clicked', () => {
+    render(<QueryLiteActions onSubmit={onSubmit} onClear={onClear} />)
+
+    fireEvent.click(screen.getByTestId('btn-submit'))
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onClear when Clear button is clicked', () => {
+    render(<QueryLiteActions onSubmit={onSubmit} onClear={onClear} />)
+
+    fireEvent.click(screen.getByTestId('btn-clear'))
+    expect(onClear).toHaveBeenCalledTimes(1)
+  })
+
+  it('should disable buttons and show loading tooltip when isLoading is true', () => {
+    render(<QueryLiteActions onSubmit={onSubmit} onClear={onClear} isLoading />)
+
+    const submitBtn = screen.getByTestId('btn-submit') as HTMLButtonElement
+    const clearBtn = screen.getByTestId('btn-clear') as HTMLButtonElement
+
+    expect(submitBtn).toBeDisabled()
+    expect(clearBtn).toBeDisabled()
+  })
+})

redisinsight/ui/src/components/query/query-lite-actions/QueryLiteActions.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+import { KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
+import { KeyboardShortcut, RiTooltip } from 'uiSrc/components'
+
+import { PlayFilledIcon } from 'uiSrc/components/base/icons'
+
+import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { Button, EmptyButton } from 'uiSrc/components/base/forms/buttons'
+import { Text } from 'uiSrc/components/base/text'
+
+export interface Props {
+  onSubmit: () => void
+  onClear: () => void
+  isLoading?: boolean
+}
+
+const QueryLiteActions = (props: Props) => {
+  const { isLoading, onSubmit, onClear } = props
+  const KeyBoardTooltipContent = KEYBOARD_SHORTCUTS?.workbench?.runQuery && (
+    <>
+      <Text size="s">{KEYBOARD_SHORTCUTS.workbench.runQuery?.label}:</Text>
+      <Spacer size="s" />
+      <KeyboardShortcut
+        separator={KEYBOARD_SHORTCUTS?._separator}
+        items={KEYBOARD_SHORTCUTS.workbench.runQuery.keys}
+      />
+    </>
+  )
+
+  return (
+    <>
+      <RiTooltip
+        position="right"
+        content={
+          isLoading
+            ? 'Please wait while the commands are being executed…'
+            : 'Clear query'
+        }
+        data-testid="clear-query-tooltip"
+      >
+        <EmptyButton
+          onClick={onClear}
+          loading={isLoading}
+          disabled={isLoading}
+          aria-label="clear"
+          data-testid="btn-clear"
+        >
+          Clear
+        </EmptyButton>
+      </RiTooltip>
+
+      <RiTooltip
+        position="left"
+        content={
+          isLoading
+            ? 'Please wait while the commands are being executed…'
+            : KeyBoardTooltipContent
+        }
+        data-testid="run-query-tooltip"
+      >
+        <Button
+          onClick={onSubmit}
+          loading={isLoading}
+          disabled={isLoading}
+          icon={PlayFilledIcon}
+          aria-label="submit"
+          data-testid="btn-submit"
+        >
+          Run
+        </Button>
+      </RiTooltip>
+    </>
+  )
+}
+
+export default QueryLiteActions

redisinsight/ui/src/components/query/query-lite-actions/index.ts

@@ -0,0 +1,3 @@
+import QueryLiteActions from './QueryLiteActions'
+
+export default QueryLiteActions

redisinsight/ui/src/pages/workbench/components/query/Query/Query.tsx

@@ -40,7 +40,11 @@ import {
   workbenchResultsSelector,
 } from 'uiSrc/slices/workbench/wb-results'
 import DedicatedEditor from 'uiSrc/components/monaco-editor/components/dedicated-editor'
-import { QueryActions, QueryTutorials } from 'uiSrc/components/query'
+import {
+  QueryActions,
+  QueryTutorials,
+  QueryLiteActions,
+} from 'uiSrc/components/query'
 
 import {
   getRange,
@@ -78,6 +82,7 @@ export interface Props {
   activeMode: RunQueryMode
   resultsMode?: ResultsMode
   setQueryEl: Function
+  useLiteActions?: boolean
   setQuery: (script: string) => void
   onSubmit: (query?: string) => void
   onKeyDown?: (e: React.KeyboardEvent, script: string) => void
@@ -97,6 +102,7 @@ const Query = (props: Props) => {
     indexes = [],
     activeMode,
     resultsMode,
+    useLiteActions = false,
     setQuery = () => {},
     onKeyDown = () => {},
     onSubmit = () => {},
@@ -736,19 +742,29 @@ const Query = (props: Props) => {
           />
         </div>
         <div className={styles.queryFooter}>
-          <QueryTutorials
-            tutorials={TUTORIALS}
-            source="advanced_workbench_editor"
-          />
-          <QueryActions
-            isDisabled={isDedicatedEditorOpen}
-            isLoading={isLoading}
-            activeMode={activeMode}
-            resultsMode={resultsMode}
-            onChangeGroupMode={onChangeGroupMode}
-            onChangeMode={onQueryChangeMode}
-            onSubmit={handleSubmit}
-          />
+          {useLiteActions ? (
+            <QueryLiteActions
+              isLoading={isLoading}
+              onSubmit={handleSubmit}
+              onClear={() => setQuery('')}
+            />
+          ) : (
+            <>
+              <QueryTutorials
+                tutorials={TUTORIALS}
+                source="advanced_workbench_editor"
+              />
+              <QueryActions
+                isDisabled={isDedicatedEditorOpen}
+                isLoading={isLoading}
+                activeMode={activeMode}
+                resultsMode={resultsMode}
+                onChangeGroupMode={onChangeGroupMode}
+                onChangeMode={onQueryChangeMode}
+                onSubmit={handleSubmit}
+              />
+            </>
+          )}
         </div>
       </div>
       {isDedicatedEditorOpen && (

redisinsight/ui/src/pages/workbench/components/query/QueryWrapper.tsx

@@ -13,11 +13,15 @@ import { mergeRedisCommandsSpecs } from 'uiSrc/utils/transformers/redisCommands'
 import SEARCH_COMMANDS_SPEC from 'uiSrc/pages/workbench/data/supported_commands.json'
 import styles from './Query/styles.module.scss'
 import Query from './Query'
+import { Props as BaseQueryProps } from './Query/Query'
+
+type QueryProps = Pick<BaseQueryProps, 'useLiteActions'>
 
 export interface Props {
   query: string
   activeMode: RunQueryMode
   resultsMode?: ResultsMode
+  queryProps?: QueryProps
   setQuery: (script: string) => void
   setQueryEl: Function
   onKeyDown?: (e: React.KeyboardEvent, script: string) => void
@@ -37,6 +41,7 @@ const QueryWrapper = (props: Props) => {
     onSubmit,
     onQueryChangeMode,
     onChangeGroupMode,
+    queryProps = {},
   } = props
   const { loading: isCommandsLoading } = useSelector(appRedisCommandsSelector)
   const { id: connectedIndstanceId } = useSelector(connectedInstanceSelector)
@@ -79,6 +84,7 @@ const QueryWrapper = (props: Props) => {
       onSubmit={onSubmit}
       onQueryChangeMode={onQueryChangeMode}
       onChangeGroupMode={onChangeGroupMode}
+      {...queryProps}
     />
   )
 }