save chart files

packages/web/src/appobj/SavedFileAppObject.js

@@ -56,8 +56,8 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
       ..._.omit(connection, ['displayName', '_id']),
       database,
     };
-    script.put(`const sql = await dbgateApi.loadFile('${folder}/${file}');`)
-    script.put(`await dbgateApi.executeQuery({ sql, connection: ${JSON.stringify(conn)} });`)
+    script.put(`const sql = await dbgateApi.loadFile('${folder}/${file}');`);
+    script.put(`await dbgateApi.executeQuery({ sql, connection: ${JSON.stringify(conn)} });`);
     // @ts-ignore
     script.requirePackage(extractPackageName(conn.engine));
 
@@ -117,7 +117,44 @@ export function SavedShellFileAppObject({ data, commonProps }) {
   );
 }
 
-[SavedSqlFileAppObject, SavedShellFileAppObject].forEach((fn) => {
+export function SavedChartFileAppObject({ data, commonProps }) {
+  const { file, folder } = data;
+  const setOpenedTabs = useSetOpenedTabs();
+
+  const currentDatabase = useCurrentDatabase();
+
+  const connection = _.get(currentDatabase, 'connection') || {};
+  const database = _.get(currentDatabase, 'name');
+
+  const tooltip = `${connection.displayName || connection.server}\n${database}`;
+
+  return (
+    <SavedFileAppObjectBase
+      data={data}
+      commonProps={commonProps}
+      format="json"
+      icon="img chart"
+      onLoad={(data) => {
+        openNewTab(
+          setOpenedTabs,
+          {
+            title: file,
+            icon: 'img chart',
+            tooltip,
+            props: {
+              conid: connection._id,
+              database,
+            },
+            tabComponent: 'ChartTab',
+          },
+          data
+        );
+      }}
+    />
+  );
+}
+
+[SavedSqlFileAppObject, SavedShellFileAppObject, SavedChartFileAppObject].forEach((fn) => {
   // @ts-ignore
   fn.extractKey = (data) => data.file;
 });

packages/web/src/charts/ChartToolbar.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ToolbarButton from '../widgets/ToolbarButton';
+
+export default function ChartToolbar({ save }) {
+  return (
+    <>
+      <ToolbarButton onClick={save} icon="icon save">
+        Save
+      </ToolbarButton>
+    </>
+  );
+}

packages/web/src/tabs/ChartTab.js

@@ -2,18 +2,15 @@ import React from 'react';
 import _ from 'lodash';
 import { createFreeTableModel } from 'dbgate-datalib';
 import useUndoReducer from '../utility/useUndoReducer';
-import { useSetOpenedTabs, useUpdateDatabaseForTab } from '../utility/globalState';
-import useGridConfig from '../utility/useGridConfig';
-import FreeTableGrid from '../freetable/FreeTableGrid';
-import SaveArchiveModal from '../modals/SaveArchiveModal';
+import ReactDOM from 'react-dom';
+import { useUpdateDatabaseForTab } from '../utility/globalState';
 import useModalState from '../modals/useModalState';
-import axios from '../utility/axios';
 import LoadingInfo from '../widgets/LoadingInfo';
-import { changeTab } from '../utility/common';
 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';
 
 export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database, tabid }) {
   const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
@@ -67,6 +64,10 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database
         folder="charts"
         tabid={tabid}
       />
+      {toolbarPortalRef &&
+        toolbarPortalRef.current &&
+        tabVisible &&
+        ReactDOM.createPortal(<ChartToolbar save={saveFileModalState.open} />, toolbarPortalRef.current)}
     </>
   );
 }

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, SavedShellFileAppObject } from '../appobj/SavedFileAppObject';
+import { SavedSqlFileAppObject, SavedShellFileAppObject, SavedChartFileAppObject } from '../appobj/SavedFileAppObject';
 import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
 import { useFiles } from '../utility/metadataLoaders';
 
@@ -51,18 +51,33 @@ function SavedShellFilesList() {
   );
 }
 
+function SavedChartFilesList() {
+  const files = useFiles({ folder: 'charts' });
+
+  return (
+    <>
+      <WidgetsInnerContainer>
+        <AppObjectList list={files} AppObjectComponent={SavedChartFileAppObject} />
+      </WidgetsInnerContainer>
+    </>
+  );
+}
+
 export default function FilesWidget() {
   return (
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" height="40%">
+      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" height="20%">
         <ClosedTabsList />
       </WidgetColumnBarItem>
-      <WidgetColumnBarItem title="Saved SQL files" name="sqlFiles" height="30%">
+      <WidgetColumnBarItem title="Saved SQL files" name="sqlFiles" height="20%">
         <SavedSqlFilesList />
       </WidgetColumnBarItem>
-      <WidgetColumnBarItem title="Saved shell files" name="shellFiles" height="30%">
+      <WidgetColumnBarItem title="Saved shell files" name="shellFiles" height="20%">
         <SavedShellFilesList />
       </WidgetColumnBarItem>
+      <WidgetColumnBarItem title="Saved charts" name="charts" height="20%">
+        <SavedChartFilesList />
+      </WidgetColumnBarItem>
     </WidgetColumnBar>
   );
 }