Merge branch 'main' into feature/RI-4186-Upload_custom_tutorials

# Conflicts:
#	redisinsight/ui/src/components/upload-file/UploadFile.tsx

Author: rsergeenko

configs/webpack.config.web.prod.babel.js

@@ -25,9 +25,10 @@ export default merge(commonConfig, {
   target: 'web',
   entry: ['regenerator-runtime/runtime', './index.tsx'],
   output: {
-    filename: 'js/bundle.[fullhash].min.js',
+    filename: 'js/bundle.[name].min.js',
     path: resolve(__dirname, '../redisinsight/ui/dist'),
     publicPath: '/',
+    chunkFilename: '[id].[chunkhash].js'
   },
   optimization: {
     minimize: true,
@@ -37,6 +38,34 @@ export default merge(commonConfig, {
       }),
       new CssMinimizerPlugin(),
     ],
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        reactVendor: {
+          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+          name: "reactVendor"
+        },
+        elasticVendor: {
+          test: /[\\/]node_modules[\\/](@elastic)[\\/]/,
+          name: "elasticVendor"
+        },
+        monacoVendor: {
+          test: /[\\/]node_modules[\\/](monaco-editor)[\\/]/,
+          name: "monacoVendor"
+        },
+        utilityVendor: {
+          test: /[\\/]node_modules[\\/](lodash)[\\/]/,
+          name: "utilityVendor"
+        },
+        vendor: {
+          test: /[\\/]node_modules[\\/](!@elastic)(!monaco-editor)(!lodash)[\\/]/,
+          name: "vendor"
+        },
+      },
+    },
   },
   plugins: [
     new MiniCssExtractPlugin({

redisinsight/about-panel.ts

@@ -7,7 +7,7 @@ const ICON_PATH = app.isPackaged
 
 export default {
   applicationName: 'RedisInsight-v2',
-  applicationVersion: app.getVersion() || '2.2.0',
+  applicationVersion: app.getVersion() || '2.20.0',
   copyright: `Copyright © ${new Date().getFullYear()} Redis Ltd.`,
   iconPath: ICON_PATH,
 };

redisinsight/api/config/default.ts

@@ -56,7 +56,7 @@ export default {
     tlsKey: process.env.SERVER_TLS_KEY,
     staticContent: !!process.env.SERVER_STATIC_CONTENT || false,
     buildType: process.env.BUILD_TYPE || 'ELECTRON',
-    appVersion: process.env.APP_VERSION || '2.0.0',
+    appVersion: process.env.APP_VERSION || '2.20.0',
     requestTimeout: parseInt(process.env.REQUEST_TIMEOUT, 10) || 25000,
     excludeRoutes: [],
     excludeAuthRoutes: [],

redisinsight/api/config/swagger.ts

@@ -5,7 +5,7 @@ const SWAGGER_CONFIG: Omit<OpenAPIObject, 'paths'> = {
   info: {
     title: 'RedisInsight Backend API',
     description: 'RedisInsight Backend API',
-    version: '2.0.0',
+    version: '2.20.0',
   },
   tags: [],
 };

redisinsight/package.json

@@ -2,7 +2,7 @@
   "name": "redisinsight",
   "productName": "RedisInsight",
   "private": true,
-  "version": "2.18.0",
+  "version": "2.20.0",
   "description": "RedisInsight",
   "main": "./main.prod.js",
   "author": {

redisinsight/ui/src/components/analytics-tabs/constants.tsx

@@ -14,16 +14,16 @@ export const analyticsViewTabs: AnalyticsTabs[] = [
   {
     id: AnalyticsViewTab.ClusterDetails,
     label: 'Overview',
-    onboard: ONBOARDING_FEATURES.ANALYTICS_OVERVIEW
+    onboard: ONBOARDING_FEATURES?.ANALYTICS_OVERVIEW
   },
   {
     id: AnalyticsViewTab.DatabaseAnalysis,
     label: 'Database Analysis',
-    onboard: ONBOARDING_FEATURES.ANALYTICS_DATABASE_ANALYSIS
+    onboard: ONBOARDING_FEATURES?.ANALYTICS_DATABASE_ANALYSIS
   },
   {
     id: AnalyticsViewTab.SlowLog,
     label: 'Slow Log',
-    onboard: ONBOARDING_FEATURES.ANALYTICS_SLOW_LOG
+    onboard: ONBOARDING_FEATURES?.ANALYTICS_SLOW_LOG
   },
 ]

redisinsight/ui/src/components/code-block/CodeBlock.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+
+import CodeBlock from './CodeBlock'
+
+const originalClipboard = { ...global.navigator.clipboard }
+describe('CodeBlock', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    global.navigator.clipboard = {
+      writeText: jest.fn(),
+    }
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+    // @ts-ignore
+    global.navigator.clipboard = originalClipboard
+  })
+
+  it('should render', () => {
+    expect(render(<CodeBlock>text</CodeBlock>)).toBeTruthy()
+  })
+
+  it('should render proper content', () => {
+    render(<CodeBlock data-testid="code">text</CodeBlock>)
+    expect(screen.getByTestId('code')).toHaveTextContent('text')
+  })
+
+  it('should not render copy button by default', () => {
+    render(<CodeBlock data-testid="code">text</CodeBlock>)
+    expect(screen.queryByTestId('copy-code-btn')).not.toBeInTheDocument()
+  })
+
+  it('should copy proper text', () => {
+    render(<CodeBlock data-testid="code" isCopyable>text</CodeBlock>)
+    fireEvent.click(screen.getByTestId('copy-code-btn'))
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('text')
+  })
+
+  it('should copy proper text when children is ReactNode', () => {
+    render(<CodeBlock data-testid="code" isCopyable><span>text2</span></CodeBlock>)
+    fireEvent.click(screen.getByTestId('copy-code-btn'))
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('text2')
+  })
+})

redisinsight/ui/src/components/code-block/CodeBlock.tsx

@@ -0,0 +1,42 @@
+import React, { HTMLAttributes, useMemo } from 'react'
+import cx from 'classnames'
+import { EuiButtonIcon, useInnerText } from '@elastic/eui'
+
+import styles from './styles.module.scss'
+
+export interface Props extends HTMLAttributes<HTMLPreElement> {
+  children: React.ReactNode
+  className?: string
+  isCopyable?: boolean
+}
+
+const CodeBlock = (props: Props) => {
+  const { isCopyable, className, children, ...rest } = props
+  const [innerTextRef, innerTextString] = useInnerText('')
+
+  const innerText = useMemo(
+    () => innerTextString?.replace(/[\r\n?]{2}|\n\n/g, '\n') || '',
+    [innerTextString]
+  )
+
+  const handleCopyClick = () => {
+    navigator?.clipboard?.writeText(innerText)
+  }
+
+  return (
+    <div className={cx(styles.wrapper, { [styles.isCopyable]: isCopyable })}>
+      <pre className={cx(styles.pre, className)} ref={innerTextRef} {...rest}>{children}</pre>
+      {isCopyable && (
+        <EuiButtonIcon
+          onClick={handleCopyClick}
+          className={styles.copyBtn}
+          iconType="copy"
+          data-testid="copy-code-btn"
+          aria-label="copy code"
+        />
+      )}
+    </div>
+  )
+}
+
+export default CodeBlock

redisinsight/ui/src/components/code-block/index.ts

@@ -0,0 +1,3 @@
+import CodeBlock from './CodeBlock'
+
+export default CodeBlock

redisinsight/ui/src/components/code-block/styles.module.scss

@@ -0,0 +1,19 @@
+.wrapper {
+  position: relative;
+
+  &.isCopyable {
+    .pre {
+      padding: 8px 30px 8px 16px !important;
+    }
+  }
+
+  .pre {
+    padding: 8px 16px !important;
+  }
+
+  .copyBtn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+}