improved save file experience

2026-04-23 19:36:02 +00:00 · 2021-01-30 18:23:05 +01:00
parent 059eabf2fa
commit 255c3e5ef4
15 changed files with 182 additions and 132 deletions
--- a/packages/web/src/tabs/ChartTab.js
+++ b/packages/web/src/tabs/ChartTab.js
@@ -4,17 +4,16 @@ import { createFreeTableModel } from 'dbgate-datalib';
 import useUndoReducer from '../utility/useUndoReducer';
 import ReactDOM from 'react-dom';
 import { useUpdateDatabaseForTab } from '../utility/globalState';
-import useModalState from '../modals/useModalState';
 import LoadingInfo from '../widgets/LoadingInfo';
 import ErrorInfo from '../widgets/ErrorInfo';
 import useEditorData from '../utility/useEditorData';
 import SaveTabModal from '../modals/SaveTabModal';
 import ChartEditor from '../charts/ChartEditor';
 import ChartToolbar from '../charts/ChartToolbar';
+import ToolbarPortal from '../utility/ToolbarPortal';

 export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database, tabid }) {
  const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
-  const saveFileModalState = useModalState();
  const { initialData, setEditorData, errorMessage, isLoading } = useEditorData({
    tabid,
  });
@@ -57,21 +56,17 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database
        database={database}
      />
      <SaveTabModal
-        modalState={saveFileModalState}
        tabVisible={tabVisible}
+        toolbarPortalRef={toolbarPortalRef}
        data={modelState.value}
        format="json"
        folder="charts"
        tabid={tabid}
-        fileExtension='chart'
+        fileExtension="chart"
      />
-      {toolbarPortalRef &&
-        toolbarPortalRef.current &&
-        tabVisible &&
-        ReactDOM.createPortal(
-          <ChartToolbar save={saveFileModalState.open} modelState={modelState} dispatchModel={dispatchModel} />,
-          toolbarPortalRef.current
-        )}
+      <ToolbarPortal toolbarPortalRef={toolbarPortalRef} tabVisible={tabVisible}>
+        <ChartToolbar modelState={modelState} dispatchModel={dispatchModel} />
+      </ToolbarPortal>
    </>
  );
 }
--- a/packages/web/src/tabs/MarkdownEditorTab.js
+++ b/packages/web/src/tabs/MarkdownEditorTab.js
@@ -11,10 +11,10 @@ import LoadingInfo from '../widgets/LoadingInfo';
 import { useOpenedTabs, useSetOpenedTabs } from '../utility/globalState';
 import useOpenNewTab from '../utility/useOpenNewTab';
 import { setSelectedTabFunc } from '../utility/common';
+import ToolbarPortal from '../utility/ToolbarPortal';

 export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef, ...other }) {
  const { editorData, setEditorData, isLoading, saveToStorage } = useEditorData({ tabid });
-  const saveFileModalState = useModalState();
  const openedTabs = useOpenedTabs();
  const setOpenedTabs = useSetOpenedTabs();
  const openNewTab = useOpenNewTab();
@@ -61,21 +61,17 @@ export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef,
        onKeyDown={handleKeyDown}
        mode="markdown"
      />
-      {toolbarPortalRef &&
-        toolbarPortalRef.current &&
-        tabVisible &&
-        ReactDOM.createPortal(
-          <MarkdownToolbar save={saveFileModalState.open} showPreview={showPreview} />,
-          toolbarPortalRef.current
-        )}
+      <ToolbarPortal toolbarPortalRef={toolbarPortalRef} tabVisible={tabVisible}>
+        <MarkdownToolbar showPreview={showPreview} />
+      </ToolbarPortal>
      <SaveTabModal
-        modalState={saveFileModalState}
        tabVisible={tabVisible}
+        toolbarPortalRef={toolbarPortalRef}
        data={editorData}
        format="text"
        folder="markdown"
        tabid={tabid}
-        fileExtension='md'
+        fileExtension="md"
      />
    </>
  );
