random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-06-04 22:52:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix UX issue with not discarding edit changes

Browse Source
This commit is contained in:
Laurent Nguyen 2024-03-28 11:43:04 +01:00
parent 8d099b9c1b
commit 98c4d31717
1 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -350,22 +350,27 @@ const DocumentsTabComponent: React.FunctionComponent<{
}
}, [documentsIterator]);
const onNewDocumentClick = useCallback((): void => {
const confirmDiscardingChange = (onDiscard: () => void, onCancelDiscard?: () => void): void => {
if (isEditorDirty()) {
useDialog
.getState()
.showOkCancelModalDialog(
"Unsaved changes",
"Changes will be lost. Do you want to continue?",
"Your unsaved changes will be lost. Do you want to continue?",
"OK",
() => initializeNewDocument(),
onDiscard,
"Cancel",
undefined,
onCancelDiscard,
);
} else {
initializeNewDocument();
onDiscard();
}
}, [editorState /* TODO isEditorDirty depends on more than just editorState */]);
};
const onNewDocumentClick = useCallback(
(): void => confirmDiscardingChange(() => initializeNewDocument()),
[editorState /* TODO isEditorDirty depends on more than just editorState */],
);
const initializeNewDocument = (): void => {
// this.selectedDocumentId(null);
@ -992,21 +997,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
const onDocumentClicked = (tabRowId: TableRowId) => {
const index = tabRowId as number;
setClickedRow(index);
if (isEditorDirty()) {
useDialog
.getState()
.showOkCancelModalDialog(
"Unsaved changes",
"Your unsaved changes will be lost. Do you want to continue?",
"OK",
() => loadDocument(documentIds[index]),
"Cancel",
undefined,
);
} else {
loadDocument(documentIds[index]);
}
};
const loadDocument = (documentId: DocumentId) =>
@ -1102,24 +1093,29 @@ const DocumentsTabComponent: React.FunctionComponent<{
};
const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
confirmDiscardingChange(() => {
if (selectedRows.size === 0) {
setSelectedDocumentContent(undefined);
setClickedRow(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);
setSelectedDocumentContent(undefined);
setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
}
// If only one selection, we consider as a click
if (selectedRows.size === 1) {
const selectedRow = Array.from(selectedRows)[0];
onDocumentClicked(selectedRow);
setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
}
setSelectedRows(selectedRows);
});
};
return (
@ -1203,11 +1199,11 @@ const DocumentsTabComponent: React.FunctionComponent<{
/*
data-bind="
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.'
},
css: { placeholderVisible: filterContent().length === 0 },
textInput: filterContent"
*/
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.'
},
css: { placeholderVisible: filterContent().length === 0 },
textInput: filterContent"
*/
/>
<datalist id="filtersList" /*data-bind="foreach: lastFilterContents"*/>