Merge pull request #2567 from RedisInsight/fe/bugfix/RI-4928_change_ms_to_msec

#RI-4928 - ms not changed to msec below slow-log-slower-than input in configurations

Author: vlad-dargel

redisinsight/ui/src/constants/durationUnits.tsx

@@ -3,6 +3,7 @@ import { EuiSuperSelectOption } from '@elastic/eui'
 export enum DurationUnits {
   microSeconds = 'µs',
   milliSeconds = 'ms',
+  mSeconds = 'msec',
 }
 
 export const DURATION_UNITS: EuiSuperSelectOption<DurationUnits>[] = [

redisinsight/ui/src/mocks/data/oauth.ts

@@ -0,0 +1,9 @@
+export const OAUTH_CLOUD_CAPI_KEYS_DATA = [
+  {
+    id: '1',
+    name: 'RedisInsight-f4868252-a128-4a02-af75-bd3c99898267-2020-11-01T-123',
+    createdAt: '2023-08-02T09:07:41.680Z',
+    lastUsed: '2023-08-02T09:07:41.680Z',
+    valid: true,
+  }
+]

redisinsight/ui/src/mocks/handlers/index.ts

@@ -6,6 +6,7 @@ import analytics from './analytics'
 import browser from './browser'
 import recommendations from './recommendations'
 import triggeredFunctions from './triggeredFunctions'
+import cloud from './oauth'
 
 // @ts-ignore
 export const handlers: RestHandler<MockedRequest>[] = [].concat(
@@ -16,4 +17,5 @@ export const handlers: RestHandler<MockedRequest>[] = [].concat(
   browser,
   recommendations,
   triggeredFunctions,
+  cloud,
 )

redisinsight/ui/src/mocks/handlers/oauth/cloud.ts

@@ -0,0 +1,17 @@
+import { rest, RestHandler } from 'msw'
+import { getMswURL } from 'uiSrc/utils/test-utils'
+import { ApiEndpoints } from 'uiSrc/constants'
+import { OAUTH_CLOUD_CAPI_KEYS_DATA } from 'uiSrc/mocks/data/oauth'
+
+const handlers: RestHandler[] = [
+  // fetch cloud capi keys
+  rest.get(
+    getMswURL(ApiEndpoints.CLOUD_CAPI_KEYS),
+    async (_req, res, ctx) => res(
+      ctx.status(200),
+      ctx.json(OAUTH_CLOUD_CAPI_KEYS_DATA),
+    )
+  ),
+]
+
+export default handlers

redisinsight/ui/src/mocks/handlers/oauth/index.ts

@@ -0,0 +1,6 @@
+import { DefaultBodyType, MockedRequest, RestHandler } from 'msw'
+
+import cloud from './cloud'
+
+const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [].concat(cloud)
+export default handlers

redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx

@@ -2,9 +2,10 @@ import React from 'react'
 import { cloneDeep } from 'lodash'
 import { act, cleanup, fireEvent, mockedStore, render, screen, waitForEuiPopoverVisible } from 'uiSrc/utils/test-utils'
 
-import { getCapiKeys, oauthCapiKeysSelector, removeAllCapiKeys } from 'uiSrc/slices/oauth/cloud'
+import { getCapiKeys, getCapiKeysSuccess, oauthCapiKeysSelector, removeAllCapiKeys } from 'uiSrc/slices/oauth/cloud'
 import { apiService } from 'uiSrc/services'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { OAUTH_CLOUD_CAPI_KEYS_DATA } from 'uiSrc/mocks/data/oauth'
 
 import CloudSettings from './CloudSettings'
 
@@ -29,6 +30,22 @@ jest.mock('uiSrc/telemetry', () => ({
 }))
 
 describe('CloudSettings', () => {
+  it('should show delete popover and call proper action on delete', async () => {
+    (oauthCapiKeysSelector as jest.Mock).mockReturnValue({
+      data: OAUTH_CLOUD_CAPI_KEYS_DATA,
+      loading: false
+    })
+    render(<CloudSettings />)
+
+    fireEvent.click(screen.getByTestId('delete-key-btn'))
+    await waitForEuiPopoverVisible()
+
+    fireEvent.click(screen.getByTestId('delete-key-confirm-btn'))
+
+    expect(store.getActions())
+      .toEqual([getCapiKeys(), getCapiKeysSuccess(OAUTH_CLOUD_CAPI_KEYS_DATA), removeAllCapiKeys()])
+  })
+
   it('should render', () => {
     expect(render(<CloudSettings />)).toBeTruthy()
   })
@@ -40,32 +57,14 @@ describe('CloudSettings', () => {
   })
 
   it('should be disabled delete all button', () => {
-    render(<CloudSettings />)
-
-    expect(screen.getByTestId('delete-key-btn')).toBeDisabled()
-  })
-
-  it('should show delete popover and call proper action on delete', async () => {
     (oauthCapiKeysSelector as jest.Mock).mockReturnValue({
-      data: [
-        {
-          id: '1',
-          name: 'RedisInsight-f4868252-a128-4a02-af75-bd3c99898267-2020-11-01T-123',
-          createdAt: '2023-08-02T09:07:41.680Z',
-          lastUsed: '2023-08-02T09:07:41.680Z',
-          valid: true,
-        }
-      ],
+      data: [],
       loading: false
     })
-    render(<CloudSettings />)
 
-    fireEvent.click(screen.getByTestId('delete-key-btn'))
-    await waitForEuiPopoverVisible()
-
-    fireEvent.click(screen.getByTestId('delete-key-confirm-btn'))
+    render(<CloudSettings />)
 
-    expect(store.getActions()).toEqual([getCapiKeys(), removeAllCapiKeys()])
+    expect(screen.getByTestId('delete-key-btn')).toBeDisabled()
   })
 
   it('should call proper telemetry events', async () => {
@@ -74,15 +73,7 @@ describe('CloudSettings', () => {
     sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock);
 
     (oauthCapiKeysSelector as jest.Mock).mockReturnValue({
-      data: [
-        {
-          id: '1',
-          name: 'RedisInsight-f4868252-a128-4a02-af75-bd3c99898267-2020-11-01T-123',
-          createdAt: '2023-08-02T09:07:41.680Z',
-          lastUsed: '2023-08-02T09:07:41.680Z',
-          valid: true,
-        }
-      ],
+      data: OAUTH_CLOUD_CAPI_KEYS_DATA,
       loading: false
     })
     render(<CloudSettings />)

redisinsight/ui/src/pages/slowLog/SlowLogPage.tsx

@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { AutoSizer } from 'react-virtualized'
 
-import { DEFAULT_SLOWLOG_MAX_LEN } from 'uiSrc/constants'
+import { DEFAULT_SLOWLOG_MAX_LEN, DurationUnits } from 'uiSrc/constants'
 import { DATE_FORMAT } from 'uiSrc/pages/slowLog/components/SlowLogTable/SlowLogTable'
 import { convertNumberByUnits } from 'uiSrc/pages/slowLog/utils'
 import { appContextDbConfig } from 'uiSrc/slices/app/context'
@@ -140,7 +140,7 @@ const SlowLogPage = () => {
           <EuiText size="xs" color="subdued" data-testid="config-info">
             Execution time: {numberWithSpaces(convertNumberByUnits(slowlogLogSlowerThan, durationUnit))}
               &nbsp;
-            {durationUnit},
+            {durationUnit === DurationUnits.milliSeconds ? DurationUnits.mSeconds : DurationUnits.microSeconds},
             Max length: {numberWithSpaces(slowlogMaxLen)}
           </EuiText>
           )}

redisinsight/ui/src/pages/slowLog/components/SlowLogConfig/SlowLogConfig.tsx

@@ -129,16 +129,16 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
 
   const unitConverter = () => {
     if (Number.isNaN(toNumber(slowerThan))) {
-      return `- ${DurationUnits.milliSeconds}`
+      return `- ${DurationUnits.mSeconds}`
     }
 
     if (slowerThan === `${MINUS_ONE}`) {
-      return `-1 ${DurationUnits.milliSeconds}`
+      return `-1 ${DurationUnits.mSeconds}`
     }
 
     if (durationUnit === DurationUnits.microSeconds) {
       const value = numberWithSpaces(convertNumberByUnits(toNumber(slowerThan), DurationUnits.milliSeconds))
-      return `${value} ${DurationUnits.milliSeconds}`
+      return `${value} ${DurationUnits.mSeconds}`
     }
 
     if (durationUnit === DurationUnits.milliSeconds) {