Merge pull request #2606 from RedisInsight/fe/feature/RI-4892

#RI-4892 - add refresh for list of indexes

Author: mariasergeenko

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

@@ -200,4 +200,25 @@ describe('RediSearchIndexesList', () => {
 
     expect(fetchKeysMock).toBeCalled()
   })
+
+  it('should load indexes after click on refresh', () => {
+    (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
+      host: '123.23.1.1',
+      modules: [{ name: RedisDefaultModules.Search, }]
+    }))
+
+    render(<RediSearchIndexesList {...instance(mockedProps)} />)
+
+    const afterRenderActions = [...store.getActions()]
+
+    fireEvent.click(screen.getByTestId('refresh-indexes-btn'))
+
+    const expectedActions = [
+      ...afterRenderActions,
+      loadList(),
+    ]
+    expect(clearStoreActions(store.getActions())).toEqual(
+      clearStoreActions(expectedActions)
+    )
+  })
 })

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

@@ -1,8 +1,10 @@
 import {
   EuiButtonEmpty,
+  EuiButtonIcon,
   EuiOutsideClickDetector,
   EuiSuperSelect,
   EuiSuperSelectOption,
+  EuiToolTip,
 } from '@elastic/eui'
 import cx from 'classnames'
 import React, { useEffect, useState } from 'react'
@@ -127,31 +129,53 @@ const RediSearchIndexesList = (props: Props) => {
     })
   }
 
+  const handleRefresh = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    dispatch(fetchRedisearchListAction())
+  }
+
   return (
     <EuiOutsideClickDetector
       onOutsideClick={() => setIsSelectOpen(false)}
     >
       <div className={cx(styles.container)}>
-        <EuiSuperSelect
-          fullWidth
-          itemClassName={cx('withColorDefinition', styles.searchMode)}
-          disabled={loading}
-          isLoading={loading}
-          options={options}
-          isOpen={isSelectOpen}
-          valueOfSelected={index || ''}
-          onChange={onChangeIndex}
-          data-testid="select-search-mode"
-        />
-        {!selectedIndex && (
-          <EuiButtonEmpty
-            className={styles.placeholder}
-            onClick={() => setIsSelectOpen(true)}
-            data-testid="select-index-placeholder"
+        <div className={styles.select}>
+          <EuiSuperSelect
+            fullWidth
+            itemClassName={cx('withColorDefinition', styles.searchMode)}
+            disabled={loading}
+            isLoading={loading}
+            options={options}
+            isOpen={isSelectOpen}
+            valueOfSelected={index || ''}
+            onChange={onChangeIndex}
+            data-testid="select-search-mode"
+          />
+          {!selectedIndex && (
+            <EuiButtonEmpty
+              className={styles.placeholder}
+              onClick={() => setIsSelectOpen(true)}
+              data-testid="select-index-placeholder"
+            >
+              Select Index
+            </EuiButtonEmpty>
+          )}
+        </div>
+        <div className={styles.refresh}>
+          <EuiToolTip
+            content="Refresh Indexes"
           >
-            Select Index
-          </EuiButtonEmpty>
-        )}
+            <EuiButtonIcon
+              size="s"
+              iconType="refresh"
+              disabled={loading}
+              className={styles.refreshBtn}
+              onClick={handleRefresh}
+              aria-label="refresh indexes list"
+              data-testid="refresh-indexes-btn"
+            />
+          </EuiToolTip>
+        </div>
       </div>
     </EuiOutsideClickDetector>
   )

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

@@ -1,6 +1,6 @@
 .container {
   height: 36px;
-  width: 168px;
+  width: 200px;
   min-width: 80px;
   overflow: hidden;
   position: relative;
@@ -16,7 +16,7 @@
         border: 1px solid var(--controlsBorderColor) !important;
         border-left: 0 !important;
         border-right: 0 !important;
-        padding: 0 25px 0 10px !important;
+        padding: 0 55px 0 10px !important;
 
         overflow: hidden;
         white-space: nowrap;
@@ -29,9 +29,6 @@
         &:focus {
           background-color: var(--euiColorEmptyShade) !important;
         }
-        &:not(:disabled):hover {
-          background-color: var(--hoverInListColorDarken) !important;
-        }
       }
     }
     .euiPopover:not(.euiSuperSelect) {
@@ -51,6 +48,7 @@
     }
     .euiFormControlLayoutIcons {
       z-index: 6;
+      right: 36px;
 
       .euiLoadingSpinner {
         margin-right: -22px;
@@ -144,3 +142,23 @@
     background-color: transparent !important;
   }
 }
+
+.refresh {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+  top: 50%;
+  right: 1px;
+  transform: translateY(-50%);
+  z-index: 6;
+
+  .refreshBtn {
+    width: 30px;
+
+    &:hover {
+      transform: translateY(0) !important;
+    }
+  }
+}

tests/e2e/pageObjects/browser-page.ts

@@ -138,6 +138,7 @@ export class BrowserPage extends InstancePage {
     timestampOption = Selector('#time');
     formatSwitcher = Selector('[data-testid=select-format-key-value]', { timeout: 2000 });
     formatSwitcherIcon = Selector('[data-testid^=key-value-formatter-option-selected]');
+    refreshIndexButton = Selector('[data-testid=refresh-indexes-btn]');
     selectIndexDdn = Selector('[data-testid=select-index-placeholder],[data-testid=select-search-mode]', { timeout: 1000 });
     createIndexBtn = Selector('[data-testid=create-index-btn]');
     cancelIndexCreationBtn = Selector('[data-testid=create-index-cancel-btn]');

tests/e2e/tests/critical-path/browser/search-capabilities.e2e.ts

@@ -129,12 +129,13 @@ test
     })('Search by index keys scanned for JSON', async t => {
         keyName = Common.generateWord(10);
         indexName = `idx:${keyName}`;
+        await t.click(browserPage.redisearchModeBtn);
         const command = `FT.CREATE ${indexName} ON JSON PREFIX 1 "device:" SCHEMA id numeric`;
 
         // Create index for JSON keys
         await browserPage.Cli.sendCommandInCli(command);
+        await t.click(browserPage.refreshIndexButton);
         // Verify that user can can get 500 keys (limit 0 500) in Browser view
-        await t.click(browserPage.redisearchModeBtn);
         await browserPage.selectIndexByName(indexName);
         // Verify that all keys are displayed according to selected index
         for (let i = 0; i < 15; i++) {