Skip to content

Commit 280dc62

Browse files
vlad-dargelvlad-dargel
committed
Merge branch 'main' into e2e/bugfix/fix-e2e
2 parents 6c21ca2 + 22f7ed5 commit 280dc62

File tree

71 files changed

+1575
-747
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+1575
-747
lines changed

‎l10n/bundle.l10n.json

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@
4646
"Key Size": "Key Size",
4747
"Key Size: ": "Key Size: ",
4848
"Length": "Length",
49+
"Enter Value": "Enter Value",
4950
"Add Members": "Add Members",
5051
"Member": "Member",
51-
"Enter Score": "Enter Score",
52+
"Member:": "Member:",
5253
"Score": "Score",
5354
"Use CLI to edit the score": "Use CLI to edit the score",
5455
"Edit value": "Edit value",
5556
"Empty": "Empty",
56-
"Enter Value": "Enter Value",
5757
"loading...": "loading...",
5858
"Load all": "Load all",
5959
"Download": "Download",
@@ -69,11 +69,19 @@
6969
"Remove": "Remove",
7070
"will be removed from the {0} of {1}": "will be removed from the {0} of {1}",
7171
"If you remove all Elements, the whole Key will be deleted.": "If you remove all Elements, the whole Key will be deleted.",
72+
"Index": "Index",
73+
"Index:": "Index:",
74+
"Element": "Element",
7275
"Push to tail": "Push to tail",
7376
"Push to head": "Push to head",
7477
"Add Fields": "Add Fields",
78+
"Show TTL per row": "Show TTL per row",
7579
"Field": "Field",
7680
"Value": "Value",
81+
"TTL": "TTL",
82+
"Enter TTL": "Enter TTL",
83+
"No Limit": "No Limit",
84+
"Time to Live": "Time to Live",
7785
"Enter Field": "Enter Field",
7886
"Submit": "Submit",
7987
"- EULA and Privacy settings": "- EULA and Privacy settings",
@@ -88,7 +96,6 @@
8896
"Members": "Members",
8997
"Add Key": "Add Key",
9098
"value": "value",
91-
"Element": "Element",
9299
"Fields": "Fields",
93100
"TTL: No limit": "TTL: No limit",
94101
"Key name*": "Key name*",
@@ -143,7 +150,6 @@
143150
"Failed to convert to {0}": "Failed to convert to {0}",
144151
"Key Name*": "Key Name*",
145152
"Enter Key Name": "Enter Key Name",
146-
"TTL": "TTL",
147153
"No limit": "No limit",
148154
"Score*": "Score*",
149155
"Enter Score*": "Enter Score*",

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,7 @@
285285
"pickleparser": "^0.2.1",
286286
"rawproto": "^0.7.15",
287287
"rc-checkbox": "^3.2.0",
288+
"rc-resize-observer": "^1.4.0",
288289
"react": "^18.3.1",
289290
"react-contenteditable": "^3.3.7",
290291
"react-cool-onclickoutside": "^1.7.0",

