refactor: change Windows new tab shortcut to ctrl + q (#12772)

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -43,6 +43,7 @@ import {
   Input,
 } from 'src/common/components';
 import Icon from 'src/components/Icon';
+import { detectOS } from 'src/utils/common';
 import {
   addQueryEditor,
   CtasEnum,
@@ -278,6 +279,8 @@ class SqlEditor extends React.PureComponent {
   }
 
   getHotkeyConfig() {
+    // Get the user's OS
+    const userOS = detectOS();
     return [
       {
         name: 'runQuery1',
@@ -301,7 +304,7 @@ class SqlEditor extends React.PureComponent {
       },
       {
         name: 'newTab',
-        key: 'ctrl+t',
+        key: userOS === 'Windows' ? 'ctrl+q' : 'ctrl+t',
         descr: t('New tab'),
         func: () => {
           this.props.addQueryEditor({

superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx

@@ -29,6 +29,7 @@ import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
 import { areArraysShallowEqual } from 'src/reduxUtils';
 import { Tooltip } from 'src/common/components/Tooltip';
+import { detectOS } from 'src/utils/common';
 import * as Actions from '../actions/sqlLab';
 import SqlEditor from './SqlEditor';
 import TabStatusIcon from './TabStatusIcon';
@@ -69,6 +70,9 @@ const TabTitle = styled.span`
   text-transform: none;
 `;
 
+// Get the user's OS
+const userOS = detectOS();
+
 class TabbedSqlEditors extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -411,7 +415,15 @@ class TabbedSqlEditors extends React.PureComponent {
         hideAdd={this.props.offline}
         onEdit={this.handleEdit}
         addIcon={
-          <Tooltip id="add-tab" placement="bottom" title="New tab (Ctrl + t)">
+          <Tooltip
+            id="add-tab"
+            placement="bottom"
+            title={
+              userOS === 'Windows'
+                ? t('New tab (Ctrl + q)')
+                : t('New tab (Ctrl + t)')
+            }
+          >
             <i data-test="add-tab-icon" className="fa fa-plus-circle" />
           </Tooltip>
         }

superset-frontend/src/utils/common.js

@@ -137,3 +137,17 @@ export function applyFormattingToTabularData(data) {
 }
 
 export const noOp = () => undefined;
+
+// Detects the user's OS through the browser
+export const detectOS = () => {
+  const { appVersion } = navigator;
+
+  // Leveraging this condition because of stackOverflow
+  // https://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript
+  if (appVersion.includes('Win')) return 'Windows';
+  if (appVersion.includes('Mac')) return 'MacOS';
+  if (appVersion.includes('X11')) return 'UNIX';
+  if (appVersion.includes('Linux')) return 'Linux';
+
+  return 'Unknown OS';
+};