Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(sqllab): Add shortcuts for switching tabs #30173

Merged
merged 1 commit into from
Sep 16, 2024
Merged

chore(sqllab): Add shortcuts for switching tabs #30173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions superset-frontend/src/SqlLab/actions/sqlLab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,21 @@ export function setActiveQueryEditor(queryEditor) {
};
}

export function switchQueryEditor(goBackward = false) {
return function (dispatch, getState) {
const { sqlLab } = getState();
const { queryEditors, tabHistory } = sqlLab;
const qeid = tabHistory[tabHistory.length - 1];
const currentIndex = queryEditors.findIndex(qe => qe.id === qeid);
const nextIndex = goBackward
? currentIndex - 1 + queryEditors.length
: currentIndex + 1;
const newQueryEditor = queryEditors[nextIndex % queryEditors.length];

dispatch(setActiveQueryEditor(newQueryEditor));
};
}

export function loadQueryEditor(queryEditor) {
return { type: LOAD_QUERY_EDITOR, queryEditor };
}
Expand Down
79 changes: 79 additions & 0 deletions superset-frontend/src/SqlLab/actions/sqlLab.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,6 +525,85 @@ describe('async actions', () => {
expect(store.getActions()).toEqual(expectedActions);
});

describe('swithQueryEditor', () => {
it('switch to the next tab editor', () => {
const store = mockStore(initialState);
const expectedActions = [
{
type: actions.SET_ACTIVE_QUERY_EDITOR,
queryEditor: initialState.sqlLab.queryEditors[1],
},
];
store.dispatch(actions.switchQueryEditor());

expect(store.getActions()).toEqual(expectedActions);
});

it('switch to the first tab editor once it reaches the rightmost tab', () => {
const store = mockStore({
...initialState,
sqlLab: {
...initialState.sqlLab,
tabHistory: [
initialState.sqlLab.queryEditors[
initialState.sqlLab.queryEditors.length - 1
].id,
],
},
});
const expectedActions = [
{
type: actions.SET_ACTIVE_QUERY_EDITOR,
queryEditor: initialState.sqlLab.queryEditors[0],
},
];
store.dispatch(actions.switchQueryEditor());

expect(store.getActions()).toEqual(expectedActions);
});

it('switch to the previous tab editor', () => {
const store = mockStore({
...initialState,
sqlLab: {
...initialState.sqlLab,
tabHistory: [initialState.sqlLab.queryEditors[1].id],
},
});
const expectedActions = [
{
type: actions.SET_ACTIVE_QUERY_EDITOR,
queryEditor: initialState.sqlLab.queryEditors[0],
},
];
store.dispatch(actions.switchQueryEditor(true));

expect(store.getActions()).toEqual(expectedActions);
});

it('switch to the last tab editor once it reaches the leftmost tab', () => {
const store = mockStore({
...initialState,
sqlLab: {
...initialState.sqlLab,
tabHistory: [initialState.sqlLab.queryEditors[0].id],
},
});
const expectedActions = [
{
type: actions.SET_ACTIVE_QUERY_EDITOR,
queryEditor:
initialState.sqlLab.queryEditors[
initialState.sqlLab.queryEditors.length - 1
],
},
];
store.dispatch(actions.switchQueryEditor(true));

expect(store.getActions()).toEqual(expectedActions);
});
});

describe('backend sync', () => {
const updateTabStateEndpoint = 'glob:*/tabstateview/*';
fetchMock.put(updateTabStateEndpoint, {});
Expand Down
4 changes: 4 additions & 0 deletions superset-frontend/src/SqlLab/components/KeyboardShortcutButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export enum KeyboardShortcut {
CtrlF = 'ctrl+f',
CtrlH = 'ctrl+h',
CtrlShiftF = 'ctrl+shift+f',
CtrlLeft = 'ctrl+[',
CtrlRight = 'ctrl+]',
}

export const KEY_MAP = {
Expand All @@ -51,6 +53,8 @@ export const KEY_MAP = {
[KeyboardShortcut.CtrlT]: userOS !== 'Windows' ? t('New tab') : undefined,
[KeyboardShortcut.CtrlP]: t('Previous Line'),
[KeyboardShortcut.CtrlShiftF]: t('Format SQL'),
[KeyboardShortcut.CtrlLeft]: t('Switch to the previous tab'),
[KeyboardShortcut.CtrlRight]: t('Switch to the next tab'),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed for this PR, but do you think it's worth adding a section somewhere on the docs site about keyboard shortcuts?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: The key mapping on this section has been implemented to be automatically added to the Keyboard Shortcut menu.
Screenshot 2024-09-06 at 10 24 31 AM

// default ace editor shortcuts
[KeyboardShortcut.CmdF]: userOS === 'MacOS' ? t('Find') : undefined,
[KeyboardShortcut.CtrlF]: userOS !== 'MacOS' ? t('Find') : undefined,
Expand Down
17 changes: 17 additions & 0 deletions superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ import {
updateSavedQuery,
formatQuery,
fetchQueryEditor,
switchQueryEditor,
} from 'src/SqlLab/actions/sqlLab';
import {
STATE_TYPE_MAP,
Expand Down Expand Up @@ -445,6 +446,22 @@ const SqlEditor: FC<Props> = ({
formatCurrentQuery(true);
},
},
{
name: 'switchTabToLeft',
key: KeyboardShortcut.CtrlLeft,
descr: KEY_MAP[KeyboardShortcut.CtrlLeft],
func: () => {
dispatch(switchQueryEditor(true));
},
},
{
name: 'switchTabToRight',
key: KeyboardShortcut.CtrlRight,
descr: KEY_MAP[KeyboardShortcut.CtrlRight],
func: () => {
dispatch(switchQueryEditor(false));
},
},
];
}, [dispatch, queryEditor.sql, startQuery, stopQuery, formatCurrentQuery]);

Expand Down
Loading