Skip to content

Commit

Permalink
chore(sqllab): Add shortcuts for switching tabs (apache#30173)
Browse files Browse the repository at this point in the history
  • Loading branch information
justinpark authored Sep 16, 2024
1 parent 0679454 commit f553344
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 0 deletions.
15 changes: 15 additions & 0 deletions superset-frontend/src/SqlLab/actions/sqlLab.js
Original file line number Diff line number Diff line change
Expand Up @@ -631,6 +631,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
Original file line number Diff line number Diff line change
Expand Up @@ -526,6 +526,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
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'),
// 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
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

0 comments on commit f553344

Please sign in to comment.