add to favorites basic functionality

packages/web/src/widgets/FavoritesWidget.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { AppObjectList } from '../appobj/AppObjectList';
+import { useOpenedTabs } from '../utility/globalState';
+import ClosedTabAppObject from '../appobj/ClosedTabAppObject';
+import { WidgetsInnerContainer } from './WidgetStyles';
+import { FavoriteFileAppObject } from '../appobj/SavedFileAppObject';
+import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
+import { useFavorites, useFiles } from '../utility/metadataLoaders';
+import useHasPermission from '../utility/useHasPermission';
+
+function ClosedTabsList() {
+  const tabs = useOpenedTabs();
+
+  return (
+    <>
+      <WidgetsInnerContainer>
+        <AppObjectList
+          list={_.sortBy(
+            tabs.filter((x) => x.closedTime),
+            (x) => -x.closedTime
+          )}
+          AppObjectComponent={ClosedTabAppObject}
+        />
+      </WidgetsInnerContainer>
+    </>
+  );
+}
+
+function FavoritesList() {
+  const favorites = useFavorites();
+
+  return (
+    <>
+      <WidgetsInnerContainer>
+        <AppObjectList list={favorites} AppObjectComponent={FavoriteFileAppObject} />
+      </WidgetsInnerContainer>
+    </>
+  );
+}
+
+export default function FavoritesWidget() {
+  const hasPermission = useHasPermission();
+  return (
+    <WidgetColumnBar>
+      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" height="20%">
+        <ClosedTabsList />
+      </WidgetColumnBarItem>
+      {hasPermission('files/favorites/read') && (
+        <WidgetColumnBarItem title="Favorites" name="favorites" height="15%">
+          <FavoritesList />
+        </WidgetColumnBarItem>
+      )}
+    </WidgetColumnBar>
+  );
+}

packages/web/src/widgets/FilesWidget.js

@@ -15,23 +15,6 @@ import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
 import { useFiles } from '../utility/metadataLoaders';
 import useHasPermission from '../utility/useHasPermission';
 
-function ClosedTabsList() {
-  const tabs = useOpenedTabs();
-
-  return (
-    <>
-      <WidgetsInnerContainer>
-        <AppObjectList
-          list={_.sortBy(
-            tabs.filter((x) => x.closedTime),
-            (x) => -x.closedTime
-          )}
-          AppObjectComponent={ClosedTabAppObject}
-        />
-      </WidgetsInnerContainer>
-    </>
-  );
-}
 
 function SavedSqlFilesList() {
   const files = useFiles({ folder: 'sql' });
@@ -85,9 +68,6 @@ export default function FilesWidget() {
   const hasPermission = useHasPermission();
   return (
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" height="20%">
-        <ClosedTabsList />
-      </WidgetColumnBarItem>
       {hasPermission('files/sql/read') && (
         <WidgetColumnBarItem title="Saved SQL files" name="sqlFiles" height="15%">
           <SavedSqlFilesList />

packages/web/src/widgets/Toolbar.js

@@ -14,6 +14,9 @@ import { getDefaultFileFormat } from '../utility/fileformats';
 import getElectron from '../utility/getElectron';
 import AboutModal from '../modals/AboutModal';
 import useOpenNewTab from '../utility/useOpenNewTab';
+import axios from '../utility/axios';
+import tabs from '../tabs';
+import uuidv1 from 'uuid/v1';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -36,6 +39,8 @@ export default function ToolBar({ toolbarPortalRef }) {
   const electron = getElectron();
   const markdownManifest = useMarkdownManifest();
 
+  const currentTab = openedTabs.find((x) => x.selected);
+
   React.useEffect(() => {
     window['dbgate_createNewConnection'] = modalState.open;
     window['dbgate_newQuery'] = newQuery;
@@ -76,6 +81,31 @@ export default function ToolBar({ toolbarPortalRef }) {
     });
   };
 
+  const addToFavorite = () => {
+    const tabdata = {};
+
+    const re = new RegExp(`tabdata_(.*)_${currentTab.tabid}`);
+    for (const key in localStorage) {
+      const match = key.match(re);
+      if (!match) continue;
+      if (match[1] == 'editor') continue;
+      tabdata[match[1]] = JSON.parse(localStorage.getItem(key));
+    }
+
+    axios.post('files/save', {
+      folder: 'favorites',
+      file: uuidv1(),
+      format: 'json',
+      data: {
+        title: currentTab.title,
+        icon: currentTab.icon,
+        props: currentTab.props,
+        tabComponent: currentTab.tabComponent,
+        tabdata,
+      },
+    });
+  };
+
   function openTabFromButton(page) {
     if (
       openedTabs.find(
@@ -134,6 +164,14 @@ export default function ToolBar({ toolbarPortalRef }) {
       <ToolbarButton onClick={showImport} icon="icon import">
         Import data
       </ToolbarButton>
+      {!!currentTab &&
+        tabs[currentTab.tabComponent] &&
+        tabs[currentTab.tabComponent].allowAddToFavorites &&
+        tabs[currentTab.tabComponent].allowAddToFavorites(currentTab.props) && (
+          <ToolbarButton onClick={addToFavorite} icon="icon favorite">
+            Add to favorites
+          </ToolbarButton>
+        )}
       <ToolbarButton onClick={switchTheme} icon="icon theme">
         {currentTheme == 'dark' ? 'Light mode' : 'Dark mode'}
       </ToolbarButton>

packages/web/src/widgets/WidgetContainer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useCurrentWidget } from '../utility/globalState';
 import ArchiveWidget from './ArchiveWidget';
 import DatabaseWidget from './DatabaseWidget';
+import FavoritesWidget from './FavoritesWidget';
 import FilesWidget from './FilesWidget';
 import PluginsWidget from './PluginsWidget';
 
@@ -11,5 +12,6 @@ export default function WidgetContainer() {
   if (currentWidget === 'file') return <FilesWidget />;
   if (currentWidget === 'archive') return <ArchiveWidget />;
   if (currentWidget === 'plugins') return <PluginsWidget />;
+  if (currentWidget === 'favorites') return <FavoritesWidget />;
   return null;
 }

packages/web/src/widgets/WidgetIconPanel.js

@@ -56,6 +56,11 @@ export default function WidgetIconPanel() {
       name: 'plugins',
       title: 'Extensions & Plugins',
     },
+    {
+      icon: 'icon favorite',
+      name: 'favorites',
+      title: 'Favorites',
+    },
     // {
     //   icon: 'fa-cog',
     //   name: 'settings',