From 55a090a51fda9f8a4e57665dd7b3f049bb635e2e Mon Sep 17 00:00:00 2001 From: zalenskiSofteq Date: Mon, 31 Oct 2022 13:55:58 +0100 Subject: [PATCH 1/2] #RI-3748 - Loading endless spinner in Browser displayed when user creates keys in Workbench --- .../browser/components/key-list/KeyList.tsx | 8 +++--- redisinsight/ui/src/slices/app/context.ts | 7 ++++- redisinsight/ui/src/slices/interfaces/app.ts | 1 + .../ui/src/slices/tests/app/context.spec.ts | 27 ++++++++++++++++++- 4 files changed, 38 insertions(+), 5 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx index 7138d2b6f4..fb776463e3 100644 --- a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx @@ -37,7 +37,8 @@ import { } from 'uiSrc/slices/browser/keys' import { appContextBrowser, - setBrowserKeyListScrollPosition + setBrowserKeyListScrollPosition, + setBrowserIsNotRendered, } from 'uiSrc/slices/app/context' import { GroupBadge } from 'uiSrc/components' import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api' @@ -72,13 +73,13 @@ const KeyList = forwardRef((props: Props, ref) => { const selectedKey = useSelector(selectedKeySelector) const { total, nextCursor, previousResultCount } = useSelector(keysDataSelector) const { isSearched, isFiltered, viewType } = useSelector(keysSelector) - const { keyList: { scrollTopPosition } } = useSelector(appContextBrowser) + const { keyList: { scrollTopPosition, isNotRendered: isNotRenderedContext } } = useSelector(appContextBrowser) const [, rerender] = useState({}) const [firstDataLoaded, setFirstDataLoaded] = useState(!!keysState.keys.length) const itemsRef = useRef(keysState.keys) - const isNotRendered = useRef(true) + const isNotRendered = useRef(isNotRenderedContext) const renderedRowsIndexesRef = useRef({ startIndex: 0, lastIndex: 0 }) const dispatch = useDispatch() @@ -107,6 +108,7 @@ const KeyList = forwardRef((props: Props, ref) => { } isNotRendered.current = false + dispatch(setBrowserIsNotRendered(isNotRendered.current)) if (itemsRef.current.length === 0) { rerender({}) return diff --git a/redisinsight/ui/src/slices/app/context.ts b/redisinsight/ui/src/slices/app/context.ts index 15f3de77d3..8b07de2b50 100644 --- a/redisinsight/ui/src/slices/app/context.ts +++ b/redisinsight/ui/src/slices/app/context.ts @@ -12,7 +12,8 @@ export const initialState: StateAppContext = { keyList: { isDataLoaded: false, scrollTopPosition: 0, - selectedKey: null + isNotRendered: true, + selectedKey: null, }, panelSizes: {}, tree: { @@ -67,6 +68,9 @@ const appContextSlice = createSlice({ setBrowserKeyListScrollPosition: (state, { payload }: { payload: number }) => { state.browser.keyList.scrollTopPosition = payload }, + setBrowserIsNotRendered: (state, { payload }: { payload: boolean }) => { + state.browser.keyList.isNotRendered = payload + }, setBrowserPanelSizes: (state, { payload }: { payload: any }) => { state.browser.panelSizes = payload }, @@ -153,6 +157,7 @@ export const { setBrowserKeyListDataLoaded, setBrowserSelectedKey, setBrowserKeyListScrollPosition, + setBrowserIsNotRendered, setBrowserPanelSizes, setBrowserTreeSelectedLeaf, setBrowserTreeNodesOpen, diff --git a/redisinsight/ui/src/slices/interfaces/app.ts b/redisinsight/ui/src/slices/interfaces/app.ts index ccf3804ba0..fdf464bea6 100644 --- a/redisinsight/ui/src/slices/interfaces/app.ts +++ b/redisinsight/ui/src/slices/interfaces/app.ts @@ -40,6 +40,7 @@ export interface StateAppContext { keyList: { isDataLoaded: boolean scrollTopPosition: number + isNotRendered: boolean selectedKey: Nullable }, panelSizes: { diff --git a/redisinsight/ui/src/slices/tests/app/context.spec.ts b/redisinsight/ui/src/slices/tests/app/context.spec.ts index 654eface0c..3518e277a2 100644 --- a/redisinsight/ui/src/slices/tests/app/context.spec.ts +++ b/redisinsight/ui/src/slices/tests/app/context.spec.ts @@ -31,7 +31,8 @@ import reducer, { appContextBrowserTree, setBrowserTreeSelectedLeaf, updateBrowserTreeSelectedLeaf, - setBrowserTreeDelimiter + setBrowserTreeDelimiter, + setBrowserIsNotRendered, } from '../../app/context' jest.mock('uiSrc/services', () => ({ @@ -472,6 +473,30 @@ describe('slices', () => { }) }) + describe('setBrowserIsNotRendered', () => { + it('should properly set browser is not rendered value', () => { + // Arrange + const isNotRendered = false + const state = { + ...initialState.browser, + keyList: { + ...initialState.browser.keyList, + isNotRendered + } + } + + // Act + const nextState = reducer(initialState, setBrowserIsNotRendered(isNotRendered)) + + // Assert + const rootState = Object.assign(initialStateDefault, { + app: { context: nextState }, + }) + + expect(appContextBrowser(rootState)).toEqual(state) + }) + }) + describe('setBrowserTreeDelimiter', () => { it('should properly set browser tree delimiter', () => { // Arrange From 0a41ae01f1f803713d97d9fb9f89e843f890c6fe Mon Sep 17 00:00:00 2001 From: zalenskiSofteq Date: Mon, 31 Oct 2022 14:31:57 +0100 Subject: [PATCH 2/2] #RI-3746 - Rename Redis Database Analysis to Database Analysis --- redisinsight/ui/src/components/analytics-tabs/constants.ts | 2 +- .../pages/databaseAnalysis/components/header/Header.spec.tsx | 4 ++-- .../src/pages/databaseAnalysis/components/header/Header.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/redisinsight/ui/src/components/analytics-tabs/constants.ts b/redisinsight/ui/src/components/analytics-tabs/constants.ts index 0b12ebfa04..b813398d40 100644 --- a/redisinsight/ui/src/components/analytics-tabs/constants.ts +++ b/redisinsight/ui/src/components/analytics-tabs/constants.ts @@ -12,7 +12,7 @@ export const analyticsViewTabs: AnalyticsTabs[] = [ }, { id: AnalyticsViewTab.DatabaseAnalysis, - label: 'Redis Database Analysis', + label: 'Database Analysis', }, { id: AnalyticsViewTab.SlowLog, diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.spec.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.spec.tsx index 490e9af488..d3238bd776 100644 --- a/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.spec.tsx +++ b/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.spec.tsx @@ -164,7 +164,7 @@ describe('STANDALONE db', () => { }) await waitForEuiToolTipVisible() - expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Redis Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.') + expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.') }) }) @@ -182,6 +182,6 @@ describe('SENTINEL db', () => { }) await waitForEuiToolTipVisible() - expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Redis Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.') + expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.') }) }) diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx index 35e0ac998a..ce6b198cb6 100644 --- a/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx +++ b/redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx @@ -155,7 +155,7 @@ const Header = (props: Props) => { position="bottom" anchorClassName={styles.tooltipAnchor} className={styles.tooltip} - title="Redis Database Analysis" + title="Database Analysis" content={connectionType === ConnectionType.Cluster ? clusterTooltipMessage : commonTooltipMessage} data-testid="db-new-reports-tooltip" >