merge main to RI-3716

redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx

@@ -23,6 +23,8 @@ export interface Props {
 
 const commandTabPosInit = 0
 const commandHistoryPosInit = -1
+const TIME_FOR_DOUBLE_CLICK = 300
+
 const CliBody = (props: Props) => {
   const { data, command = '', error, setCommand, onSubmit } = props
 
@@ -36,6 +38,7 @@ const CliBody = (props: Props) => {
   const { loading, commandHistory: commandHistoryStore } = useSelector(outputSelector)
   const { commandsArray } = useSelector(appRedisCommandsSelector)
 
+  const timerClickRef = useRef<NodeJS.Timeout>()
   const scrollDivRef: Ref<HTMLDivElement> = useRef(null)
   const dispatch = useDispatch()
 
@@ -149,44 +152,23 @@ const CliBody = (props: Props) => {
 
     const isModifierKey = isModifiedEvent(event)
 
-    if (event.shiftKey && event.key === keys.TAB) {
-      onKeyDownShiftTab(event)
-      return
-    }
-
-    if (event.key === keys.TAB) {
-      onKeyDownTab(event, commandLine)
-      return
-    }
+    if (event.shiftKey && event.key === keys.TAB) return onKeyDownShiftTab(event)
+    if (event.key === keys.TAB) return onKeyDownTab(event, commandLine)
 
     // reset command tab position
     if (!event.shiftKey || (event.shiftKey && event.key !== 'Shift')) {
       setCommandTabPos(commandTabPosInit)
     }
 
-    if (event.key === keys.ENTER) {
-      onKeyDownEnter(commandLine, event)
-      return
-    }
-
-    if (event.key === keys.ARROW_UP && !isModifierKey) {
-      onKeyDownArrowUp(event)
-      return
-    }
-
-    if (event.key === keys.ARROW_DOWN && !isModifierKey) {
-      onKeyDownArrowDown(event)
-      return
-    }
-
-    if (event.key === keys.ESCAPE) {
-      onKeyEsc()
-      return
-    }
+    if (event.key === keys.ENTER) return onKeyDownEnter(commandLine, event)
+    if (event.key === keys.ARROW_UP && !isModifierKey) return onKeyDownArrowUp(event)
+    if (event.key === keys.ARROW_DOWN && !isModifierKey) return onKeyDownArrowDown(event)
+    if (event.key === keys.ESCAPE) return onKeyEsc()
 
     if ((event.metaKey && event.key === 'k') || (event.ctrlKey && event.key === 'l')) {
       onClearOutput(event)
     }
+    return undefined
   }
 
   const updateMatchingCmds = (command: string = '') => {
@@ -212,15 +194,36 @@ const CliBody = (props: Props) => {
   }
 
   const onMouseUpOutput = () => {
-    if (!window.getSelection()?.toString()) {
-      inputEl?.focus()
-      document.execCommand('selectAll', false)
-      document.getSelection()?.collapseToEnd()
+    if (timerClickRef.current) {
+      clearTimeout(timerClickRef.current)
+      timerClickRef.current = undefined
+      return
+    }
+
+    if (window.getSelection()?.toString()) {
+      return
     }
+
+    timerClickRef.current = setTimeout(() => {
+      const isInputFocused = document.activeElement === inputEl
+
+      if (!window.getSelection()?.toString() && !isInputFocused) {
+        inputEl?.focus()
+        document.execCommand('selectAll', false)
+        document.getSelection()?.collapseToEnd()
+        timerClickRef.current = undefined
+      }
+    }, TIME_FOR_DOUBLE_CLICK)
   }
 
   return (
-    <div className={styles.container} onMouseUp={onMouseUpOutput} role="textbox" tabIndex={0}>
+    <div
+      className={styles.container}
+      onMouseUp={onMouseUpOutput}
+      onKeyDown={() => {}}
+      role="textbox"
+      tabIndex={0}
+    >
       <EuiFlexGroup
         justifyContent="spaceBetween"
         gutterSize="none"

redisinsight/ui/src/components/cli/components/cli-input/CliInput/CliInput.tsx

@@ -7,11 +7,11 @@ import { parseContentEditableChangeHtml } from 'uiSrc/components/ContentEditable
 import styles from './styles.module.scss'
 
 export interface Props {
-  command: string;
-  setInputEl: Function;
-  setCommand: (command: string) => void;
-  onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
-  dbIndex: number;
+  command: string
+  setInputEl: Function
+  setCommand: (command: string) => void
+  onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void
+  dbIndex: number
 }
 
 const CliInput = (props: Props) => {

redisinsight/ui/src/components/cli/components/cli-input/CliInputWrapper.tsx

@@ -9,11 +9,11 @@ import CliAutocomplete from './CliAutocomplete'
 import CliInput from './CliInput'
 
 export interface Props {
-  command: string;
-  wordsTyped: number;
-  setInputEl: Function;
-  setCommand: (command: string) => void;
-  onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
+  command: string
+  wordsTyped: number
+  setInputEl: Function
+  setCommand: (command: string) => void
+  onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void
 }
 
 const CliInputWrapper = (props: Props) => {

redisinsight/ui/src/components/query/QueryWrapper.tsx

@@ -1,3 +1,4 @@
+import { without } from 'lodash'
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { EuiLoadingContent } from '@elastic/eui'
@@ -63,7 +64,11 @@ const QueryWrapper = (props: Props) => {
 
   const sendEventSubmitTelemetry = (commandInit = query) => {
     const eventData = (() => {
-      const commands = splitMonacoValuePerLines(commandInit)
+      const commands = without(
+        splitMonacoValuePerLines(commandInit)
+          .map((command) => removeMonacoComments(decode(command).trim())),
+        ''
+      )
 
       const [commandLine, ...rest] = commands.map((command = '') => {
         const matchedCommand = REDIS_COMMANDS_ARRAY.find((commandName) =>
@@ -72,8 +77,7 @@ const QueryWrapper = (props: Props) => {
       })
 
       const multiCommands = getMultiCommands(rest).replaceAll('\n', ';')
-
-      const command = removeMonacoComments(decode([commandLine, multiCommands].join(';')).trim())
+      const command = [commandLine, multiCommands].join('') ? [commandLine, multiCommands].join(';') : null
 
       return {
         command,
@@ -85,10 +89,12 @@ const QueryWrapper = (props: Props) => {
       }
     })()
 
-    sendEventTelemetry({
-      event: TelemetryEvent.WORKBENCH_COMMAND_SUBMITTED,
-      eventData
-    })
+    if (eventData.command) {
+      sendEventTelemetry({
+        event: TelemetryEvent.WORKBENCH_COMMAND_SUBMITTED,
+        eventData
+      })
+    }
   }
 
   const handleSubmit = (value?: string) => {

redisinsight/ui/src/constants/cliOutput.tsx

@@ -1,5 +1,5 @@
 import { EuiLink, EuiTextColor } from '@elastic/eui'
-import React from 'react'
+import React, { Fragment } from 'react'
 import { getRouterLinkProps } from 'uiSrc/services'
 
 export const ClearCommand = 'clear'
@@ -17,7 +17,7 @@ export const InitOutputText = (
   emptyOutput: boolean,
   onClick: () => void,
 ) => [
-  <>
+  <Fragment key={Math.random()}>
     { emptyOutput && (
       <span className="color-green" key={Math.random()}>
         {'Try '}
@@ -32,7 +32,7 @@ export const InitOutputText = (
         , our advanced CLI. Check out our Quick Guides to learn more about Redis capabilities.
       </span>
     )}
-  </>,
+  </Fragment>,
   '\n\n',
   'Connecting...',
   '\n\n',

redisinsight/ui/src/constants/keys.ts

@@ -26,7 +26,7 @@ export const GROUP_TYPES_DISPLAY = Object.freeze({
   [KeyTypes.ReJSON]: 'JSON',
   [KeyTypes.JSON]: 'JSON',
   [KeyTypes.Stream]: 'Stream',
-  [ModulesKeyTypes.Graph]: 'GRAPH',
+  [ModulesKeyTypes.Graph]: 'Graph',
   [ModulesKeyTypes.TimeSeries]: 'TS',
   [CommandGroup.Bitmap]: 'Bitmap',
   [CommandGroup.Cluster]: 'Cluster',

redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.tsx

@@ -121,7 +121,7 @@ const BrowserRightPanel = (props: Props) => {
           keyProp={selectedKey}
           onCloseKey={closePanel}
           onEditKey={onEditKey}
-          onDeleteKey={onSelectKey}
+          onRemoveKey={onSelectKey}
         />
       )}
       {isAddKeyPanelOpen && every([!isBulkActionsPanelOpen, !isCreateIndexPanelOpen], Boolean) && (

redisinsight/ui/src/pages/browser/components/filter-key-type/constants.ts

@@ -36,12 +36,12 @@ export const FILTER_KEY_TYPE_OPTIONS = [
     color: GROUP_TYPES_COLORS[KeyTypes.ReJSON],
   },
   {
-    text: 'STREAM',
+    text: 'Stream',
     value: KeyTypes.Stream,
     color: GROUP_TYPES_COLORS[KeyTypes.Stream],
   },
   {
-    text: 'GRAPH',
+    text: 'Graph',
     value: ModulesKeyTypes.Graph,
     color: GROUP_TYPES_COLORS[ModulesKeyTypes.Graph],
   },

redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx

@@ -74,10 +74,11 @@ interface IHashField extends HashFieldDto {}
 
 export interface Props {
   isFooterOpen: boolean
+  onRemoveKey: () => void
 }
 
 const HashDetails = (props: Props) => {
-  const { isFooterOpen } = props
+  const { isFooterOpen, onRemoveKey } = props
 
   const {
     total,
@@ -135,7 +136,8 @@ const HashDetails = (props: Props) => {
     setDeleting(`${field + suffix}`)
   }, [])
 
-  const onSuccessRemoved = () => {
+  const onSuccessRemoved = (newTotalValue: number) => {
+    newTotalValue === 0 && onRemoveKey()
     sendEventTelemetry({
       event: getBasedOnViewTypeEvent(
         viewType,

redisinsight/ui/src/pages/browser/components/key-details-header/KeyDetailsHeader.tsx

@@ -36,7 +36,7 @@ import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { getBasedOnViewTypeEvent, getRefreshEventData, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import {
   formatBytes,
-  formatNameShort,
+  formatLongName,
   isEqualBuffers,
   isFormatEditable,
   MAX_TTL_NUMBER,
@@ -117,7 +117,7 @@ const KeyDetailsHeader = ({
 
   const keyNameRef = useRef<HTMLInputElement>(null)
 
-  const tooltipContent = formatNameShort(keyProp || '')
+  const tooltipContent = formatLongName(keyProp || '')
 
   const onMouseEnterKey = () => {
     setKeyIsHovering(true)

redisinsight/ui/src/pages/browser/components/key-details/KeyDetails/KeyDetails.tsx

@@ -5,7 +5,7 @@ import {
   EuiButtonIcon,
   EuiToolTip
 } from '@elastic/eui'
-import { isNull } from 'lodash'
+import { curryRight, isNull } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 import {
@@ -49,14 +49,15 @@ export interface Props {
   onToggleFullScreen: () => void
   onClose: (key: RedisResponseBuffer) => void
   onClosePanel: () => void
-  onRefresh: (key: RedisResponseBuffer, type: KeyTypes) => void
+  onRefresh: (key: RedisResponseBuffer, type: KeyTypes | ModulesKeyTypes) => void
   onDelete: (key: RedisResponseBuffer, type: string) => void
+  onRemoveKey: () => void
   onEditTTL: (key: RedisResponseBuffer, ttl: number) => void
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer, onFailure?: () => void) => void
 }
 
 const KeyDetails = ({ ...props }: Props) => {
-  const { onClosePanel } = props
+  const { onClosePanel, onRemoveKey } = props
   const { loading, error = '', data } = useSelector(selectedKeySelector)
   const { type: selectedKeyType, name: selectedKey } = useSelector(selectedKeyDataSelector) ?? {
     type: KeyTypes.String,
@@ -130,7 +131,7 @@ const KeyDetails = ({ ...props }: Props) => {
         setIsEdit={(isEdit) => setEditItem(isEdit)}
       />
     ),
-    [KeyTypes.Hash]: <HashDetails isFooterOpen={isAddItemPanelOpen} />,
+    [KeyTypes.Hash]: <HashDetails isFooterOpen={isAddItemPanelOpen} onRemoveKey={onRemoveKey} />,
     [KeyTypes.List]: <ListDetails isFooterOpen={isAddItemPanelOpen || isRemoveItemPanelOpen} />,
     [KeyTypes.ReJSON]: <RejsonDetailsWrapper />,
     [KeyTypes.Stream]: <StreamDetailsWrapper isFooterOpen={isAddItemPanelOpen} />,

redisinsight/ui/src/pages/browser/components/key-details/KeyDetailsWrapper.tsx

@@ -31,7 +31,7 @@ export interface Props {
   onToggleFullScreen: () => void
   onCloseKey: () => void
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer) => void
-  onDeleteKey: () => void
+  onRemoveKey: () => void
   keyProp: RedisResponseBuffer | null
 }
 
@@ -42,7 +42,7 @@ const KeyDetailsWrapper = (props: Props) => {
     onToggleFullScreen,
     onCloseKey,
     onEditKey,
-    onDeleteKey,
+    onRemoveKey,
     keyProp
   } = props
 
@@ -84,11 +84,11 @@ const KeyDetailsWrapper = (props: Props) => {
     if (type === KeyTypes.String) {
       dispatch(deleteKeyAction(key, () => {
         dispatch(resetStringValue())
-        onDeleteKey()
+        onRemoveKey()
       }))
       return
     }
-    dispatch(deleteKeyAction(key, onDeleteKey))
+    dispatch(deleteKeyAction(key, onRemoveKey))
   }
 
   const handleRefreshKey = (key: RedisResponseBuffer, type: KeyTypes | ModulesKeyTypes) => {
@@ -153,6 +153,7 @@ const KeyDetailsWrapper = (props: Props) => {
       onClosePanel={handleClosePanel}
       onRefresh={handleRefreshKey}
       onDelete={handleDeleteKey}
+      onRemoveKey={onRemoveKey}
       onEditTTL={handleEditTTL}
       onEditKey={handleEditKey}
     />

redisinsight/ui/src/pages/browser/styles.module.scss

@@ -36,7 +36,7 @@ $breakpoint-to-hide-resize-panel: 1124px;
 .resizePanelLeft {
   min-width: 550px;
   :global(.euiResizablePanel__content) {
-    @media (min-width: 1124px) {
+    @media (min-width: $breakpoint-to-hide-resize-panel) {
       padding-right: 8px;
     }
   }