#RI-5683 - update search and query page

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

@@ -0,0 +1,9 @@
+import QueryCard from './query-card'
+import QueryActions from './query-actions'
+import QueryTutorials from './query-tutorials'
+
+export {
+  QueryCard,
+  QueryActions,
+  QueryTutorials
+}

redisinsight/ui/src/pages/workbench/components/query-actions/QueryActions.tsx → redisinsight/ui/src/components/query/query-actions/QueryActions.tsx

@@ -14,8 +14,8 @@ import Divider from 'uiSrc/components/divider/Divider'
 import styles from './styles.module.scss'
 
 export interface Props {
-  onChangeMode: () => void
-  onChangeGroupMode: () => void
+  onChangeMode?: () => void
+  onChangeGroupMode?: () => void
   onSubmit: () => void
   activeMode: RunQueryMode
   resultsMode?: ResultsMode
@@ -54,48 +54,52 @@ const QueryActions = (props: Props) => {
 
   return (
     <div className={cx(styles.actions, { [styles.disabledActions]: isDisabled })}>
-      <EuiToolTip
-        position="left"
-        content="Enables the raw output mode"
-        data-testid="change-mode-tooltip"
-      >
-        <EuiButton
-          fill
-          size="s"
-          color="secondary"
-          onClick={() => onChangeMode()}
-          iconType={RawModeIcon}
-          disabled={isLoading}
-          className={cx(styles.btn, styles.textBtn, { [styles.activeBtn]: activeMode === RunQueryMode.Raw })}
-          data-testid="btn-change-mode"
+      {onChangeMode && (
+        <EuiToolTip
+          position="left"
+          content="Enables the raw output mode"
+          data-testid="change-mode-tooltip"
         >
-          Raw mode
-        </EuiButton>
-      </EuiToolTip>
-      <EuiToolTip
-        position="left"
-        content={(
-          <>
-            Groups the command results into a single window.
-            <br />
-            When grouped, the results can be visualized only in the text format.
-          </>
+          <EuiButton
+            fill
+            size="s"
+            color="secondary"
+            onClick={() => onChangeMode()}
+            iconType={RawModeIcon}
+            disabled={isLoading}
+            className={cx(styles.btn, styles.textBtn, { [styles.activeBtn]: activeMode === RunQueryMode.Raw })}
+            data-testid="btn-change-mode"
+          >
+            Raw mode
+          </EuiButton>
+        </EuiToolTip>
+      )}
+      {onChangeGroupMode && (
+        <EuiToolTip
+          position="left"
+          content={(
+            <>
+              Groups the command results into a single window.
+              <br />
+              When grouped, the results can be visualized only in the text format.
+            </>
         )}
-        data-testid="group-results-tooltip"
-      >
-        <EuiButton
-          fill
-          size="s"
-          color="secondary"
-          onClick={() => onChangeGroupMode()}
-          disabled={isLoading}
-          iconType={GroupModeIcon}
-          className={cx(styles.btn, styles.textBtn, { [styles.activeBtn]: isGroupMode(resultsMode) })}
-          data-testid="btn-change-group-mode"
+          data-testid="group-results-tooltip"
         >
-          Group results
-        </EuiButton>
-      </EuiToolTip>
+          <EuiButton
+            fill
+            size="s"
+            color="secondary"
+            onClick={() => onChangeGroupMode()}
+            disabled={isLoading}
+            iconType={GroupModeIcon}
+            className={cx(styles.btn, styles.textBtn, { [styles.activeBtn]: isGroupMode(resultsMode) })}
+            data-testid="btn-change-group-mode"
+          >
+            Group results
+          </EuiButton>
+        </EuiToolTip>
+      )}
       <Divider orientation="vertical" colorVariable="separatorColor" className={styles.divider} />
       <EuiToolTip
         ref={runTooltipRef}

redisinsight/ui/src/pages/workbench/components/query-tutorials/QueryTutorials.spec.tsx → redisinsight/ui/src/components/query/query-tutorials/QueryTutorials.spec.tsx

@@ -6,8 +6,24 @@ import { findTutorialPath } from 'uiSrc/utils'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
+import { TutorialsIds } from 'uiSrc/constants'
 import QueryTutorials from './QueryTutorials'
 
+const mockedTutorials = [
+  {
+    id: TutorialsIds.IntroToSearch,
+    title: 'Intro to search'
+  },
+  {
+    id: TutorialsIds.BasicRedisUseCases,
+    title: 'Basic use cases'
+  },
+  {
+    id: TutorialsIds.IntroVectorSearch,
+    title: 'Intro to vector search'
+  },
+]
+
 jest.mock('uiSrc/utils', () => ({
   ...jest.requireActual('uiSrc/utils'),
   findTutorialPath: jest.fn(),
@@ -20,17 +36,17 @@ jest.mock('uiSrc/telemetry', () => ({
 
 describe('QueryTutorial', () => {
   it('should render', () => {
-    expect(render(<QueryTutorials />)).toBeTruthy()
+    expect(render(<QueryTutorials tutorials={mockedTutorials} source="source" />)).toBeTruthy()
   })
 
   it('should call proper history push after click on guide with tutorial', () => {
     const pushMock = jest.fn()
     reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock });
     (findTutorialPath as jest.Mock).mockImplementation(() => 'path')
 
-    render(<QueryTutorials />)
+    render(<QueryTutorials tutorials={mockedTutorials} source="source" />)
 
-    fireEvent.click(screen.getByTestId('wb-tutorials-link_sq-intro'))
+    fireEvent.click(screen.getByTestId('query-tutorials-link_sq-intro'))
 
     expect(pushMock).toHaveBeenCalledWith({
       search: 'path=tutorials/path'
@@ -42,16 +58,16 @@ describe('QueryTutorial', () => {
     (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock);
     (findTutorialPath as jest.Mock).mockImplementation(() => 'path')
 
-    render(<QueryTutorials />)
+    render(<QueryTutorials tutorials={mockedTutorials} source="source" />)
 
-    fireEvent.click(screen.getByTestId('wb-tutorials-link_sq-intro'))
+    fireEvent.click(screen.getByTestId('query-tutorials-link_sq-intro'))
 
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.EXPLORE_PANEL_TUTORIAL_OPENED,
       eventData: {
         path: 'path',
         databaseId: 'instanceId',
-        source: 'advanced_workbench_editor',
+        source: 'source',
       }
     })
   })

redisinsight/ui/src/pages/workbench/components/query-tutorials/QueryTutorials.tsx → redisinsight/ui/src/components/query/query-tutorials/QueryTutorials.tsx

@@ -4,28 +4,20 @@ import { EuiLink, EuiText } from '@elastic/eui'
 import { useDispatch } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { findTutorialPath } from 'uiSrc/utils'
-import { TutorialsIds } from 'uiSrc/constants'
 import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels'
 import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
 
 import styles from './styles.module.scss'
 
-const TUTORIALS = [
-  {
-    id: TutorialsIds.IntroToSearch,
-    title: 'Intro to search'
-  },
-  {
-    id: TutorialsIds.BasicRedisUseCases,
-    title: 'Basic use cases'
-  },
-  {
-    id: TutorialsIds.IntroVectorSearch,
-    title: 'Intro to vector search'
-  },
-]
+export interface Props {
+  tutorials: Array<{
+    id: string
+    title: string
+  }>
+  source: string
+}
 
-const QueryTutorials = () => {
+const QueryTutorials = ({ tutorials, source }: Props) => {
   const dispatch = useDispatch()
   const history = useHistory()
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -39,7 +31,7 @@ const QueryTutorials = () => {
       eventData: {
         path: tutorialPath,
         databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
-        source: 'advanced_workbench_editor',
+        source,
       }
     })
   }
@@ -49,13 +41,13 @@ const QueryTutorials = () => {
       <EuiText className={styles.title}>
         Tutorials:
       </EuiText>
-      {TUTORIALS.map(({ id, title }) => (
+      {tutorials.map(({ id, title }) => (
         <EuiLink
           role="button"
           key={id}
           className={styles.tutorialLink}
           onClick={() => handleClickTutorial(id)}
-          data-testid={`wb-tutorials-link_${id}`}
+          data-testid={`query-tutorials-link_${id}`}
         >
           {title}
         </EuiLink>

redisinsight/ui/src/constants/monaco/monaco.ts

@@ -41,6 +41,25 @@ export enum MonacoLanguage {
   Text = 'text',
 }
 
+export const defaultMonacoOptions: monacoEditor.editor.IStandaloneEditorConstructionOptions = {
+  tabCompletion: 'on',
+  wordWrap: 'on',
+  padding: { top: 10 },
+  automaticLayout: true,
+  formatOnPaste: false,
+  glyphMargin: true,
+  stickyScroll: {
+    enabled: true,
+    defaultModel: 'indentationModel'
+  },
+  suggest: {
+    preview: true,
+    showStatusBar: true,
+    showIcons: false,
+  },
+  lineNumbersMinChars: 4
+}
+
 export const DEFAULT_MONACO_YAML_URI = 'http://example.com/schema-name.json'
 export const DEFAULT_MONACO_FILE_MATCH = '*'
 

redisinsight/ui/src/constants/storage.ts

@@ -19,6 +19,7 @@ enum BrowserStorageItem {
   bulkActionDeleteId = 'bulkActionDeleteId',
   dbConfig = 'dbConfig_',
   RunQueryMode = 'RunQueryMode',
+  SQRunQueryMode = 'SQRunQueryMode',
   wbCleanUp = 'wbCleanUp',
   viewFormat = 'viewFormat',
   wbGroupMode = 'wbGroupMode',

redisinsight/ui/src/constants/tutorials.ts

@@ -4,6 +4,8 @@ enum TutorialsIds {
   BasicRedisUseCases = 'redis_use_cases_basic',
   RedisUseCases = 'redis_use_cases',
   IntroVectorSearch = 'vss-intro',
+  ExactMatch = 'sq-exact-match',
+  FullTextSearch = 'sq-full-text',
 }
 
 export {