Merge pull request #2777 from RedisInsight/fe/feature/RI-5033_Refactor_key_details_v2

#RI-5033 - refactor key details v2

Author: vlad-dargel

redisinsight/ui/src/pages/browser/components/auto-refresh/AutoRefresh.spec.tsx renamed to redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+import { Props, FullScreen } from './FullScreen'
+
+const mockedProps = mock<Props>()
+
+describe('FullScreen', () => {
+  it('should render', () => {
+    expect(render(<FullScreen {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/pages/browser/components/auto-refresh/AutoRefresh.tsx renamed to redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -0,0 +1,35 @@
+import {
+  EuiButtonIcon,
+  EuiToolTip,
+} from '@elastic/eui'
+import React from 'react'
+
+export interface Props {
+  isFullScreen: boolean
+  onToggleFullScreen: () => void
+  anchorClassName?: string
+  btnTestId?: string
+}
+
+const FullScreen = ({
+  isFullScreen,
+  onToggleFullScreen,
+  anchorClassName = '',
+  btnTestId = 'toggle-full-screen',
+}: Props) => (
+  <EuiToolTip
+    content={isFullScreen ? 'Exit Full Screen' : 'Full Screen'}
+    position="left"
+    anchorClassName={anchorClassName}
+  >
+    <EuiButtonIcon
+      iconType={isFullScreen ? 'fullScreenExit' : 'fullScreen'}
+      color="primary"
+      aria-label="Open full screen"
+      onClick={onToggleFullScreen}
+      data-testid={btnTestId}
+    />
+  </EuiToolTip>
+)
+
+export { FullScreen }

redisinsight/ui/src/pages/browser/components/auto-refresh/index.ts renamed to redisinsight/ui/src/components/auto-refresh/index.ts

@@ -0,0 +1 @@
+export { FullScreen } from './FullScreen'

redisinsight/ui/src/pages/browser/components/auto-refresh/styles.module.scss renamed to redisinsight/ui/src/components/auto-refresh/styles.module.scss

@@ -26,8 +26,11 @@ import ShowChildByCondition from './show-child-by-condition'
 import RecommendationVoting from './recommendation-voting'
 import RecommendationCopyComponent from './recommendation-copy-component'
 import FeatureFlagComponent from './feature-flag-component'
+import AutoRefresh from './auto-refresh'
 import { ModuleNotLoaded, FilterNotAvailable } from './messages'
 
+export { FullScreen } from './full-screen'
+
 export * from './oauth'
 
 export {
@@ -64,4 +67,5 @@ export {
   FeatureFlagComponent,
   ModuleNotLoaded,
   FilterNotAvailable,
+  AutoRefresh,
 }

redisinsight/ui/src/pages/browser/components/auto-refresh/utils.ts renamed to redisinsight/ui/src/components/auto-refresh/utils.ts

@@ -36,6 +36,7 @@ import { getViewTypeOptions, WBQueryType, getProfileViewTypeOptions, ProfileQuer
 import { IPluginVisualization } from 'uiSrc/slices/interfaces'
 import { RunQueryMode, ResultsMode, ResultsSummary } from 'uiSrc/slices/interfaces/workbench'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
+import { FullScreen } from 'uiSrc/components'
 
 import DefaultPluginIconDark from 'uiSrc/assets/img/workbench/default_view_dark.svg'
 import DefaultPluginIconLight from 'uiSrc/assets/img/workbench/default_view_light.svg'
@@ -391,18 +392,7 @@ const QueryCardHeader = (props: Props) => {
         </EuiFlexItem>
         <EuiFlexItem grow={false} className={styles.buttonIcon} onClick={onDropDownViewClick}>
           {(isOpen || isFullScreen) && (
-            <EuiToolTip
-              content={isFullScreen ? 'Exit Full Screen' : 'Full Screen'}
-              position="left"
-            >
-              <EuiButtonIcon
-                iconType={isFullScreen ? 'fullScreenExit' : 'fullScreen'}
-                color="primary"
-                aria-label="Open full screen"
-                onClick={toggleFullScreen}
-                data-testid="toggle-full-screen"
-              />
-            </EuiToolTip>
+            <FullScreen isFullScreen={isFullScreen} onToggleFullScreen={toggleFullScreen} />
           )}
         </EuiFlexItem>
         <EuiFlexItem grow={false} className={styles.buttonIcon}>