share tab content

packages/web/src/icons.js

@@ -10,6 +10,7 @@ const iconNames = {
   'icon new-connection': 'mdi mdi-database-plus',
   'icon tables': 'mdi mdi-table-multiple',
   'icon favorite': 'mdi mdi-star',
+  'icon share': 'mdi mdi-share-variant',
 
   'icon database': 'mdi mdi-database',
   'icon server': 'mdi mdi-server',

packages/web/src/modals/FavoriteModal.js

@@ -1,6 +1,14 @@
 import React from 'react';
 import ModalBase from './ModalBase';
-import { FormTextField, FormSubmit, FormButton, FormCheckboxField, FormFieldTemplate } from '../utility/forms';
+import {
+  FormTextField,
+  FormSubmit,
+  FormButton,
+  FormCheckboxField,
+  FormFieldTemplate,
+  FormCondition,
+  FormSelectField,
+} from '../utility/forms';
 import ModalHeader from './ModalHeader';
 import ModalContent from './ModalContent';
 import ModalFooter from './ModalFooter';
@@ -10,6 +18,8 @@ import uuidv1 from 'uuid/v1';
 import { FontIcon } from '../icons';
 import useHasPermission from '../utility/useHasPermission';
 import _ from 'lodash';
+import getElectron from '../utility/getElectron';
+import { copyTextToClipboard } from '../utility/clipboard';
 
 function FontIconPreview() {
   const { values } = useForm();
@@ -18,6 +28,8 @@ function FontIconPreview() {
 
 export default function FavoriteModal({ modalState, editingData = undefined, savingTab = undefined }) {
   const hasPermission = useHasPermission();
+  const electron = getElectron();
+  const savedProperties = ['title', 'icon', 'showInToolbar', 'openOnStartup', 'urlPath'];
   const initialValues = React.useMemo(() => {
     if (savingTab) {
       return {
@@ -27,17 +39,13 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
       };
     }
     if (editingData) {
-      return {
+      return _.pick(editingData, savedProperties);
-        title: editingData.title,
-        icon: editingData.icon,
-        showInToolbar: editingData.showInToolbar,
-        openOnStartup: editingData.openOnStartup,
-        urlPath: editingData.urlPath,
-      };
     }
   }, []);
 
-  const saveTab = async (values) => {
+  // const savedFile = savingTab && savingTab.props && savingTab.props.savedFile;
+
+  const getTabSaveData = async (values) => {
     const tabdata = {};
 
     const re = new RegExp(`tabdata_(.*)_${savingTab.tabid}`);
@@ -48,20 +56,22 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
       tabdata[match[1]] = JSON.parse(localStorage.getItem(key));
     }
 
+    return {
+      props: savingTab.props,
+      tabComponent: savingTab.tabComponent,
+      tabdata,
+      ..._.pick(values, savedProperties),
+    };
+  };
+
+  const saveTab = async (values) => {
+    const data = await getTabSaveData(values);
+
     axios.post('files/save', {
       folder: 'favorites',
       file: uuidv1(),
       format: 'json',
-      data: {
+      data,
-        props: savingTab.props,
-        tabComponent: savingTab.tabComponent,
-        tabdata,
-        ...values,
-        // title: values.title,
-        // icon: values.icon,
-        // showInToolbar: values.showInToolbar,
-        // openOnStartup: values.openOnStartup,
-      },
     });
   };
 
@@ -92,6 +102,12 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
       saveFile(values);
     }
   };
+
+  const handleCopyLink = async (values) => {
+    const tabdata = await getTabSaveData(values);
+    copyTextToClipboard(`${document.location.origin}#tabdata=${encodeURIComponent(JSON.stringify(tabdata))}`);
+  };
+
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>{editingData ? 'Edit favorite' : 'Add to favorites'}</ModalHeader>
@@ -103,12 +119,31 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
             <FontIconPreview />
           </FormFieldTemplate>
           <FormTextField label="URL path" name="urlPath" />
-          <FormCheckboxField label="Show in toolbar" name="showInToolbar" />
+          {!!savingTab && !electron && <FormCheckboxField label="Share as link" name="shareAsLink" />}
-          <FormCheckboxField label="Open on startup" name="openOnStartup" />
+          <FormCondition condition={(values) => !values.shareAsLink}>
+            <FormCheckboxField label="Show in toolbar" name="showInToolbar" />
+            <FormCheckboxField label="Open on startup" name="openOnStartup" />
+          </FormCondition>
+          {
+          <FormSelectField label="Chart type" name="chartType">
+                  <option value="bar">Bar</option>
+                  <option value="line">Line</option>
+                  {/* <option value="radar">Radar</option> */}
+                  <option value="pie">Pie</option>
+                  <option value="polarArea">Polar area</option>
+                  {/* <option value="bubble">Bubble</option>
+                <option value="scatter">Scatter</option> */}
+                </FormSelectField>
+}
         </ModalContent>
         <ModalFooter>
+          <FormCondition condition={(values) => !values.shareAsLink && hasPermission('files/favorites/write')}>
+            <FormSubmit value="OK" onClick={handleSubmit} />
+          </FormCondition>
+          <FormCondition condition={(values) => values.shareAsLink}>
+            <FormButton value="Copy link" onClick={handleCopyLink} />
+          </FormCondition>
           <FormButton value="Cancel" onClick={() => modalState.close()} />
-          {hasPermission('files/favorites/write') && <FormSubmit value="OK" onClick={handleSubmit} />}
         </ModalFooter>
       </FormProvider>
     </ModalBase>

packages/web/src/utility/forms.js

@@ -24,6 +24,12 @@ export function FormFieldTemplate({ label, children, type }) {
   );
 }
 
+export function FormCondition({ condition, children }) {
+  const { values } = useForm();
+  if (condition(values)) return children;
+  return null;
+}
+
 export function FormTextFieldRaw({ name, focused = false, ...other }) {
   const { values, setFieldValue } = useForm();
   const handleChange = (event) => {

packages/web/src/widgets/Toolbar.js

@@ -17,6 +17,7 @@ import useOpenNewTab from '../utility/useOpenNewTab';
 import tabs from '../tabs';
 import FavoriteModal from '../modals/FavoriteModal';
 import { useOpenFavorite } from '../appobj/FavoriteFileAppObject';
+import ErrorMessageModal from '../modals/ErrorMessageModal';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -88,18 +89,26 @@ export default function ToolBar({ toolbarPortalRef }) {
 
   React.useEffect(() => {
     const { hash } = document.location;
-    const favname = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null;
+    const openFavoriteName = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null;
-    if (favname) {
+    const openTabdata = hash && hash.startsWith('#tabdata=') ? hash.substring('#tabdata='.length) : null;
-      const open = (favorites || []).find((x) => x.urlPath == favname);
+    if (openFavoriteName) {
+      const open = (favorites || []).find((x) => x.urlPath == openFavoriteName);
       if (open) {
         openFavorite(open);
         window.history.replaceState(null, null, ' ');
       }
-    } else {
+    } else if (openTabdata) {
-      if (!openedTabs.find((x) => x.closedTime == null)) {
+      try {
-        for (const fav of (favorites || []).filter((x) => x.openOnStartup)) {
+        const json = JSON.parse(decodeURIComponent(openTabdata));
-          openFavorite(fav);
+        console.log('TABDATA', json);
-        }
+        openFavorite(json);
+        window.history.replaceState(null, null, ' ');
+      } catch (err) {
+        showModal((modalState) => <ErrorMessageModal modalState={modalState} message={err.message} />);
+      }
+    } else if (!openedTabs.find((x) => x.closedTime == null)) {
+      for (const fav of (favorites || []).filter((x) => x.openOnStartup)) {
+        openFavorite(fav);
       }
     }
   }, [favorites]);
@@ -137,8 +146,8 @@ export default function ToolBar({ toolbarPortalRef }) {
         tabs[currentTab.tabComponent].allowAddToFavorites &&
         currentTab.props &&
         tabs[currentTab.tabComponent].allowAddToFavorites(currentTab.props) && (
-          <ToolbarButton onClick={addToFavorite} icon="icon favorite">
+          <ToolbarButton onClick={addToFavorite} icon="icon share">
-            Add to favorites
+            Share
           </ToolbarButton>
         )}
       <ToolbarButton onClick={switchTheme} icon="icon theme">