random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-01 13:46:41 +00: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

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

@ -350,22 +350,27 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
}, [documentsIterator]); }, [documentsIterator]);
const onNewDocumentClick = useCallback((): void => { const confirmDiscardingChange = (onDiscard: () => void, onCancelDiscard?: () => void): void => {
if (isEditorDirty()) { if (isEditorDirty()) {
useDialog useDialog
.getState() .getState()
.showOkCancelModalDialog( .showOkCancelModalDialog(
"Unsaved changes", "Unsaved changes",
"Changes will be lost. Do you want to continue?", "Your unsaved changes will be lost. Do you want to continue?",
"OK", "OK",
() => initializeNewDocument(), onDiscard,
"Cancel", "Cancel",
undefined, onCancelDiscard,
); );
} else { } 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 => { const initializeNewDocument = (): void => {
// this.selectedDocumentId(null); // this.selectedDocumentId(null);
@ -515,8 +520,8 @@ const DocumentsTabComponent: React.FunctionComponent<{
? `the selected ${selectedRows.size} items` ? `the selected ${selectedRows.size} items`
: "the selected item" : "the selected item"
: isPlural : isPlural
? `the selected ${selectedRows.size} 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(
@ -992,21 +997,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
const onDocumentClicked = (tabRowId: TableRowId) => { const onDocumentClicked = (tabRowId: TableRowId) => {
const index = tabRowId as number; const index = tabRowId as number;
setClickedRow(index); setClickedRow(index);
loadDocument(documentIds[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) => const loadDocument = (documentId: DocumentId) =>
@ -1102,24 +1093,29 @@ const DocumentsTabComponent: React.FunctionComponent<{
}; };
const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => { const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
if (selectedRows.size === 0) { confirmDiscardingChange(() => {
setSelectedDocumentContent(undefined); if (selectedRows.size === 0) {
setClickedRow(undefined); setSelectedDocumentContent(undefined);
} setClickedRow(undefined);
setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
}
// Find if clickedRow is in selectedRows.If not, clear clickedRow and content // Find if clickedRow is in selectedRows.If not, clear clickedRow and content
if (clickedRow !== undefined && !selectedRows.has(clickedRow)) { if (clickedRow !== undefined && !selectedRows.has(clickedRow)) {
setClickedRow(undefined); setClickedRow(undefined);
setSelectedDocumentContent(undefined); setSelectedDocumentContent(undefined);
} setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
}
// If only one selection, we consider as a click // If only one selection, we consider as a click
if (selectedRows.size === 1) { if (selectedRows.size === 1) {
const selectedRow = Array.from(selectedRows)[0]; const selectedRow = Array.from(selectedRows)[0];
onDocumentClicked(selectedRow); onDocumentClicked(selectedRow);
} setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
}
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
});
}; };
return ( return (
@ -1150,7 +1146,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>
@ -1200,14 +1196,14 @@ 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.'
}, },
css: { placeholderVisible: filterContent().length === 0 }, css: { placeholderVisible: filterContent().length === 0 },
textInput: filterContent" textInput: filterContent"
*/ */
/> />
<datalist id="filtersList" /*data-bind="foreach: lastFilterContents"*/> <datalist id="filtersList" /*data-bind="foreach: lastFilterContents"*/>
@ -1253,7 +1249,7 @@ W attr:{
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>