From 71728a292343b88ffea17894808a006deb8a8471 Mon Sep 17 00:00:00 2001 From: "Roman.Sergeenko" Date: Wed, 4 Jan 2023 15:11:45 +0300 Subject: [PATCH] #RI-3986 - fix refresh keys after change index #RI-3985 - remove selected key after changing index --- .../instance-header/InstanceHeader.tsx | 17 +++++++++++++---- .../ui/src/pages/browser/BrowserPage.tsx | 19 ++++++++++++++++++- .../browser-left-panel/BrowserLeftPanel.tsx | 18 +++--------------- 3 files changed, 34 insertions(+), 20 deletions(-) diff --git a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx index 90a3eb15ef..60355423b3 100644 --- a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx +++ b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx @@ -25,14 +25,19 @@ import { appInfoSelector } from 'uiSrc/slices/app/info' import ShortInstanceInfo from 'uiSrc/components/instance-header/components/ShortInstanceInfo' import DatabaseOverviewWrapper from 'uiSrc/components/database-overview/DatabaseOverviewWrapper' -import { appContextDbIndex, clearBrowserKeyListData } from 'uiSrc/slices/app/context' +import { appContextDbIndex, clearBrowserKeyListData, setBrowserSelectedKey } from 'uiSrc/slices/app/context' import InlineItemEditor from 'uiSrc/components/inline-item-editor' import { selectOnFocus, validateNumber } from 'uiSrc/utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { resetKeyInfo } from 'uiSrc/slices/browser/keys' import styles from './styles.module.scss' -const InstanceHeader = () => { +export interface Props { + onChangeDbIndex?: (index: number) => void +} + +const InstanceHeader = ({ onChangeDbIndex }: Props) => { const { name = '', host = '', @@ -72,7 +77,7 @@ const InstanceHeader = () => { history.push(Pages.home) } - const onChangeDbIndex = () => { + const handleChangeDbIndex = () => { setIsDbIndexEditing(false) if (db === +dbIndex) return @@ -82,6 +87,10 @@ const InstanceHeader = () => { +dbIndex, () => { dispatch(clearBrowserKeyListData()) + onChangeDbIndex?.(+dbIndex) + dispatch(resetKeyInfo()) + dispatch(setBrowserSelectedKey(null)) + sendEventTelemetry({ event: TelemetryEvent.BROWSER_DATABASE_INDEX_CHANGED, eventData: { @@ -129,7 +138,7 @@ const InstanceHeader = () => {
setIsDbIndexEditing(false)} viewChildrenMode={false} controlsClassName={styles.controls} diff --git a/redisinsight/ui/src/pages/browser/BrowserPage.tsx b/redisinsight/ui/src/pages/browser/BrowserPage.tsx index e888ebe054..fca14a2560 100644 --- a/redisinsight/ui/src/pages/browser/BrowserPage.tsx +++ b/redisinsight/ui/src/pages/browser/BrowserPage.tsx @@ -16,6 +16,7 @@ import { TelemetryPageView, } from 'uiSrc/telemetry' import { + fetchKeys, keysSelector, resetKeyInfo, selectedKeyDataSelector, @@ -35,6 +36,8 @@ import InstanceHeader from 'uiSrc/components/instance-header' import { RedisResponseBuffer } from 'uiSrc/slices/interfaces' import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' +import { KeyViewType } from 'uiSrc/slices/interfaces/keys' +import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api' import BrowserLeftPanel from './components/browser-left-panel' import BrowserRightPanel from './components/browser-right-panel' @@ -56,6 +59,7 @@ const BrowserPage = () => { } = useSelector(appContextBrowser) const { isBrowserFullScreen } = useSelector(keysSelector) const { type } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 } + const { viewType, searchMode } = useSelector(keysSelector) const [isPageViewSent, setIsPageViewSent] = useState(false) const [arePanelsCollapsed, setArePanelsCollapsed] = useState(false) @@ -158,6 +162,19 @@ const BrowserPage = () => { setIsCreateIndexPanelOpen(false) }, []) + const onChangeDbIndex = () => { + if (selectedKey) { + dispatch(toggleBrowserFullScreen(true)) + setSelectedKey(null) + } + + dispatch(fetchKeys( + searchMode, + '0', + viewType === KeyViewType.Browser ? SCAN_COUNT_DEFAULT : SCAN_TREE_COUNT_DEFAULT + )) + } + const selectKey = ({ rowData }: { rowData: any }) => { if (!isEqualBuffers(rowData.name, selectedKey)) { dispatch(toggleBrowserFullScreen(false)) @@ -173,7 +190,7 @@ const BrowserPage = () => { return (
- +
diff --git a/redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx b/redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx index 0aeb0ad3d1..3a81cbfc9a 100644 --- a/redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx +++ b/redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx @@ -13,7 +13,7 @@ import { keysDataSelector, keysSelector, } from 'uiSrc/slices/browser/keys' -import { KeysStoreData, KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys' +import { KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys' import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys' import { setConnectedInstanceId } from 'uiSrc/slices/instances/instances' import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api' @@ -32,16 +32,6 @@ export interface Props { handleCreateIndexPanel: (value: boolean) => void } -const initialKeyStateData: KeysStoreData = { - total: 0, - scanned: 0, - nextCursor: '0', - keys: [], - shardsMeta: {}, - previousResultCount: 0, - lastRefreshTime: null, -} - const BrowserLeftPanel = (props: Props) => { const { selectKey, @@ -66,9 +56,7 @@ const BrowserLeftPanel = (props: Props) => { const dispatch = useDispatch() const isDataLoaded = searchMode === SearchMode.Pattern ? isDataPatternLoaded : isDataRedisearchLoaded - const keysState = searchMode === SearchMode.Pattern - ? (isDataLoaded ? patternKeysState : initialKeyStateData) - : redisearchKeysState + const keysState = searchMode === SearchMode.Pattern ? patternKeysState : redisearchKeysState const loading = searchMode === SearchMode.Pattern ? patternLoading : redisearchLoading || redisearchListLoading const isSearched = searchMode === SearchMode.Pattern ? patternIsSearched : redisearchIsSearched const scrollTopPosition = searchMode === SearchMode.Pattern ? scrollPatternTopPosition : scrollRedisearchTopPosition @@ -77,7 +65,7 @@ const BrowserLeftPanel = (props: Props) => { if ((!isDataLoaded || contextInstanceId !== instanceId) && searchMode === SearchMode.Pattern) { loadKeys(viewType) } - }, [searchMode, isDataLoaded]) + }, [searchMode]) const loadKeys = useCallback((keyViewType: KeyViewType = KeyViewType.Browser) => { dispatch(setConnectedInstanceId(instanceId))