RI-7195: Add search screen (#4788)

* add hideFields for QueryCard
* add tests

---------

Co-authored-by: Krum Tyukenov <[email protected]>

Author: pawelangelow

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

@@ -12,7 +12,7 @@ import {
 } from 'uiSrc/utils/test-utils'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
-import QueryCardHeader, { Props } from './QueryCardHeader'
+import QueryCardHeader, { HIDE_FIELDS, Props } from './QueryCardHeader'
 
 const mockedProps = mock<Props>()
 
@@ -34,7 +34,16 @@ jest.mock('uiSrc/services', () => ({
 jest.mock('uiSrc/slices/app/plugins', () => ({
   ...jest.requireActual('uiSrc/slices/app/plugins'),
   appPluginsSelector: jest.fn().mockReturnValue({
-    visualizations: [],
+    visualizations: [
+      {
+        id: '1',
+        uniqId: '1',
+        name: 'test',
+        plugin: '',
+        activationMethod: 'render',
+        matchCommands: ['FT.SEARCH'],
+      }
+    ],
   }),
 }))
 
@@ -80,6 +89,32 @@ describe('QueryCardHeader', () => {
     expect(screen.getByTestId('copy-command')).toBeDisabled()
   })
 
+  it('should hide Profiler button', async () => {
+    render(
+      <QueryCardHeader
+        {...instance(mockedProps)}
+        query="FT.GET something"
+        isOpen
+        hideFields={[HIDE_FIELDS.profiler]}
+      />,
+    )
+
+    expect(screen.queryByTestId('run-profile-type')).not.toBeInTheDocument()
+  })
+
+  it('should hide Change View Type button', async () => {
+    render(
+      <QueryCardHeader
+        {...instance(mockedProps)}
+        query="FT.SEARCH index somethingCool"
+        isOpen
+        hideFields={[HIDE_FIELDS.viewType]}
+      />,
+    )
+
+    expect(screen.queryByTestId('select-view-type')).not.toBeInTheDocument()
+  })
+
   it('event telemetry WORKBENCH_COMMAND_COPIED should be call after click on copy btn', async () => {
     const command = 'info'
     const sendEventTelemetryMock = jest.fn()

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

@@ -72,6 +72,7 @@ export interface Props {
   executionTime?: number
   emptyCommand?: boolean
   db?: number
+  hideFields?: string[]
   toggleOpen: () => void
   toggleFullScreen: () => void
   setSelectedValue: (type: WBQueryType, value: string) => void
@@ -80,6 +81,11 @@ export interface Props {
   onQueryProfile: (type: ProfileQueryType) => void
 }
 
+export const HIDE_FIELDS = {
+  viewType: 'viewType',
+  profiler: 'profiler',
+}
+
 const getExecutionTimeString = (value: number): string => {
   if (value < 1) {
     return '0.001 msec'
@@ -137,6 +143,7 @@ const QueryCardHeader = (props: Props) => {
     onQueryReRun,
     onQueryProfile,
     db,
+    hideFields = [],
   } = props
 
   const { visualizations = [] } = useSelector(appPluginsSelector)
@@ -410,54 +417,58 @@ const QueryCardHeader = (props: Props) => {
                 </RiTooltip>
               )}
             </FlexItem>
-            <FlexItem
-              className={cx(styles.buttonIcon, styles.viewTypeIcon)}
-              onClick={onDropDownViewClick}
-            >
-              {isOpen && canCommandProfile && !summaryText && (
-                <div className={styles.dropdownWrapper}>
-                  <div className={styles.dropdown}>
-                    <ProfileSelect
-                      placeholder={profileOptions[0].inputDisplay}
-                      onChange={(value: ProfileQueryType | string) =>
-                        onQueryProfile(value as ProfileQueryType)
-                      }
-                      options={profileOptions}
-                      data-testid="run-profile-type"
-                      valueRender={({ option, isOptionValue }) => {
-                        if (isOptionValue) {
-                          return option.dropdownDisplay as JSX.Element
+            {!hideFields?.includes(HIDE_FIELDS.profiler) && (
+              <FlexItem
+                className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+                onClick={onDropDownViewClick}
+              >
+                {isOpen && canCommandProfile && !summaryText && (
+                  <div className={styles.dropdownWrapper}>
+                    <div className={styles.dropdown}>
+                      <ProfileSelect
+                        placeholder={profileOptions[0].inputDisplay}
+                        onChange={(value: ProfileQueryType | string) =>
+                          onQueryProfile(value as ProfileQueryType)
                         }
-                        return option.inputDisplay as JSX.Element
-                      }}
-                    />
+                        options={profileOptions}
+                        data-testid="run-profile-type"
+                        valueRender={({ option, isOptionValue }) => {
+                          if (isOptionValue) {
+                            return option.dropdownDisplay as JSX.Element
+                          }
+                          return option.inputDisplay as JSX.Element
+                        }}
+                      />
+                    </div>
                   </div>
-                </div>
-              )}
-            </FlexItem>
-            <FlexItem
-              className={cx(styles.buttonIcon, styles.viewTypeIcon)}
-              onClick={onDropDownViewClick}
-            >
-              {isOpen && options.length > 1 && !summaryText && (
-                <div className={styles.dropdownWrapper}>
-                  <div className={styles.dropdown}>
-                    <ProfileSelect
-                      options={modifiedOptions}
-                      valueRender={({ option, isOptionValue }) => {
-                        if (isOptionValue) {
-                          return option.dropdownDisplay as JSX.Element
-                        }
-                        return option.inputDisplay as JSX.Element
-                      }}
-                      value={selectedValue}
-                      onChange={(value: string) => onChangeView(value)}
-                      data-testid="select-view-type"
-                    />
+                )}
+              </FlexItem>
+            )}
+            {!hideFields?.includes(HIDE_FIELDS.viewType) && (
+              <FlexItem
+                className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+                onClick={onDropDownViewClick}
+              >
+                {isOpen && options.length > 1 && !summaryText && (
+                  <div className={styles.dropdownWrapper}>
+                    <div className={styles.dropdown}>
+                      <ProfileSelect
+                        options={modifiedOptions}
+                        valueRender={({ option, isOptionValue }) => {
+                          if (isOptionValue) {
+                            return option.dropdownDisplay as JSX.Element
+                          }
+                          return option.inputDisplay as JSX.Element
+                        }}
+                        value={selectedValue}
+                        onChange={(value: string) => onChangeView(value)}
+                        data-testid="select-view-type"
+                      />
+                    </div>
                   </div>
-                </div>
-              )}
-            </FlexItem>
+                )}
+              </FlexItem>
+            )}
             <FlexItem
               className={styles.buttonIcon}
               onClick={onDropDownViewClick}

redisinsight/ui/src/pages/vector-search/VectorSearchPage.tsx

@@ -4,13 +4,11 @@ import { VectorSearchCreateIndex } from './create-index/VectorSearchCreateIndex'
 import { VectorSearchQuery } from './query/VectorSearchQuery'
 
 export const VectorSearchPage = () => {
-  const hasIndexes = false
+  const hasIndexes = true
 
   if (!hasIndexes) {
     return <VectorSearchCreateIndex />
   }
 
-  // TODO: QueryScreen
-
   return <VectorSearchQuery />
 }