‎src/webviews/src/actions/selectKeyAction.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
import { StorageItem, VscodeMessageAction } from 'uiSrc/constants'
22
import { PostMessage } from 'uiSrc/interfaces'
33
import { sessionStorageService } from 'uiSrc/services'
4-
import { fetchKeyInfo, resetZustand, useSelectedKeyStore } from 'uiSrc/store'
4+
import { fetchKeyInfo, resetZustand, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
55
import { TelemetryEvent, isEqualBuffers, sendEventTelemetry } from 'uiSrc/utils'
66

77
export const selectKeyAction = (message: PostMessage) => {
88
if (message.action !== VscodeMessageAction.SelectKey) {
99
return
1010
}
1111

12-
const { key, databaseId } = message?.data
12+
const { key, database } = message?.data
1313
const prevKey = useSelectedKeyStore.getState().data?.name
1414

1515
if (isEqualBuffers(key, prevKey)) {
1616
return
1717
}
18-
sessionStorageService.set(StorageItem.databaseId, databaseId)
18+
19+
sessionStorageService.set(StorageItem.databaseId, database?.id)
1920
resetZustand()
2021

2122
fetchKeyInfo({ key }, true, ({ type: keyType, length }) => {
23+
useDatabasesStore.getState().setConnectedDatabase(database)
2224
sendEventTelemetry({
2325
event: TelemetryEvent.TREE_VIEW_KEY_VALUE_VIEWED,
2426
eventData: {
2527
keyType,
26-
databaseId,
28+
databaseId: database?.id,
2729
length,
2830
},
2931
})

‎src/webviews/src/components/inline-editor/InlineEditor.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {
22
MouseEvent,
33
KeyboardEvent,
4-
Ref,
54
useEffect,
65
useRef,
76
useState,
@@ -30,9 +29,9 @@ export interface Props {
3029
placeholder?: string
3130
maxLength?: number
3231
expandable?: boolean
33-
isActive?: boolean
34-
isLoading?: boolean
35-
isDisabled?: boolean
32+
active?: boolean
33+
loading?: boolean
34+
disabled?: boolean
3635
invalid?: boolean
3736
disableEmpty?: boolean
3837
disableByValidation?: (value: string) => boolean
@@ -65,7 +64,7 @@ const InlineEditor = memo((props: Props) => {
6564
maxLength,
6665
children,
6766
expandable,
68-
isLoading,
67+
loading,
6968
invalid,
7069
autoSelect,
7170
autoFocus,
@@ -74,7 +73,7 @@ const InlineEditor = memo((props: Props) => {
7473
validation,
7574
declineOnUnmount = true,
7675
viewChildrenMode,
77-
isDisabled,
76+
disabled,
7877
controlsPosition = 'center',
7978
autoComplete = 'off',
8079
controlsClassName,
@@ -83,7 +82,7 @@ const InlineEditor = memo((props: Props) => {
8382
disableFocusTrap = false,
8483
approveByValidation,
8584
approveText,
86-
isActive: isActiveProp,
85+
active: activeProp,
8786
inputClassName,
8887
inlineTestId = 'inline-item-editor',
8988
} = props
@@ -92,11 +91,11 @@ const InlineEditor = memo((props: Props) => {
9291
const popupRef = useRef<PopupActions>(null)
9392
const [value, setValue] = useState<string>(initialValue)
9493
const [isError, setIsError] = useState<boolean>(false)
95-
const [isActive, setIsActive] = useState(isActiveProp)
94+
const [isActive, setIsActive] = useState(activeProp)
9695

9796
const handleClickOutside = (event: any) => {
9897
if (preventOutsideClick) return
99-
if (!isLoading) {
98+
if (!loading) {
10099
onDecline?.(event)
101100
} else {
102101
event.stopPropagation()
@@ -175,12 +174,12 @@ const InlineEditor = memo((props: Props) => {
175174
}
176175

177176
const isDisabledApply = (): boolean =>
178-
!!(isLoading || isError || isDisabled || (disableEmpty && !value.length))
177+
!!(loading || isError || disabled || (disableEmpty && !value.length))
179178

180179
const ApplyBtn = (
181180
<Tooltip
182-
title={isDisabled ? disabledTooltipText?.title : ''}
183-
content={isDisabled ? disabledTooltipText?.text : ''}
181+
title={disabled ? disabledTooltipText?.title : ''}
182+
content={disabled ? disabledTooltipText?.text : ''}
184183
>
185184
<VSCodeButton
186185
appearance="icon"
@@ -237,7 +236,7 @@ const InlineEditor = memo((props: Props) => {
237236
setIsActive(false)
238237
onDecline?.(event)
239238
}}
240-
disabled={isLoading}
239+
disabled={loading}
241240
data-testid="cancel-btn"
242241
>
243242
{ controlsPosition === 'bottom' ? <RxCross1 /> : <VscError />}

‎src/webviews/src/components/inline-editor/styles.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $controls-padding-y: 10px;
1010
}
1111

1212
.field {
13-
@apply bg-vscode-input-background pr-5 min-w-[72px] max-w-full h-full;
13+
@apply bg-vscode-input-background pr-5 min-w-[90px] max-w-full h-full;
1414

1515
&:focus {
1616
@apply outline-none;

‎src/webviews/src/components/virtual-table/VirtualTable.tsx

Lines changed: 89 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import cx from 'classnames'
22
import { findIndex, isNumber, sumBy, xor } from 'lodash'
3-
import AutoSizer, { Size } from 'react-virtualized-auto-sizer'
3+
import ResizeObserver, { SizeInfo } from 'rc-resize-observer'
44
import React, { useCallback, useEffect, useRef, useState } from 'react'
55
import {
66
CellMeasurer,
@@ -34,6 +34,8 @@ const TABLE_OUTSIDE_WIDTH = 24
3434

3535
const VirtualTable = (props: IProps) => {
3636
const {
37+
autoHeight,
38+
tableRef,
3739
selectable = false,
3840
expandable = false,
3941
headerHeight = 44,
@@ -133,7 +135,7 @@ const VirtualTable = (props: IProps) => {
133135
cellCache?.clearAll()
134136
}, [totalItemsCount])
135137

136-
const onResize = ({ width = 0, height = 0 }: Size): void => {
138+
const onResize = ({ width = 0, height = 0 }: SizeInfo): void => {
137139
setHeight(height)
138140
setWidth(Math.floor(width))
139141
onChangeWidth?.(width)
@@ -492,90 +494,93 @@ const VirtualTable = (props: IProps) => {
492494
}
493495

494496
return (
495-
<AutoSizer onResize={onResize}>
496-
{({ width, height }) => (
497-
<div
498-
className={cx(styles.container, { [styles.isResizing]: isColResizing })}
499-
style={{ width, height }}
500-
onWheel={onWheel}
501-
onMouseMove={onDragColumn}
502-
onMouseUp={onDragColumnEnd}
503-
onMouseLeave={onDragColumnEnd}
504-
role="presentation"
505-
data-testid="virtual-table-container"
497+
<ResizeObserver onResize={onResize}>
498+
<div
499+
className={cx(styles.container, { [styles.isResizing]: isColResizing })}
500+
onWheel={onWheel}
501+
onMouseMove={onDragColumn}
502+
onMouseUp={onDragColumnEnd}
503+
onMouseLeave={onDragColumnEnd}
504+
role="presentation"
505+
data-testid="virtual-table-container"
506+
>
507+
{loading && !hideProgress && (
508+
<span />
509+
)}
510+
<InfiniteLoader
511+
isRowLoaded={isRowLoaded}
512+
minimumBatchSize={SCAN_COUNT_DEFAULT}
513+
threshold={threshold}
514+
loadMoreRows={loadMoreRows}
515+
rowCount={totalItemsCount || undefined}
506516
>
507-
{loading && !hideProgress && (
508-
<span />
517+
{({ onRowsRendered, registerChild }) => (
518+
<Table
519+
onRowClick={onRowSelect}
520+
onRowDoubleClick={() => clearSelectTimeout()}
521+
estimatedRowSize={rowHeight}
522+
headerHeight={headerHeight}
523+
rowHeight={cellCache.rowHeight}
524+
width={tableWidth > width ? tableWidth : width}
525+
noRowsRenderer={noRowsRenderer}
526+
height={height}
527+
className={cx(styles.table, { [styles.autoHeight]: autoHeight })}
528+
gridClassName={cx(styles.customScroll, styles.grid, {
529+
[styles.disableScroll]: disableScroll,
530+
})}
531+
rowClassName={({ index }) =>
532+
cx([
533+
styles.tableRow,
534+
{
535+
'table-row-selected': selectedRowIndex === index,
536+
[styles.tableRowEven]: index % 2 === 0,
537+
},
538+
])}
539+
headerClassName={styles.headerColumn}
540+
rowCount={items.length}
541+
rowGetter={({ index }) => items[index]}
542+
onScroll={onScroll}
543+
scrollTop={forceScrollTop}
544+
deferredMeasurementCache={cellCache}
545+
onRowsRendered={(props) => {
546+
onRowsRendered(props)
547+
onRowsRenderedProps?.(props)
548+
}}
549+
ref={(ref) => {
550+
if (tableRef) {
551+
tableRef.current = ref
552+
}
553+
554+
return registerChild(ref)
555+
}}
556+
>
557+
{columns.map((column: ITableColumn, index: number) => (
558+
<Column
559+
minWidth={column.minWidth}
560+
maxWidth={column.maxWidth}
561+
label={column.label}
562+
dataKey={column.id}
563+
width={columnWidthSizes?.[column.id]?.abs || (
564+
column.absoluteWidth || column.relativeWidth ? column.relativeWidth ?? 0 : 20
565+
)}
566+
flexGrow={!column.absoluteWidth && !column.relativeWidth ? 1 : 0}
567+
headerRenderer={(headerProps) =>
568+
headerRenderer({
569+
...headerProps,
570+
columnIndex: index,
571+
cellClass: column.headerCellClassName,
572+
})}
573+
cellRenderer={cellRenderer}
574+
headerClassName={column.headerClassName ?? ''}
575+
className={cx(styles.tableRowColumn, column.className ?? '')}
576+
key={column.id}
577+
/>
578+
))}
579+
</Table>
509580
)}
510-
<InfiniteLoader
511-
isRowLoaded={isRowLoaded}
512-
minimumBatchSize={SCAN_COUNT_DEFAULT}
513-
threshold={threshold}
514-
loadMoreRows={loadMoreRows}
515-
rowCount={totalItemsCount || undefined}
516-
>
517-
{({ onRowsRendered, registerChild }) => (
518-
<Table
519-
onRowClick={onRowSelect}
520-
onRowDoubleClick={() => clearSelectTimeout()}
521-
estimatedRowSize={rowHeight}
522-
ref={registerChild}
523-
headerHeight={headerHeight}
524-
rowHeight={cellCache.rowHeight}
525-
width={tableWidth > width ? tableWidth : width}
526-
noRowsRenderer={noRowsRenderer}
527-
height={height}
528-
className={styles.table}
529-
gridClassName={cx(styles.customScroll, styles.grid, {
530-
[styles.disableScroll]: disableScroll,
531-
})}
532-
rowClassName={({ index }) =>
533-
cx([
534-
styles.tableRow,
535-
{
536-
'table-row-selected': selectedRowIndex === index,
537-
[styles.tableRowEven]: index % 2 === 0,
538-
},
539-
])}
540-
headerClassName={styles.headerColumn}
541-
rowCount={items.length}
542-
rowGetter={({ index }) => items[index]}
543-
onScroll={onScroll}
544-
scrollTop={forceScrollTop}
545-
deferredMeasurementCache={cellCache}
546-
onRowsRendered={(props) => {
547-
onRowsRendered(props)
548-
onRowsRenderedProps?.(props)
549-
}}
550-
>
551-
{columns.map((column: ITableColumn, index: number) => (
552-
<Column
553-
minWidth={column.minWidth}
554-
maxWidth={column.maxWidth}
555-
label={column.label}
556-
dataKey={column.id}
557-
width={columnWidthSizes?.[column.id]?.abs || (
558-
column.absoluteWidth || column.relativeWidth ? column.relativeWidth ?? 0 : 20
559-
)}
560-
flexGrow={!column.absoluteWidth && !column.relativeWidth ? 1 : 0}
561-
headerRenderer={(headerProps) =>
562-
headerRenderer({
563-
...headerProps,
564-
columnIndex: index,
565-
cellClass: column.headerCellClassName,
566-
})}
567-
cellRenderer={cellRenderer}
568-
headerClassName={column.headerClassName ?? ''}
569-
className={cx(styles.tableRowColumn, column.className ?? '')}
570-
key={column.id}
571-
/>
572-
))}
573-
</Table>
574-
)}
575-
</InfiniteLoader>
576-
</div>
577-
)}
578-
</AutoSizer>
581+
</InfiniteLoader>
582+
</div>
583+
</ResizeObserver>
579584
)
580585
}
581586

0 commit comments

Comments
 (0)