save using ctrl+s

packages/web/src/charts/ChartEditor.js

@@ -89,13 +89,7 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
                   {/* <option value="bubble">Bubble</option>
                 <option value="scatter">Scatter</option> */}
                 </FormSelectField>
-                <FormSelectField label="Color set" name="colorSeed">
-                  <option value="a">1</option>
-                  <option value="2">2</option>
-                  <option value="3">3</option>
-                  <option value="4">4</option>
-                  <option value="5">5</option>
-                </FormSelectField>
+                <FormTextField label="Color set" name="colorSeed" />
                 <FormSelectField label="Truncate from" name="truncateFrom">
                   <option value="begin">Begin</option>
                   <option value="end">End (most recent data for datetime)</option>

packages/web/src/charts/DataChart.js

@@ -66,7 +66,7 @@ export default function DataChart({ data }) {
         key={`${values.chartType}|${containerWidth}|${containerHeight}`}
         width={containerWidth}
         height={containerHeight}
-        data={createChartData(data, labelColumn, dataColumns, values.colorSeed || 1, values.chartType)}
+        data={createChartData(data, labelColumn, dataColumns, values.colorSeed || '5', values.chartType)}
         type={values.chartType}
       />
     </ChartWrapper>

packages/web/src/modals/SaveFileModal.js

@@ -19,7 +19,7 @@ export default function SaveFileModal({ data, folder, format, modalState, name,
       <ModalHeader modalState={modalState}>Save file</ModalHeader>
       <FormProvider initialValues={{ name }}>
         <ModalContent>
-          <FormTextField label="File name" name="name" />
+          <FormTextField label="File name" name="name" focused/>
         </ModalContent>
         <ModalFooter>
           <FormSubmit value="Save" onClick={handleSubmit} />

packages/web/src/modals/SaveTabModal.js

@@ -1,15 +1,35 @@
 import React from 'react';
 import { changeTab } from '../utility/common';
 import { useOpenedTabs, useSetOpenedTabs } from '../utility/globalState';
+import keycodes from '../utility/keycodes';
 import SaveFileModal from './SaveFileModal';
 
-export default function SaveTabModal({ data, folder, format, modalState, tabid }) {
+export default function SaveTabModal({ data, folder, format, modalState, tabid, tabVisible }) {
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
 
   const name = openedTabs.find((x) => x.tabid == tabid).title;
   const onSave = (name) => changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, title: name }));
 
+  const handleKeyboard = React.useCallback(
+    (e) => {
+      if (e.keyCode == keycodes.s && e.ctrlKey) {
+        e.preventDefault();
+        modalState.open();
+      }
+    },
+    [modalState]
+  );
+
+  React.useEffect(() => {
+    if (tabVisible) {
+      document.addEventListener('keydown', handleKeyboard);
+      return () => {
+        document.removeEventListener('keydown', handleKeyboard);
+      };
+    }
+  }, [tabVisible, handleKeyboard]);
+
   return (
     <SaveFileModal data={data} folder={folder} format={format} modalState={modalState} name={name} onSave={onSave} />
   );

packages/web/src/tabs/ChartTab.js

@@ -61,6 +61,7 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database
       />
       <SaveTabModal
         modalState={saveFileModalState}
+        tabVisible={tabVisible}
         data={modelState.value}
         format="json"
         folder="charts"

packages/web/src/tabs/QueryTab.js

@@ -165,7 +165,14 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
           />,
           toolbarPortalRef.current
         )}
-      <SaveTabModal modalState={saveFileModalState} data={editorData} format="text" folder="sql" tabid={tabid} />
+      <SaveTabModal
+        modalState={saveFileModalState}
+        tabVisible={tabVisible}
+        data={editorData}
+        format="text"
+        folder="sql"
+        tabid={tabid}
+      />
     </>
   );
 }

packages/web/src/tabs/ShellTab.js

@@ -124,7 +124,14 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
           />,
           toolbarPortalRef.current
         )}
-      <SaveTabModal modalState={saveFileModalState} data={editorData} format="text" folder="shell" tabid={tabid} />
+      <SaveTabModal
+        modalState={saveFileModalState}
+        tabVisible={tabVisible}
+        data={editorData}
+        format="text"
+        folder="shell"
+        tabid={tabid}
+      />
     </>
   );
 }