#RI-31 - fix pr comments

Author: egor-zalenski

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

@@ -111,11 +111,11 @@ export const KeysTree = ({ database }: Props) => {
     if (isUndefined(type)) {
       return
     }
-    fetchKeyInfo({ key: name, databaseId: database.id, dbIndex: dbIndex! }, false, () => {
+    fetchKeyInfo({ key: name, databaseId: database.id, dbIndex }, false, () => {
       vscodeApi.postMessage({
         action: VscodeMessageAction.SelectKey,
         data: {
-          database: { ...database, db: dbIndex! },
+          database: { ...database, db: dbIndex },
           keyInfo: { key: name, keyString, keyType: type, displayedKeyType: getGroupTypeDisplay(type) },
         },
       })
@@ -152,7 +152,7 @@ export const KeysTree = ({ database }: Props) => {
 
     return (
       <div className="pl-8">
-        <NoKeysMessage total={keysState.total} database={database} />
+        <NoKeysMessage total={keysState.total} database={database} dbIndex={dbIndex} />
       </div>
     )
   }

src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import cx from 'classnames'
-import { VscChevronRight, VscChevronDown, VscEdit } from 'react-icons/vsc'
+import { VscEdit } from 'react-icons/vsc'
 import { isUndefined, toNumber } from 'lodash'
 import * as l10n from '@vscode/l10n'
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
@@ -12,9 +12,7 @@ import {
   sendEventTelemetry,
 } from 'uiSrc/utils'
 import { ContextStoreProvider, Database, DatabaseOverview, checkConnectToDatabase, deleteDatabases } from 'uiSrc/store'
-import DatabaseOfflineIconSvg from 'uiSrc/assets/database/database_icon_offline.svg?react'
-import DatabaseActiveIconSvg from 'uiSrc/assets/database/database_icon_active.svg?react'
-import { Tooltip } from 'uiSrc/ui'
+import { Chevron, DatabaseIcon, Tooltip } from 'uiSrc/ui'
 import { PopoverDelete } from 'uiSrc/components'
 import { POPOVER_WINDOW_BORDER_WIDTH, VscodeMessageAction } from 'uiSrc/constants'
 import { vscodeApi } from 'uiSrc/services'
@@ -86,18 +84,6 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
     })
   }
 
-  const Chevron = () => (showTree ? (
-    <VscChevronDown className={cx(styles.icon, styles.iconNested)} />
-  ) : (
-    <VscChevronRight className={cx(styles.icon, styles.iconNested)} />
-  ))
-
-  const DatabaseIcon = () => (showTree ? (
-    <DatabaseActiveIconSvg className={styles.icon} />
-  ) : (
-    <DatabaseOfflineIconSvg className={styles.icon} />
-  ))
-
   const LogicalDatabase = (
     { database, open, dbTotal }:
     { database: Database, open?: boolean, dbTotal?: number },
@@ -127,8 +113,8 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
           className={styles.databaseNameWrapper}
           data-testid={`database-${id}`}
         >
-          {<Chevron/>}
-          {<DatabaseIcon/>}
+          {<Chevron open={showTree} />}
+          {<DatabaseIcon open={showTree} />}
           <Tooltip
             content={formatLongName(name, 100, 20)}
             position="bottom center"
@@ -164,23 +150,20 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
         </div>
       </div>
       {showTree && (<>
-        {!isUndefined(totalKeysPerDb) && Object.keys(totalKeysPerDb!).map((databaseIndex) => (
+        {!isUndefined(totalKeysPerDb) && Object.keys(totalKeysPerDb).map((databaseIndex) => (
           <LogicalDatabase
             key={id + databaseIndex}
-            open={Object.keys(totalKeysPerDb!)?.length === 1}
+            open={Object.keys(totalKeysPerDb)?.length === 1}
             dbTotal={totalKeysPerDb?.[databaseIndex]}
-            // database={database}
             database={{
               ...database,
               db: toNumber(databaseIndex.replace('db', '')),
             }}
-            // dbIndex={toNumber(databaseIndex.replace('db', ''))}
           />
         ))}
         {isUndefined(totalKeysPerDb) && (
           <LogicalDatabase
             key={id}
-            // database={database}
             database={{ ...database, db: 0 }}
             open={true}
           />

src/webviews/src/modules/keys-tree/components/keys-summary/KeysSummary.tsx

@@ -3,15 +3,15 @@ import * as l10n from '@vscode/l10n'
 import cx from 'classnames'
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
 import { BiSortDown, BiSortUp } from 'react-icons/bi'
-import { VscAdd, VscChevronDown, VscChevronRight, VscDatabase, VscTerminal } from 'react-icons/vsc'
+import { VscAdd, VscDatabase, VscTerminal } from 'react-icons/vsc'
 import { isUndefined } from 'lodash'
 
 import { TelemetryEvent, nullableNumberWithSpaces, numberWithSpaces, sendEventTelemetry } from 'uiSrc/utils'
 import { vscodeApi } from 'uiSrc/services'
 import { SortOrder, VscodeMessageAction } from 'uiSrc/constants'
 import { checkDatabaseIndexAction, Database, useContextApi, useContextInContext } from 'uiSrc/store'
-import { Nullable } from 'uiSrc/interfaces'
-import { RefreshBtn, Tooltip } from 'uiSrc/ui'
+import { Maybe, Nullable } from 'uiSrc/interfaces'
+import { Chevron, RefreshBtn, Tooltip } from 'uiSrc/ui'
 
 import { KeyTreeFilter } from '../keys-tree-filter'
 import { useKeysApi, useKeysInContext } from '../../hooks/useKeys'
@@ -24,7 +24,7 @@ export interface Props {
   loading: boolean
   total: Nullable<number>
   showTree: boolean
-  dbIndex: number
+  dbIndex: Maybe<number>
   toggleShowTree: (value?: boolean) => void
 }
 
@@ -46,7 +46,7 @@ export const KeysSummary = (props: Props) => {
     })
     vscodeApi.postMessage({
       action: VscodeMessageAction.AddKey,
-      data: { database: { ...database, db: dbIndex! } },
+      data: { database: { ...database, db: dbIndex } },
     })
   }
 
@@ -69,7 +69,7 @@ export const KeysSummary = (props: Props) => {
       return
     }
     if (!showTree) {
-      checkDatabaseIndexAction(database.id, dbIndex!, () => toggleShowTree())
+      checkDatabaseIndexAction(database.id, dbIndex, () => toggleShowTree())
       return
     }
     toggleShowTree()
@@ -78,23 +78,14 @@ export const KeysSummary = (props: Props) => {
   const openCliClickHandle = () => {
     vscodeApi.postMessage({
       action: VscodeMessageAction.AddCli,
-      data: { database: { ...database, db: dbIndex! } },
+      data: { database: { ...database, db: dbIndex } },
     })
   }
 
   const refreshHandle = () => {
     keysApi.fetchPatternKeysAction()
   }
 
-  const Chevron = () => {
-    if (!isMultiDbIndex) return null
-    return showTree ? (
-      <VscChevronDown className={cx(styles.icon, styles.iconNested)} />
-    ) : (
-      <VscChevronRight className={cx(styles.icon, styles.iconNested)} />
-    )
-  }
-
   const DbIndex = () => {
     if (!isMultiDbIndex) return null
     return (
@@ -137,7 +128,7 @@ export const KeysSummary = (props: Props) => {
         onClick={handleToggleShowTree}
         data-testid="keys-summary"
       >
-        {<Chevron />}
+        {<Chevron open={showTree} display={isMultiDbIndex} />}
         {<DbIndex />}
         {<Summary />}
       </div>

src/webviews/src/modules/keys-tree/components/keys-tree-header/KeysTreeHeader.spec.tsx

@@ -1,20 +1,17 @@
 import React from 'react'
 
 import { render, constants } from 'testSrc/helpers'
-import { KeysTreeHeader } from './KeysTreeHeader'
+import { KeysTreeHeader, Props } from './KeysTreeHeader'
 import * as useKeys from '../../hooks/useKeys'
 
 const useKeysInContextMock = vi.spyOn(useKeys, 'useKeysInContext')
 
 const mockDatabase = constants.DATABASE
 const mockedProps: Props = {
   database: mockDatabase,
-  total: 1,
-  scanned: 1,
-  showTree: true,
-  resultsLength: 1,
-  loading: false,
-  toggleShowTree: () => {},
+  dbTotal: 1,
+  open: true,
+  children: <div/>,
 }
 
 describe('KeysTreeHeaders', () => {

src/webviews/src/modules/keys-tree/components/keys-tree-header/KeysTreeHeader.tsx

@@ -67,7 +67,7 @@ export const KeysTreeHeader = ({ database, open, dbTotal, children }: Props) =>
         loading={loading}
         scanned={scanned}
         total={dbTotal ?? total}
-        dbIndex={dbIndex!}
+        dbIndex={dbIndex}
         resultsLength={resultsLength}
         showTree={showTree}
         toggleShowTree={handleToggleShowTree}

src/webviews/src/ui/icons/chevron/Chevron.spec.tsx

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

src/webviews/src/ui/icons/chevron/Chevron.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import cx from 'classnames'
+
+import { VscChevronDown, VscChevronRight } from 'react-icons/vsc'
+import styles from './styles.module.scss'
+
+export interface Props {
+  open?: boolean
+  display?: boolean
+}
+
+export const Chevron = ({ open = false, display = true }: Props) => {
+  if (!display) return null
+
+  return open ? (
+    <VscChevronDown className={cx(styles.icon, styles.iconNested)} />
+  ) : (
+    <VscChevronRight className={cx(styles.icon, styles.iconNested)} />
+  )
+}

src/webviews/src/ui/icons/chevron/styles.module.scss

@@ -0,0 +1,7 @@
+.icon {
+  @apply mr-2 w-[14px] h-[14px] min-w-[14px] ml-[3px];
+
+  &Nested {
+    @apply m-0;
+  }
+}

src/webviews/src/ui/icons/database/DatabaseIcon.spec.tsx

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

src/webviews/src/ui/icons/database/DatabaseIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import DatabaseOfflineIconSvg from 'uiSrc/assets/database/database_icon_offline.svg?react'
+import DatabaseActiveIconSvg from 'uiSrc/assets/database/database_icon_active.svg?react'
+import styles from './styles.module.scss'
+
+export interface Props {
+  open?: boolean
+  display?: boolean
+}
+
+export const DatabaseIcon = ({ open = false, display = true }: Props) => {
+  if (!display) return null
+
+  return open ? (
+    <DatabaseActiveIconSvg className={styles.icon} />
+  ) : (
+    <DatabaseOfflineIconSvg className={styles.icon} />
+  )
+}

src/webviews/src/ui/icons/database/styles.module.scss

@@ -0,0 +1,7 @@
+.icon {
+  @apply mr-2 w-[14px] h-[14px] min-w-[14px] ml-[3px];
+
+  &Nested {
+    @apply m-0;
+  }
+}

src/webviews/src/ui/index.ts

@@ -12,6 +12,8 @@ export { Spacer } from './spacer/Spacer'
 export { PromoLink } from './promo-link/PromoLink'
 export { Tooltip } from './tooltip/Tooltip'
 export { RiButton } from './button/RiButton'
+export { Chevron } from './icons/chevron/Chevron'
+export { DatabaseIcon } from './icons/database/DatabaseIcon'
 
 export type { RadioGroupOption } from './radio-group/RadioGroup'
 export type { SelectOption } from './select/Select'