--- a/packages/web/src/tabs/QueryDesignTab.js
+++ b/packages/web/src/tabs/QueryDesignTab.js
@@ -15,7 +15,6 @@ import keycodes from '../utility/keycodes';
 import { changeTab } from '../utility/common';
 import useSocket from '../utility/SocketProvider';
 import SaveTabModal from '../modals/SaveTabModal';
-import useModalState from '../modals/useModalState';
 import sqlFormatter from 'sql-formatter';
 import useEditorData from '../utility/useEditorData';
 import LoadingInfo from '../widgets/LoadingInfo';
@@ -27,6 +26,7 @@ import { generateDesignedQuery } from '../designer/designerTools';
 import useUndoReducer from '../utility/useUndoReducer';
 import { StatusBarItem } from '../widgets/StatusBar';
 import useTimerLabel from '../utility/useTimerLabel';
+import ToolbarPortal from '../utility/ToolbarPortal';

 export default function QueryDesignTab({
  tabid,
@@ -43,7 +43,6 @@ export default function QueryDesignTab({
  const setOpenedTabs = useSetOpenedTabs();
  const socket = useSocket();
  const [busy, setBusy] = React.useState(false);
-  const saveFileModalState = useModalState();
  const extensions = useExtensions();
  const connection = useConnectionInfo({ conid });
  const engine = findEngineDriver(connection, extensions);
@@ -196,36 +195,32 @@ export default function QueryDesignTab({
          )}
        </ResultTabs>
      </VerticalSplitter>
-      {toolbarPortalRef &&
-        toolbarPortalRef.current &&
-        tabVisible &&
-        ReactDOM.createPortal(
-          <QueryDesignToolbar
-            modelState={modelState}
-            dispatchModel={dispatchModel}
-            isDatabaseDefined={conid && database}
-            execute={handleExecute}
-            busy={busy}
-            // cancel={handleCancel}
-            // format={handleFormatCode}
-            save={saveFileModalState.open}
-            isConnected={!!sessionId}
-            kill={handleKill}
-          />,
-          toolbarPortalRef.current
-        )}
+      <ToolbarPortal toolbarPortalRef={toolbarPortalRef} tabVisible={tabVisible}>
+        <QueryDesignToolbar
+          modelState={modelState}
+          dispatchModel={dispatchModel}
+          isDatabaseDefined={conid && database}
+          execute={handleExecute}
+          busy={busy}
+          // cancel={handleCancel}
+          // format={handleFormatCode}
+          isConnected={!!sessionId}
+          kill={handleKill}
+        />
+      </ToolbarPortal>
      {statusbarPortalRef &&
        statusbarPortalRef.current &&
        tabVisible &&
        ReactDOM.createPortal(<StatusBarItem>{timerLabel.text}</StatusBarItem>, statusbarPortalRef.current)}
      <SaveTabModal
-        modalState={saveFileModalState}
+        // modalState={saveFileModalState}
        tabVisible={tabVisible}
+        toolbarPortalRef={toolbarPortalRef}
        data={modelState.value}
        format="json"
        folder="query"
        tabid={tabid}
-        fileExtension='qdesign'
+        fileExtension="qdesign"
      />
    </>
  );
--- a/packages/web/src/tabs/QueryTab.js
+++ b/packages/web/src/tabs/QueryTab.js
@@ -23,6 +23,7 @@ import LoadingInfo from '../widgets/LoadingInfo';
 import useExtensions from '../utility/useExtensions';
 import useTimerLabel from '../utility/useTimerLabel';
 import { StatusBarItem } from '../widgets/StatusBar';
+import ToolbarPortal from '../utility/ToolbarPortal';

 function createSqlPreview(sql) {
  if (!sql) return undefined;
@@ -58,7 +59,6 @@ export default function QueryTab({
  const setOpenedTabs = useSetOpenedTabs();
  const socket = useSocket();
  const [busy, setBusy] = React.useState(false);
-  const saveFileModalState = useModalState();
  const extensions = useExtensions();
  const timerLabel = useTimerLabel();
  const { editorData, setEditorData, isLoading } = useEditorData({
@@ -201,7 +201,7 @@ export default function QueryTab({
          </ResultTabs>
        )}
      </VerticalSplitter>
-      {toolbarPortalRef &&
+      {/* {toolbarPortalRef &&
        toolbarPortalRef.current &&
        tabVisible &&
        ReactDOM.createPortal(
@@ -216,19 +216,31 @@ export default function QueryTab({
            kill={handleKill}
          />,
          toolbarPortalRef.current
-        )}
+        )} */}
      {statusbarPortalRef &&
        statusbarPortalRef.current &&
        tabVisible &&
        ReactDOM.createPortal(<StatusBarItem>{timerLabel.text}</StatusBarItem>, statusbarPortalRef.current)}
+      <ToolbarPortal toolbarPortalRef={toolbarPortalRef} tabVisible={tabVisible}>
+        <QueryToolbar
+          isDatabaseDefined={conid && database}
+          execute={handleExecute}
+          busy={busy}
+          // cancel={handleCancel}
+          format={handleFormatCode}
+          // save={saveFileModalState.open}
+          isConnected={!!sessionId}
+          kill={handleKill}
+        />
+      </ToolbarPortal>
      <SaveTabModal
-        modalState={saveFileModalState}
+        toolbarPortalRef={toolbarPortalRef}
        tabVisible={tabVisible}
        data={editorData}
        format="text"
        folder="sql"
        tabid={tabid}
-        fileExtension='sql'
+        fileExtension="sql"
      />
    </>
  );
--- a/packages/web/src/tabs/ShellTab.js
+++ b/packages/web/src/tabs/ShellTab.js
@@ -14,10 +14,10 @@ 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';
 import LoadingInfo from '../widgets/LoadingInfo';
 import useTimerLabel from '../utility/useTimerLabel';
 import { StatusBarItem } from '../widgets/StatusBar';
+import ToolbarPortal from '../utility/ToolbarPortal';

 const configRegex = /\s*\/\/\s*@ImportExportConfigurator\s*\n\s*\/\/\s*(\{[^\n]+\})\n/;
 const requireRegex = /\s*(\/\/\s*@require\s+[^\n]+)\n/g;
@@ -27,7 +27,6 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, statusba
  const [busy, setBusy] = React.useState(false);
  const showModal = useShowModal();
  const { editorData, setEditorData, isLoading } = useEditorData({ tabid });
-  const saveFileModalState = useModalState();
  const timerLabel = useTimerLabel();

  const setOpenedTabs = useSetOpenedTabs();
@@ -120,32 +119,27 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, statusba
        />
        <RunnerOutputPane runnerId={runnerId} executeNumber={executeNumber} />
      </VerticalSplitter>
-      {toolbarPortalRef &&
-        toolbarPortalRef.current &&
-        tabVisible &&
-        ReactDOM.createPortal(
-          <ShellToolbar
-            execute={handleExecute}
-            busy={busy}
-            cancel={handleCancel}
-            edit={handleEdit}
-            editAvailable={configRegex.test(editorData || '')}
-            save={saveFileModalState.open}
-          />,
-          toolbarPortalRef.current
-        )}
+      <ToolbarPortal toolbarPortalRef={toolbarPortalRef} tabVisible={tabVisible}>
+        <ShellToolbar
+          execute={handleExecute}
+          busy={busy}
+          cancel={handleCancel}
+          edit={handleEdit}
+          editAvailable={configRegex.test(editorData || '')}
+        />
+      </ToolbarPortal>
      {statusbarPortalRef &&
        statusbarPortalRef.current &&
        tabVisible &&
        ReactDOM.createPortal(<StatusBarItem>{timerLabel.text}</StatusBarItem>, statusbarPortalRef.current)}
      <SaveTabModal
-        modalState={saveFileModalState}
+        toolbarPortalRef={toolbarPortalRef}
        tabVisible={tabVisible}
        data={editorData}
        format="text"
        folder="shell"
        tabid={tabid}
-        fileExtension='js'
+        fileExtension="js"
      />
    </>
  );