Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: smarter connection typeahead arrows (#1431)

Browse Source 
This changes the order of typeahead options to be more user friendly.
Additionally, it moves the selected element to the top after a non-arrow
keypress.
This commit is contained in:
Sylvie Crowe 2024-12-06 21:32:50 -08:00 committed by GitHub
parent 4d3105e9b0
commit f78067b62d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/app/block/blockframe.tsx
View File

@ -740,7 +740,7 @@ const ChangeConnectionBlockModal = React.memo(
const newConnectionSuggestion: SuggestionConnectionItem = { const newConnectionSuggestion: SuggestionConnectionItem = {
status: "connected", status: "connected",
icon: "plus", icon: "plus",
iconColor: "var(--conn-icon-color)", iconColor: "var(--grey-text-color)",
label: `${connSelected} (New Connection)`, label: `${connSelected} (New Connection)`,
value: "", value: "",
onSelect: (_: string) => { onSelect: (_: string) => {
@ -763,30 +763,24 @@ const ChangeConnectionBlockModal = React.memo(
prtn.catch((e) => console.log("error reconnecting", connStatus.connection, e)); prtn.catch((e) => console.log("error reconnecting", connStatus.connection, e));
}, },
}; };
const priorityItems: Array<SuggestionConnectionItem> = [];
if (createNew) {
priorityItems.push(newConnectionSuggestion);
}
if (showReconnect && (connStatus.status == "disconnected" || connStatus.status == "error")) {
priorityItems.push(reconnectSuggestion);
}
const prioritySuggestions: SuggestionConnectionScope = {
headerText: "",
items: priorityItems,
};
const localName = getUserName() + "@" + getHostName(); const localName = getUserName() + "@" + getHostName();
const localSuggestion: SuggestionConnectionScope = { const localSuggestion: SuggestionConnectionScope = {
headerText: "Local", headerText: "Local",
items: [], items: [],
}; };
localSuggestion.items.push({ if (localName.includes(connSelected)) {
status: "connected", localSuggestion.items.push({
icon: "laptop", status: "connected",
iconColor: "var(--grey-text-color)", icon: "laptop",
value: "", iconColor: "var(--grey-text-color)",
label: localName, value: "",
current: connection == null, label: localName,
}); current: connection == null,
});
}
if (localName == connSelected) {
createNew = false;
}
for (const wslConn of filteredWslList) { for (const wslConn of filteredWslList) {
const connStatus = connStatusMap.get(wslConn); const connStatus = connStatusMap.get(wslConn);
const connColorNum = computeConnColorNum(connStatus); const connColorNum = computeConnColorNum(connStatus);
@ -849,26 +843,26 @@ const ChangeConnectionBlockModal = React.memo(
); );
const remoteSuggestions: SuggestionConnectionScope = { const remoteSuggestions: SuggestionConnectionScope = {
headerText: "Remote", headerText: "Remote",
items: [...sortedRemoteItems, connectionsEditItem], items: [...sortedRemoteItems],
}; };
let suggestions: Array<SuggestionsType> = []; const suggestions: Array<SuggestionsType> = [
if (prioritySuggestions.items.length > 0) { ...(showReconnect && (connStatus.status == "disconnected" || connStatus.status == "error")
suggestions.push(prioritySuggestions); ? [reconnectSuggestion]
} : []),
if (localSuggestion.items.length > 0) { ...(localSuggestion.items.length > 0 ? [localSuggestion] : []),
suggestions.push(localSuggestion); ...(remoteSuggestions.items.length > 0 ? [remoteSuggestions] : []),
} ...(connSelected == "" ? [connectionsEditItem] : []),
if (remoteSuggestions.items.length > 0) { ...(createNew ? [newConnectionSuggestion] : []),
suggestions.push(remoteSuggestions);
}
let selectionList: Array<SuggestionConnectionItem> = [
...prioritySuggestions.items,
...localSuggestion.items,
...remoteSuggestions.items,
]; ];
let selectionList: Array<SuggestionConnectionItem> = suggestions.flatMap((item) => {
if ("items" in item) {
return item.items;
}
return item;
});
// quick way to change icon color when highlighted // quick way to change icon color when highlighted
selectionList = selectionList.map((item, index) => { selectionList = selectionList.map((item, index) => {
if (index == rowIndex && item.iconColor == "var(--grey-text-color)") { if (index == rowIndex && item.iconColor == "var(--grey-text-color)") {
@ -899,9 +893,10 @@ const ChangeConnectionBlockModal = React.memo(
return true; return true;
} }
if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) { if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) {
setRowIndex((idx) => Math.min(idx + 1, selectionList.flat().length - 1)); setRowIndex((idx) => Math.min(idx + 1, selectionList.length - 1));
return true; return true;
} }
setRowIndex(0);
}, },
[changeConnModalAtom, viewModel, blockId, connSelected, selectionList] [changeConnModalAtom, viewModel, blockId, connSelected, selectionList]
); );

3
frontend/app/modals/typeaheadmodal.tsx
View File

@ -63,7 +63,8 @@ const Suggestions = forwardRef<HTMLDivElement, SuggestionsProps>(
</div> </div>
); );
} }
return renderItem(item as SuggestionBaseItem, index); fullIndex += 1;
return renderItem(item as SuggestionBaseItem, fullIndex);
})} })}
</div> </div>
); );