shell - save to server

packages/web/src/query/ShellToolbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function ShellToolbar({ execute, cancel, busy, edit, editAvailable }) {
+export default function ShellToolbar({ execute, cancel, busy, edit, save, editAvailable }) {
   return (
     <>
       <ToolbarButton disabled={busy} onClick={execute} icon="icon run">
@@ -13,6 +13,9 @@ export default function ShellToolbar({ execute, cancel, busy, edit, editAvailabl
       <ToolbarButton disabled={!editAvailable} onClick={edit} icon="icon show-wizard">
         Show wizard
       </ToolbarButton>
+      <ToolbarButton onClick={save} icon="icon save">
+        Save
+      </ToolbarButton>
     </>
   );
 }

packages/web/src/tabs/ShellTab.js

@@ -13,6 +13,8 @@ import RunnerOutputPane from '../query/RunnerOutputPane';
 import useShowModal from '../modals/showModal';
 import ImportExportModal from '../modals/ImportExportModal';
 import useEditorData from '../utility/useEditorData';
+import SaveTabModal from '../modals/SaveTabModal';
+import useModalState from '../modals/useModalState';
 
 const configRegex = /\s*\/\/\s*@ImportExportConfigurator\s*\n\s*\/\/\s*(\{[^\n]+\})\n/;
 const requireRegex = /\s*(\/\/\s*@require\s+[^\n]+)\n/g;
@@ -21,6 +23,7 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
   const [busy, setBusy] = React.useState(false);
   const showModal = useShowModal();
   const { editorData, setEditorData } = useEditorData({ tabid });
+  const saveFileModalState = useModalState();
 
   const setOpenedTabs = useSetOpenedTabs();
 
@@ -108,9 +111,11 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
             cancel={handleCancel}
             edit={handleEdit}
             editAvailable={configRegex.test(editorData || '')}
+            save={saveFileModalState.open}
           />,
           toolbarPortalRef.current
         )}
+      <SaveTabModal modalState={saveFileModalState} data={editorData} format="text" folder="shell" tabid={tabid} />
     </>
   );
 }

packages/web/src/widgets/FilesWidget.js

@@ -5,7 +5,7 @@ import { AppObjectList } from '../appobj/AppObjectList';
 import { useOpenedTabs } from '../utility/globalState';
 import ClosedTabAppObject from '../appobj/ClosedTabAppObject';
 import { WidgetsInnerContainer } from './WidgetStyles';
-import { SavedSqlFileAppObject } from '../appobj/SavedFileAppObject';
+import { SavedSqlFileAppObject, SavedShellFileAppObject } from '../appobj/SavedFileAppObject';
 import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
 import { useFiles } from '../utility/metadataLoaders';
 
@@ -39,15 +39,30 @@ function SavedSqlFilesList() {
   );
 }
 
+function SavedShellFilesList() {
+  const files = useFiles({ folder: 'shell' });
+
+  return (
+    <>
+      <WidgetsInnerContainer>
+        <AppObjectList list={files} AppObjectComponent={SavedShellFileAppObject} />
+      </WidgetsInnerContainer>
+    </>
+  );
+}
+
 export default function FilesWidget() {
   return (
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" height="50%">
+      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" height="40%">
         <ClosedTabsList />
       </WidgetColumnBarItem>
-      <WidgetColumnBarItem title="Saved SQL files" name="sqlFiles">
+      <WidgetColumnBarItem title="Saved SQL files" name="sqlFiles" height="30%">
         <SavedSqlFilesList />
       </WidgetColumnBarItem>
+      <WidgetColumnBarItem title="Saved shell files" name="shellFiles" height="30%">
+        <SavedShellFilesList />
+      </WidgetColumnBarItem>
     </WidgetColumnBar>
   );
 }