random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-03-07 10:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix multi delete

Browse Source
This commit is contained in:
Laurent Nguyen 2024-03-27 18:42:38 +01:00
parent 2f85c4f84a
commit 91633ee85c
2 changed files with 24 additions and 40 deletions
src/Explorer/Tabs/DocumentsTabV2
DocumentsTabV2.tsxDocumentsTableComponent.tsx

45
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@ -7,7 +7,7 @@ import {
QueryIterator, QueryIterator,
Resource, Resource,
} from "@azure/cosmos"; } from "@azure/cosmos";
import { FluentProvider } from "@fluentui/react-components"; import { FluentProvider, TableRowId } from "@fluentui/react-components";
import Split from "@uiw/react-split"; import Split from "@uiw/react-split";
import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants"; import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils"; import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
@ -132,7 +132,8 @@ const DocumentsTabComponent: React.FunctionComponent<{
const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined); const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined);
const [selectedDocumentId, setSelectedDocumentId] = useState<DocumentId>(undefined); const [selectedDocumentId, setSelectedDocumentId] = useState<DocumentId>(undefined);
const [multiSelectedDocumentIds, setMultiSelectedDocumentIds] = useState<DocumentId[]>([]); // Table selection
const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
// Command buttons // Command buttons
const [editorState, setEditorState] = useState<ViewModels.DocumentExplorerState>( const [editorState, setEditorState] = useState<ViewModels.DocumentExplorerState>(
@ -331,7 +332,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
// TODO Put whatever the buttons callback use in the dependency array // TODO Put whatever the buttons callback use in the dependency array
useEffect( useEffect(
() => updateNavbarWithTabsButtons(), () => updateNavbarWithTabsButtons(),
[editorState, selectedDocumentContent, initialDocumentContent, multiSelectedDocumentIds, documentIds], [editorState, selectedDocumentContent, initialDocumentContent, selectedRows, documentIds],
); );
useEffect(() => { useEffect(() => {
@ -495,14 +496,14 @@ const DocumentsTabComponent: React.FunctionComponent<{
// const selectedDocumentId = this.selectedDocumentId(); // const selectedDocumentId = this.selectedDocumentId();
// TODO: Rework this for localization // TODO: Rework this for localization
const isPlural = multiSelectedDocumentIds.length > 1; const isPlural = selectedRows.size > 1;
const documentName = !isPreferredApiMongoDB const documentName = !isPreferredApiMongoDB
? isPlural ? isPlural
? `the selected ${multiSelectedDocumentIds.length} items` ? `the selected ${selectedRows.size} items`
: "the selected item" : "the selected item"
: isPlural : isPlural
? `the selected ${multiSelectedDocumentIds.length} documents` ? `the selected ${selectedRows.size} documents`
: "the selected document"; : "the selected document";
const msg = `Are you sure you want to delete ${documentName}?`; const msg = `Are you sure you want to delete ${documentName}?`;
useDialog.getState().showOkCancelModalDialog( useDialog.getState().showOkCancelModalDialog(
@ -510,7 +511,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
msg, msg,
"Delete", "Delete",
// async () => await _deleteDocuments(selectedDocumentId), // async () => await _deleteDocuments(selectedDocumentId),
() => deleteDocuments(multiSelectedDocumentIds), () => deleteDocuments(Array.from(selectedRows).map((index) => documentIds[index as number])),
"Cancel", "Cancel",
undefined, undefined,
); );
@ -536,7 +537,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
setSelectedDocumentContent(undefined); setSelectedDocumentContent(undefined);
setSelectedDocumentId(undefined); setSelectedDocumentId(undefined);
setMultiSelectedDocumentIds([]); setSelectedRows(new Set());
setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected); setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
}) })
.finally(() => setIsExecuting(false)); .finally(() => setIsExecuting(false));
@ -1012,17 +1013,6 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
}; };
const onDocumentsSelectionChange = useCallback(
(selectedItemsIndices: Set<number>) => {
if (documentIds.length === 0) {
return;
}
setMultiSelectedDocumentIds(Array.from(selectedItemsIndices).map((index) => documentIds[index]));
},
[documentIds],
);
const loadDocument = (documentId: DocumentId) => const loadDocument = (documentId: DocumentId) =>
(_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(props.collection, documentId)).then( (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(props.collection, documentId)).then(
(content) => { (content) => {
@ -1142,7 +1132,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
<button <button
className="filterbtnstyle queryButton" className="filterbtnstyle queryButton"
onClick={onShowFilterClick} onClick={onShowFilterClick}
/*data-bind="click: onShowFilterClick"*/ /*data-bind="click: onShowFilterClick"*/
> >
Edit Filter Edit Filter
</button> </button>
@ -1192,7 +1182,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
value={filterContent} value={filterContent}
onChange={(e) => setFilterContent(e.target.value)} onChange={(e) => setFilterContent(e.target.value)}
/* /*
data-bind=" data-bind="
W attr:{ W attr:{
placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.' placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
@ -1245,7 +1235,7 @@ data-bind="
tabIndex={0} tabIndex={0}
onClick={onHideFilterClick} onClick={onHideFilterClick}
onKeyDown={onCloseButtonKeyDown} onKeyDown={onCloseButtonKeyDown}
/*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/ /*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/
> >
<img src={CloseIcon} style={{ height: 14, width: 14 }} alt="Hide filter" /> <img src={CloseIcon} style={{ height: 14, width: 14 }} alt="Hide filter" />
</span> </span>
@ -1266,7 +1256,8 @@ data-bind="
style={{ width: 200 }} style={{ width: 200 }}
items={tableItems} items={tableItems}
onItemClicked={onDocumentClicked} onItemClicked={onDocumentClicked}
onSelectedItemsChange={onDocumentsSelectionChange} onSelectedRowsChange={setSelectedRows}
selectedRows={selectedRows}
size={tableContainerSizePx} size={tableContainerSizePx}
columnHeaders={columnHeaders} columnHeaders={columnHeaders}
onRefreshClicked={refreshDocumentsGrid} onRefreshClicked={refreshDocumentsGrid}
@ -1276,7 +1267,7 @@ data-bind="
</a> </a>
</div> </div>
<div style={{ minWidth: "20%", width: "100%" }}> <div style={{ minWidth: "20%", width: "100%" }}>
{selectedDocumentContent && multiSelectedDocumentIds.length === 1 && ( {selectedDocumentContent && selectedRows.size === 1 && (
<EditorReact <EditorReact
language={"json"} language={"json"}
content={selectedDocumentContent} content={selectedDocumentContent}
@ -1287,8 +1278,8 @@ data-bind="
onContentChanged={_onEditorContentChange} onContentChanged={_onEditorContentChange}
/> />
)} )}
{multiSelectedDocumentIds.length > 1 && ( {selectedRows.size > 1 && (
<span style={{ margin: 10 }}>Number of selected documents: {multiSelectedDocumentIds.length}</span> <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
)} )}
</div> </div>
</Split> </Split>

19
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@ -40,7 +40,8 @@ export type ColumnHeaders = {
export interface IDocumentsTableComponentProps { export interface IDocumentsTableComponentProps {
items: DocumentsTableComponentItem[]; items: DocumentsTableComponentItem[];
onItemClicked: (index: number) => void; onItemClicked: (index: number) => void;
onSelectedItemsChange: (selectedItemsIndices: Set<number>) => void; onSelectedRowsChange: (selectedItemsIndices: Set<TableRowId>) => void;
selectedRows: Set<TableRowId>;
size: { height: number; width: number }; size: { height: number; width: number };
columnHeaders: ColumnHeaders; columnHeaders: ColumnHeaders;
onRefreshClicked: () => void; onRefreshClicked: () => void;
@ -60,7 +61,8 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
items, items,
onItemClicked, onItemClicked,
onSelectedItemsChange, onSelectedRowsChange,
selectedRows,
style, style,
size, size,
columnHeaders, columnHeaders,
@ -96,15 +98,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
})); }));
}, []); }, []);
const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
// If selected rows change, call props
useEffect(() => {
if (onSelectedItemsChange) {
onSelectedItemsChange(selectedRows);
}
}, [selectedRows, onSelectedItemsChange]);
// Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = useMemo( const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = useMemo(
() => () =>
@ -159,7 +152,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
{columns.map((column) => ( {columns.map((column) => (
<TableCell <TableCell
key={column.columnId} key={column.columnId}
onClick={(/* e */) => setSelectedRows(new Set<TableRowId>([index]))} onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
{...columnSizing.getTableCellProps(column.columnId)} {...columnSizing.getTableCellProps(column.columnId)}
> >
@ -185,7 +178,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
useTableSelection({ useTableSelection({
selectionMode: "multiselect", selectionMode: "multiselect",
selectedItems: selectedRows, selectedItems: selectedRows,
onSelectionChange: (e, data) => setSelectedRows(data.selectedItems), onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
}), }),
], ],
); );