* #RIVS-290 - [Regression] User can select several keys in Cluster on Windows

* #RIVS-291 - [Regression] Triggers and functions icon not visible for white theme

Author: egor-zalenski

src/webviews/src/assets/modules/RedisGears2.svg

@@ -8,6 +8,7 @@ import { PopupActions, PopupPosition } from 'reactjs-popup/dist/types'
 
 import { RedisString } from 'uiSrc/interfaces'
 import { DEFAULT_POPOVER_MAX_WIDTH } from 'uiSrc/constants'
+import { RiButton } from 'uiSrc/ui'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -76,15 +77,14 @@ const PopoverDelete = (props: Props) => {
         handleButtonClick?.()
       }}
       trigger={(open) => (
-        <VSCodeButton
-          appearance={!triggerText ? 'icon' : 'primary'}
+        <RiButton
           disabled={disabled}
           className={cx(styles.trigger, triggerClassName, { '!flex': open })}
           aria-label="remove item"
           data-testid={testid ? `${testid}-trigger` : 'remove-trigger'}
         >
           {triggerText || <VscTrash />}
-        </VSCodeButton>
+        </RiButton>
       )}
     >
       <div

src/webviews/src/components/popover-delete/PopoverDelete.tsx

@@ -173,8 +173,6 @@ export const KeysTree = ({ database }: Props) => {
         statusSelected={selectedKeyName}
         statusOpen={statusOpen}
         loading={loading || constructingTree}
-        // commonFilterType={commonFilterType}
-        commonFilterType={null}
         setConstructingTree={setConstructingTree}
         webworkerFn={constructKeysToTree}
         onStatusSelected={handleStatusSelected}

src/webviews/src/modules/keys-tree/KeysTree.tsx

@@ -26,7 +26,6 @@ export interface Props {
   loading: boolean
   deleting?: boolean
   sorting?: SortOrder
-  commonFilterType: Nullable<KeyTypes>
   statusSelected: Nullable<string>,
   database: Database
   statusOpen: OpenedNodes
@@ -52,7 +51,6 @@ const VirtualTree = (props: Props) => {
     database,
     deleting = false,
     sorting = DEFAULT_TREE_SORTING,
-    commonFilterType = null,
     onStatusOpen,
     onStatusSelected,
     setConstructingTree,
@@ -143,13 +141,12 @@ const VirtualTree = (props: Props) => {
   ): void => {
     keysApi.fetchKeysMetadataTree(
       itemsInit,
-      commonFilterType,
       controller.current?.signal,
       (loadedItems) =>
         onSuccessFetchedMetadata(loadedItems),
       () => { rerender({}) },
     )
-  }, [commonFilterType])
+  }, [])
 
   const onSuccessFetchedMetadata = useCallback((
     loadedItems: any[],
@@ -254,8 +251,8 @@ const VirtualTree = (props: Props) => {
   const onItemsRendered = () => {
     if (isNotRendered.current) {
       isNotRendered.current = false
-      rerender({})
     }
+    rerender({})
   }
 
   return (

src/webviews/src/modules/keys-tree/components/virtual-tree/VirtualTree.tsx

@@ -47,7 +47,6 @@ export interface KeysThunks {
   fetchMorePatternKeysAction: (cursor: string, count?: number) => void
   fetchKeysMetadataTree: (
     keys: RedisString[][],
-    filter: Nullable<KeyTypes>,
     signal?: AbortSignal,
     onSuccessAction?: (data: KeyInfo[]) => void,
     onFailAction?: () => void,

src/webviews/src/modules/keys-tree/hooks/interface.ts

@@ -365,7 +365,6 @@ describe('useKeys', () => {
         // Act
         useKeysStore.getState().fetchKeysMetadataTree(
           data.map(({ name }, i) => ([i, name])) as any,
-          null,
           controller.signal,
           onSuccessMock,
         )

src/webviews/src/modules/keys-tree/hooks/tests/useKeys.spec.ts

@@ -151,15 +151,14 @@ KeysThunks
   // Asynchronous thunk action
   fetchKeysMetadataTree: async (
     keys: RedisString[][],
-    filter: Nullable<KeyTypes>,
     signal?: AbortSignal,
     onSuccessAction?: (data: KeyInfo[]) => void,
     onFailAction?: () => void,
   ) => {
     try {
       const { data } = await apiService.post<KeyInfo[]>(
         getDatabaseUrl(get().databaseId, ApiEndpoints.KEYS_METADATA),
-        { keys: keys.map(([,nameBuffer]) => nameBuffer), type: filter || undefined },
+        { keys: keys.map(([,nameBuffer]) => nameBuffer), type: get().filter || undefined },
         { params: { encoding: getEncoding() }, signal },
       )
 

src/webviews/src/modules/keys-tree/hooks/useKeysThunks.ts

@@ -2,7 +2,6 @@ import { FormikErrors, useFormik } from 'formik'
 import { isEmpty, pick } from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import Popup from 'reactjs-popup'
 import { VSCodeButton, VSCodeDivider } from '@vscode/webview-ui-toolkit/react'
 
 import { VscInfo } from 'react-icons/vsc'
@@ -25,6 +24,7 @@ import {
   SSHDetails,
 } from 'uiSrc/components'
 import { useCertificatesStore } from 'uiSrc/store'
+import { Tooltip } from 'uiSrc/ui'
 
 export interface Props {
   formFields: DbConnectionInfo
@@ -52,7 +52,7 @@ const ManualConnectionForm = (props: Props) => {
     onSubmit,
     onHostNamePaste,
     submitButtonText,
-    // loading,
+    loading,
     isEditMode,
     isCloneMode,
     setIsCloneMode,
@@ -83,7 +83,7 @@ const ManualConnectionForm = (props: Props) => {
 
   const formRef = useRef<HTMLDivElement>(null)
 
-  const submitIsDisable = () => !isEmpty(errors)
+  const submitIsDisable = () => !isEmpty(errors) || loading
 
   const validate = (values: DbConnectionInfo) => {
     const errs = getFormErrors(values)
@@ -156,13 +156,12 @@ const ManualConnectionForm = (props: Props) => {
     return !submitIsDisabled
       ? Btn
       : (
-        <Popup
+        <Tooltip
           position="top center"
-          trigger={Btn}
-          on="hover"
+          content={!isEmpty(errors) && getRequiredFieldsText(errors)}
         >
-          {getRequiredFieldsText(errors)}
-        </Popup>
+          {Btn}
+        </Tooltip>
       )
   }
 

src/webviews/src/modules/manual-connection/manual-connection-form/ManualConnectionForm.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+
+import { render } from 'testSrc/helpers'
+import { RiButton, Props } from './RiButton'
+
+const mockedProps = mock<Props>()
+
+describe('RiButton', () => {
+  it('should render', () => {
+    expect(render(<RiButton {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

src/webviews/src/ui/button/RiButton.spec.tsx

@@ -0,0 +1,17 @@
+import React, { ButtonHTMLAttributes } from 'react'
+import cx from 'classnames'
+
+import styles from './styles.module.scss'
+
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+// https://react-popup.elazizi.com/component-api#trigger
+export const RiButton = React.forwardRef<HTMLButtonElement, Props>(({ children, className, ...props }, ref) => (
+  <button
+    ref={ref}
+    {...props}
+    className={cx(styles.button, className)}
+  >
+    {children}
+  </button>
+))

src/webviews/src/ui/button/RiButton.tsx

@@ -0,0 +1,13 @@
+.button {
+  @apply flex justify-center items-center text-vscode-foreground min-h-[22px] min-w-[22px];
+  border-radius: 5px;
+
+  svg {
+    @apply min-w-4 min-h-4;
+  }
+
+  &:hover {
+    background-color: var(--button-icon-hover-background);
+  }
+}
+

src/webviews/src/ui/button/styles.module.scss

@@ -11,6 +11,7 @@ export { Spinner } from './spinner/Spinner'
 export { Spacer } from './spacer/Spacer'
 export { PromoLink } from './promo-link/PromoLink'
 export { Tooltip } from './tooltip/Tooltip'
+export { RiButton } from './button/RiButton'
 
 export type { RadioGroupOption } from './radio-group/RadioGroup'
 export type { SelectOption } from './select/Select'