random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-12 19:35:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Port item editor shortcuts to improved Items tab branch (#1831)

Browse Source 
* set filter focus on Ctrl+Shift+F

* implement filter enter/esc keybinds

* remove debugging
This commit is contained in:
Ashley Stanton-Nurse 2024-05-01 23:08:53 -07:00 committed by GitHub
parent 90ade59676
commit d5f8664f3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -448,10 +448,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
}) => { }) => {
const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true); const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true);
const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false); const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false);
const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
const [appliedFilter, setAppliedFilter] = useState<string>(""); const [appliedFilter, setAppliedFilter] = useState<string>("");
const [filterContent, setFilterContent] = useState<string>(""); const [filterContent, setFilterContent] = useState<string>("");
const [documentIds, setDocumentIds] = useState<DocumentId[]>([]); const [documentIds, setDocumentIds] = useState<DocumentId[]>([]);
const [isExecuting, setIsExecuting] = useState<boolean>(false); const [isExecuting, setIsExecuting] = useState<boolean>(false);
const filterInput = useRef<HTMLInputElement>(null);
// Query // Query
const [documentsIterator, setDocumentsIterator] = useState<{ const [documentsIterator, setDocumentsIterator] = useState<{
@ -487,6 +489,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB); const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
useEffect(() => {
if (isFilterFocused) {
filterInput.current?.focus();
}
}, [isFilterFocused]);
let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC']; let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
const applyFilterButton = { const applyFilterButton = {
@ -925,6 +933,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
const onShowFilterClick = () => { const onShowFilterClick = () => {
setIsFilterCreated(true); setIsFilterCreated(true);
setIsFilterExpanded(true); setIsFilterExpanded(true);
setIsFilterFocused(true);
}; };
const queryTimeoutEnabled = useCallback( const queryTimeoutEnabled = useCallback(
@ -1119,20 +1128,17 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
}; };
const onFilterKeyDown = (model: unknown, e: KeyboardEvent): boolean => { const onFilterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.key === "Enter") { if (e.key === "Enter") {
refreshDocumentsGrid(true); refreshDocumentsGrid(true);
// Suppress the default behavior of the key // Suppress the default behavior of the key
return false; e.preventDefault();
} else if (e.key === "Escape") { } else if (e.key === "Escape") {
onHideFilterClick(); onHideFilterClick();
// Suppress the default behavior of the key // Suppress the default behavior of the key
return false; e.preventDefault();
} else {
// Allow the default behavior of the key
return true;
} }
}; };
@ -1644,7 +1650,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
// collapse filter // collapse filter
setAppliedFilter(filterContent); setAppliedFilter(filterContent);
setIsFilterExpanded(applyFilterButtonPressed); setIsFilterExpanded(!applyFilterButtonPressed);
document.getElementById("errorStatusIcon")?.focus(); document.getElementById("errorStatusIcon")?.focus();
} catch (error) { } catch (error) {
console.error(); console.error();
@ -1684,6 +1690,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
<div className="editFilterContainer"> <div className="editFilterContainer">
{!isPreferredApiMongoDB && <span className="filterspan"> SELECT * FROM c </span>} {!isPreferredApiMongoDB && <span className="filterspan"> SELECT * FROM c </span>}
<Input <Input
ref={filterInput}
type="text" type="text"
list="filtersList" list="filtersList"
className={`${filterContent.length === 0 ? "placeholderVisible" : ""}`} className={`${filterContent.length === 0 ? "placeholderVisible" : ""}`}
@ -1695,7 +1702,10 @@ const DocumentsTabComponent: React.FunctionComponent<{
: "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." : "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."
} }
value={filterContent} value={filterContent}
autoFocus={true}
onKeyDown={onFilterKeyDown}
onChange={(e) => setFilterContent(e.target.value)} onChange={(e) => setFilterContent(e.target.value)}
onBlur={() => setIsFilterFocused(false)}
/> />
<datalist id="filtersList"> <datalist id="filtersList">