Merge pull request #2168 from RedisInsight/fe/bugfix/RI-4106_rework-search

fix #RI-4597, #RI-4598, #RI-4610

Author: rsergeenko

redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.tsx

@@ -137,6 +137,7 @@ const BrowserRightPanel = (props: Props) => {
       )}
       {isCreateIndexPanelOpen && every([!isAddKeyPanelOpen, !isBulkActionsPanelOpen], Boolean) && (
         <CreateRedisearchIndex
+          arePanelsCollapsed={arePanelsCollapsed}
           onCreateIndex={closePanel}
           onClosePanel={onCloseRedisearchPanel}
         />

redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx

@@ -302,7 +302,7 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
         borderRadius="none"
         className={styles.footer}
       >
-        <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiButton
               color="secondary"

redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndexWrapper.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {
+  EuiButton,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -14,37 +15,53 @@ import CreateRedisearchIndex from './CreateRedisearchIndex'
 import styles from './styles.module.scss'
 
 export interface Props {
+  arePanelsCollapsed?: boolean
   onClosePanel?: () => void
   onCreateIndex?: () => void
 }
 
-const CreateRedisearchIndexWrapper = ({ onClosePanel, onCreateIndex }: Props) => (
+const CreateRedisearchIndexWrapper = ({ arePanelsCollapsed, onClosePanel, onCreateIndex }: Props) => (
   <div className={styles.page} data-testid="create-index-panel">
     <EuiFlexGroup
       justifyContent="center"
       direction="column"
       className={cx(styles.container, 'relative')}
       gutterSize="none"
+      responsive={false}
     >
       <div className={styles.headerWrapper}>
         <EuiFlexItem grow style={{ marginBottom: '16px' }}>
           <EuiTitle size="xs" className={styles.header}>
             <h4>New Index</h4>
           </EuiTitle>
-          <EuiToolTip
-            content="Close"
-            position="left"
-            anchorClassName={styles.closeBtnTooltip}
-          >
-            <EuiButtonIcon
-              iconType="cross"
-              color="primary"
-              aria-label="Close panel"
-              className={styles.closeBtn}
-              data-testid="create-index-close-panel"
+          {arePanelsCollapsed ? (
+            <EuiButton
+              fill
+              color="secondary"
               onClick={onClosePanel}
-            />
-          </EuiToolTip>
+              size="s"
+              iconType="arrowLeft"
+              className={styles.backBtn}
+              data-testid="create-index-back-btn"
+            >
+              Back
+            </EuiButton>
+          ) : (
+            <EuiToolTip
+              content="Close"
+              position="left"
+              anchorClassName={styles.closeBtnTooltip}
+            >
+              <EuiButtonIcon
+                iconType="cross"
+                color="primary"
+                aria-label="Close panel"
+                className={styles.closeBtn}
+                data-testid="create-index-close-panel"
+                onClick={onClosePanel}
+              />
+            </EuiToolTip>
+          )}
         </EuiFlexItem>
         <EuiFlexItem className={styles.header}>
           <EuiText size="s">Use CLI or Workbench to create more advanced indexes. See more details in the

redisinsight/ui/src/pages/browser/components/create-redisearch-index/styles.module.scss

@@ -31,6 +31,20 @@
     }
   }
 
+  .backBtn:global(.euiButton.euiButton--fill.euiButton--secondary) {
+    background-color: var(--browserComponentActive) !important;
+    border-color: var(--browserComponentActive) !important;
+    color: var(--buttonSecondaryTextColor) !important;
+
+    position: absolute;
+    top: 22px;
+    right: 18px;
+
+    &:hover, &:focus {
+      color: var(--buttonSecondaryTextColor) !important;
+    }
+  }
+
   .controlsDivider {
     margin: 32px 0;
   }

redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss

@@ -1,6 +1,8 @@
 .container {
   width: 168px;
   height: 36px;
+  flex-shrink: 0;
+
   :global {
     .euiFormControlLayout {
       .euiSuperSelectControl {

redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.spec.tsx

@@ -11,7 +11,7 @@ import {
   render,
   screen,
 } from 'uiSrc/utils/test-utils'
-import { loadKeys, loadList, redisearchListSelector, setSelectedIndex } from 'uiSrc/slices/browser/redisearch'
+import { loadList, redisearchListSelector, setSelectedIndex } from 'uiSrc/slices/browser/redisearch'
 import { bufferToString, stringToBuffer } from 'uiSrc/utils'
 import { localStorageService } from 'uiSrc/services'
 import { SearchMode } from 'uiSrc/slices/interfaces/keys'
@@ -111,7 +111,7 @@ describe('RediSearchIndexesList', () => {
     localStorageService.set = jest.fn();
 
     (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
-      loading: false,
+      host: '123.123.2.2',
       modules: [],
     }))
 
@@ -138,7 +138,7 @@ describe('RediSearchIndexesList', () => {
     );
 
     (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
-      loading: false,
+      host: '123.23.1.1',
       modules: [{ name: RedisDefaultModules.Search, }]
     }))
 
@@ -182,7 +182,7 @@ describe('RediSearchIndexesList', () => {
     );
 
     (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
-      loading: false,
+      host: '123.123.1.1',
       modules: [{ name: RedisDefaultModules.Search, }]
     }))
 

redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx

@@ -39,15 +39,15 @@ const RediSearchIndexesList = (props: Props) => {
   const { viewType, searchMode } = useSelector(keysSelector)
   const { selectedIndex = '' } = useSelector(redisearchSelector)
   const { data: list = [], loading } = useSelector(redisearchListSelector)
-  const { id: instanceId, modules, loading: instanceLoading } = useSelector(connectedInstanceSelector)
+  const { id: instanceId, modules, host: instanceHost } = useSelector(connectedInstanceSelector)
 
   const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false)
   const [index, setIndex] = useState<Nullable<string>>(JSON.stringify(selectedIndex))
 
   const dispatch = useDispatch()
 
   useEffect(() => {
-    if (instanceLoading) return
+    if (!instanceHost) return
 
     const moduleExists = isRedisearchAvailable(modules)
     if (moduleExists) {
@@ -57,7 +57,7 @@ const RediSearchIndexesList = (props: Props) => {
 
       localStorageService.set(BrowserStorageItem.browserSearchMode, SearchMode.Pattern)
     }
-  }, [instanceLoading, modules])
+  }, [instanceHost, modules])
 
   useEffect(() => {
     setIndex(JSON.stringify(selectedIndex || ''))

redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss

@@ -4,6 +4,7 @@
   min-width: 80px;
   overflow: hidden;
   position: relative;
+  flex-shrink: 0;
 
   :global {
     .euiFormControlLayout {

redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx

@@ -63,8 +63,8 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench' }: IProps) => {
   })
 
   const getStartedLink = (baseUrl: string) => {
-    const url = new URL(baseUrl)
     try {
+      const url = new URL(baseUrl)
       url.searchParams.append('utm_source', 'redisinsight')
       url.searchParams.append('utm_medium', 'app')
       url.searchParams.append('utm_campaign', type === 'browser' ? 'redisinsight_browser_search' : 'redisinsight_workbench')