From 06d48294223223b9cde4c8d4917953591861db9c Mon Sep 17 00:00:00 2001 From: Laurent Nguyen Date: Fri, 7 Jun 2024 16:28:08 +0200 Subject: [PATCH] Fix click to show document issue. Table doesn't auto-select first document anymore. (#1864) --- .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx | 140 ++++++++++-------- .../DocumentsTableComponent.tsx | 17 +-- 2 files changed, 81 insertions(+), 76 deletions(-) diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx index 9cfc4301d..60367cb66 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx @@ -86,6 +86,9 @@ export class DocumentsTabV2 extends TabsBase { } } +// Use this value to initialize the very time the component is rendered +const RESET_INDEX = -1; + const filterButtonStyle: CSSProperties = { marginLeft: 8, }; @@ -465,7 +468,7 @@ export const DocumentsTabComponent: React.FunctionComponent(undefined); // Table user clicked on this row - const [clickedRow, setClickedRow] = useState(undefined); + const [clickedRowIndex, setClickedRowIndex] = useState(RESET_INDEX); // Table multiple selection const [selectedRows, setSelectedRows] = React.useState>(() => new Set([0])); @@ -490,6 +493,23 @@ export const DocumentsTabComponent: React.FunctionComponent { + if (documentIds.length > 0) { + let currentClickedRowIndex = clickedRowIndex; + if ( + (currentClickedRowIndex === RESET_INDEX && + editorState === ViewModels.DocumentExplorerState.noDocumentSelected) || + currentClickedRowIndex > documentIds.length - 1 + ) { + // reset clicked row or the current clicked row is out of bounds + currentClickedRowIndex = 0; + setSelectedRows(new Set([0])); + onDocumentClicked(currentClickedRowIndex, documentIds); + } + } + }, [documentIds, clickedRowIndex, editorState]); + let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC']; const applyFilterButton = { @@ -550,7 +570,7 @@ export const DocumentsTabComponent: React.FunctionComponent { + // TODO: Reuse initDocumentEditor() to remove code duplication const value: string = renderObjectForEditor(savedDocument || {}, null, 4); setSelectedDocumentContentBaseline(value); + setSelectedDocumentContent(value); setInitialDocumentContent(value); const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues( savedDocument, @@ -738,7 +760,7 @@ export const DocumentsTabComponent: React.FunctionComponent setIsExecuting(false)); - }, [onExecutionErrorChange, tabTitle, selectedDocumentContent, _collection, partitionKey, documentIds, clickedRow]); + }, [ + onExecutionErrorChange, + tabTitle, + selectedDocumentContent, + _collection, + partitionKey, + documentIds, + clickedRowIndex, + ]); const onRevertExistingDocumentClick = useCallback((): void => { setSelectedDocumentContentBaseline(initialDocumentContent); @@ -850,7 +880,7 @@ export const DocumentsTabComponent: React.FunctionComponent { + setDocumentIds(newDocumentsIds); + + if (onLoadStartKey !== null && onLoadStartKey !== undefined) { + TelemetryProcessor.traceSuccess( + Action.Tab, + { + databaseName: _collection.databaseId, + collectionName: _collection.id(), + + dataExplorerArea: Constants.Areas.Tab, + tabTitle, + }, + onLoadStartKey, + ); + setOnLoadStartKey(undefined); + } + }; + let loadNextPage = useCallback( - (iterator: QueryIterator, applyFilterButtonClicked?: boolean): Promise => { + (iterator: QueryIterator, applyFilterButtonClicked: boolean): Promise => { setIsExecuting(true); onExecutionErrorChange(false); let automaticallyCancelQueryAfterTimeout: boolean; @@ -1028,21 +1077,7 @@ export const DocumentsTabComponent: React.FunctionComponent { onExecutionErrorChange(true); @@ -1112,7 +1147,7 @@ export const DocumentsTabComponent: React.FunctionComponent = (event) => { if (event.key === " " || event.key === "Enter") { const focusElement = event.target as HTMLElement; - loadNextPage(documentsIterator.iterator); + loadNextPage(documentsIterator.iterator, false); focusElement && focusElement.focus(); event.stopPropagation(); event.preventDefault(); @@ -1158,10 +1193,10 @@ export const DocumentsTabComponent: React.FunctionComponent { + const onDocumentClicked = (tabRowId: TableRowId, currentDocumentIds: DocumentId[]) => { const index = tabRowId as number; - setClickedRow(index); - loadDocument(documentIds[index]); + setClickedRowIndex(index); + loadDocument(currentDocumentIds[index]); }; let loadDocument = (documentId: DocumentId) => @@ -1267,13 +1302,13 @@ export const DocumentsTabComponent: React.FunctionComponent { if (selectedRows.size === 0) { setSelectedDocumentContent(undefined); - setClickedRow(undefined); + setClickedRowIndex(undefined); setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected); } // Find if clickedRow is in selectedRows.If not, clear clickedRow and content - if (clickedRow !== undefined && !selectedRows.has(clickedRow)) { - setClickedRow(undefined); + if (clickedRowIndex !== undefined && !selectedRows.has(clickedRowIndex)) { + setClickedRowIndex(undefined); setSelectedDocumentContent(undefined); setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected); } @@ -1281,6 +1316,7 @@ export const DocumentsTabComponent: React.FunctionComponent { setContinuationToken(newContinuationToken); - let currentDocuments = documentIds; - const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid); + const currentDocumentsRids = documentIds.map((currentDocument) => currentDocument.rid); const nextDocumentIds = documents .filter((d: { _rid: string }) => { return currentDocumentsRids.indexOf(d._rid) < 0; @@ -1569,34 +1606,10 @@ export const DocumentsTabComponent: React.FunctionComponent { const partitionKeyValue = rawDocument._partitionKeyValue; return newDocumentId(rawDocument, partitionKeyProperties, [partitionKeyValue]); - // return new DocumentId(this, rawDocument, [partitionKeyValue]); }); - const merged = currentDocuments.concat(nextDocumentIds); - - setDocumentIds(merged); - currentDocuments = merged; - - if (filterContent.length > 0 && currentDocuments.length > 0) { - currentDocuments[0].click(); - } else { - setSelectedDocumentContent(""); - setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected); - } - if (_onLoadStartKey !== null && _onLoadStartKey !== undefined) { - TelemetryProcessor.traceSuccess( - Action.Tab, - { - databaseName: _collection.databaseId, - collectionName: _collection.id(), - - dataExplorerArea: Constants.Areas.Tab, - tabTitle, - }, - _onLoadStartKey, - ); - setOnLoadStartKey(undefined); - } + const merged = documentIds.concat(nextDocumentIds); + updateDocumentIds(merged); }, // eslint-disable-next-line @typescript-eslint/no-explicit-any (error: any) => { @@ -1624,7 +1637,7 @@ export const DocumentsTabComponent: React.FunctionComponent => { + (applyFilterButtonPressed: boolean): void => { // clear documents grid setDocumentIds([]); setContinuationToken(undefined); // For mongo @@ -1638,6 +1651,13 @@ export const DocumentsTabComponent: React.FunctionComponent onDocumentClicked(index, documentIds)} onSelectedRowsChange={onSelectedRowsChange} selectedRows={selectedRows} size={tableContainerSizePx} diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx index 58f486c3b..a04844964 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx @@ -25,7 +25,7 @@ import { import { NormalizedEventKey } from "Common/Constants"; import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper"; import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils"; -import React, { useCallback, useEffect, useMemo } from "react"; +import React, { useCallback, useMemo } from "react"; import { FixedSizeList as List, ListChildComponentProps } from "react-window"; export type DocumentsTableComponentItem = { @@ -59,7 +59,6 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps { export const DocumentsTableComponent: React.FC = ({ items, - onItemClicked, onSelectedRowsChange, selectedRows, style, @@ -67,8 +66,6 @@ export const DocumentsTableComponent: React.FC = columnHeaders, isSelectionDisabled, }: IDocumentsTableComponentProps) => { - const [activeItemIndex, setActiveItemIndex] = React.useState(undefined); - const initialSizingOptions: TableColumnSizingOptions = { id: { idealWidth: 280, @@ -250,18 +247,6 @@ export const DocumentsTableComponent: React.FC = [toggleAllRows], ); - // Load document depending on selection - useEffect(() => { - if (selectedRows.size === 1 && items.length > 0) { - const newActiveItemIndex = selectedRows.values().next().value; - if (newActiveItemIndex !== activeItemIndex) { - onItemClicked(newActiveItemIndex); - setActiveItemIndex(newActiveItemIndex); - setSelectionStartIndex(newActiveItemIndex); - } - } - }, [selectedRows, items, activeItemIndex, onItemClicked]); - // Cell keyboard navigation const keyboardNavAttr = useArrowNavigationGroup({ axis: "grid" });