diff --git a/packages/web/src/icons.js b/packages/web/src/icons.js
index 8a7623f17..ecc48052f 100644
--- a/packages/web/src/icons.js
+++ b/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',
diff --git a/packages/web/src/modals/FavoriteModal.js b/packages/web/src/modals/FavoriteModal.js
index a8ec0c146..190aab126 100644
--- a/packages/web/src/modals/FavoriteModal.js
+++ b/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 {
- title: editingData.title,
- icon: editingData.icon,
- showInToolbar: editingData.showInToolbar,
- openOnStartup: editingData.openOnStartup,
- urlPath: editingData.urlPath,
- };
+ return _.pick(editingData, savedProperties);
}
}, []);
- 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: {
- props: savingTab.props,
- tabComponent: savingTab.tabComponent,
- tabdata,
- ...values,
- // title: values.title,
- // icon: values.icon,
- // showInToolbar: values.showInToolbar,
- // openOnStartup: values.openOnStartup,
- },
+ data,
});
};
@@ -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 (
{editingData ? 'Edit favorite' : 'Add to favorites'}
@@ -103,12 +119,31 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
-
-
+ {!!savingTab && !electron && }
+ !values.shareAsLink}>
+
+
+
+ {
+
+
+
+ {/* */}
+
+
+ {/*
+ */}
+
+}
+ !values.shareAsLink && hasPermission('files/favorites/write')}>
+
+
+ values.shareAsLink}>
+
+
modalState.close()} />
- {hasPermission('files/favorites/write') && }
diff --git a/packages/web/src/utility/forms.js b/packages/web/src/utility/forms.js
index 9c17cf0af..ec6cb25da 100644
--- a/packages/web/src/utility/forms.js
+++ b/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) => {
diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js
index 84e820d41..fb7a43b4c 100644
--- a/packages/web/src/widgets/Toolbar.js
+++ b/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;
- if (favname) {
- const open = (favorites || []).find((x) => x.urlPath == favname);
+ const openFavoriteName = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null;
+ const openTabdata = hash && hash.startsWith('#tabdata=') ? hash.substring('#tabdata='.length) : null;
+ if (openFavoriteName) {
+ const open = (favorites || []).find((x) => x.urlPath == openFavoriteName);
if (open) {
openFavorite(open);
window.history.replaceState(null, null, ' ');
}
- } else {
- if (!openedTabs.find((x) => x.closedTime == null)) {
- for (const fav of (favorites || []).filter((x) => x.openOnStartup)) {
- openFavorite(fav);
- }
+ } else if (openTabdata) {
+ try {
+ const json = JSON.parse(decodeURIComponent(openTabdata));
+ console.log('TABDATA', json);
+ openFavorite(json);
+ window.history.replaceState(null, null, ' ');
+ } catch (err) {
+ showModal((modalState) => );
+ }
+ } 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) && (
-
- Add to favorites
+
+ Share
)}