favorite editor

packages/web/src/appobj/FavoriteFileAppObject.js

@@ -50,6 +50,28 @@ export function FavoriteFileAppObject({ data, commonProps }) {
     showModal((modalState) => <FavoriteModal modalState={modalState} editingData={data} />);
   };
 
+  const editFavoriteJson = async () => {
+    const resp = await axios.post('files/load', {
+      folder: 'favorites',
+      file: data.file,
+      format: 'text',
+    });
+
+    openNewTab(
+      {
+        icon: 'icon favorite',
+        title,
+        tabComponent: 'FavoriteEditorTab',
+        props: {
+          savedFile: data.file,
+          savedFormat: 'text',
+          savedFolder: 'favorites',
+        },
+      },
+      { editor: JSON.stringify(JSON.parse(resp.data), null, 2) }
+    );
+  };
+
   return (
     <SavedFileAppObjectBase
       data={data}
@@ -61,7 +83,12 @@ export function FavoriteFileAppObject({ data, commonProps }) {
       onLoad={async (data) => {
         openFavorite(data);
       }}
-      menuExt={<DropDownMenuItem onClick={editFavorite}>Edit</DropDownMenuItem>}
+      menuExt={
+        <>
+          <DropDownMenuItem onClick={editFavorite}>Edit</DropDownMenuItem>
+          <DropDownMenuItem onClick={editFavoriteJson}>Edit JSON definition</DropDownMenuItem>
+        </>
+      }
     />
   );
 }

packages/web/src/index.js

@@ -9,6 +9,7 @@ import 'ace-builds/src-noconflict/mode-sql';
 import 'ace-builds/src-noconflict/mode-mysql';
 import 'ace-builds/src-noconflict/mode-pgsql';
 import 'ace-builds/src-noconflict/mode-sqlserver';
+import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/mode-markdown';
 import 'ace-builds/src-noconflict/theme-github';

packages/web/src/modals/FavoriteModal.js

@@ -8,6 +8,7 @@ import { FormProvider, useForm } from '../utility/FormProvider';
 import axios from '../utility/axios';
 import uuidv1 from 'uuid/v1';
 import { FontIcon } from '../icons';
+import useHasPermission from '../utility/useHasPermission';
 
 function FontIconPreview() {
   const { values } = useForm();
@@ -15,6 +16,7 @@ function FontIconPreview() {
 }
 
 export default function FavoriteModal({ modalState, editingData = undefined, savingTab = undefined }) {
+  const hasPermission = useHasPermission();
   const initialValues = React.useMemo(() => {
     if (savingTab) {
       return {
@@ -102,7 +104,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
         </ModalContent>
         <ModalFooter>
           <FormButton value="Cancel" onClick={() => modalState.close()} />
-          <FormSubmit value="OK" onClick={handleSubmit} />
+          {hasPermission('files/favorites/write') && <FormSubmit value="OK" onClick={handleSubmit} />}
         </ModalFooter>
       </FormProvider>
     </ModalBase>

packages/web/src/tabs/FavoriteEditorTab.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import _ from 'lodash';
+import keycodes from '../utility/keycodes';
+import GenericEditor from '../sqleditor/GenericEditor';
+import useEditorData from '../utility/useEditorData';
+import LoadingInfo from '../widgets/LoadingInfo';
+import { useOpenedTabs, useSetOpenedTabs } from '../utility/globalState';
+import useOpenNewTab from '../utility/useOpenNewTab';
+import axios from '../utility/axios';
+import useHasPermission from '../utility/useHasPermission';
+import ToolbarButton from '../widgets/ToolbarButton';
+import useShowModal from '../modals/showModal';
+import ErrorMessageModal from '../modals/ErrorMessageModal';
+import { useOpenFavorite } from '../appobj/FavoriteFileAppObject';
+
+function FavoriteEditorToolbar({ save, showPreview }) {
+  const hasPermission = useHasPermission();
+
+  return (
+    <>
+      {hasPermission('files/favorites/write') && save && (
+        <ToolbarButton onClick={save} icon="icon save">
+          Save
+        </ToolbarButton>
+      )}
+      <ToolbarButton onClick={showPreview} icon="icon preview">
+        Preview
+      </ToolbarButton>
+    </>
+  );
+}
+
+export default function FavoriteEditorTab({ tabid, tabVisible, savedFile, toolbarPortalRef, ...other }) {
+  const { editorData, setEditorData, isLoading, saveToStorage } = useEditorData({ tabid });
+  const openNewTab = useOpenNewTab();
+  const showModal = useShowModal();
+  const openFavorite = useOpenFavorite();
+
+  const showPreview = () => {
+    try {
+      const data = JSON.parse(editorData);
+      openFavorite(data);
+    } catch (err) {
+      showModal((modalState) => (
+        <ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" />
+      ));
+    }
+  };
+
+  const handleKeyDown = (data, hash, keyString, keyCode, event) => {
+    if (keyCode == keycodes.f5) {
+      event.preventDefault();
+      showPreview();
+    }
+  };
+
+  const handleSave = () => {
+    try {
+      const data = JSON.parse(editorData);
+      axios.post('files/save', {
+        file: savedFile,
+        folder: 'favorites',
+        format: 'json',
+        data,
+      });
+    } catch (err) {
+      showModal((modalState) => (
+        <ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" />
+      ));
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div>
+        <LoadingInfo message="Loading favorite page" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <GenericEditor
+        value={editorData || ''}
+        onChange={setEditorData}
+        tabVisible={tabVisible}
+        onKeyDown={handleKeyDown}
+        mode="json"
+      />
+      {toolbarPortalRef &&
+        toolbarPortalRef.current &&
+        tabVisible &&
+        ReactDOM.createPortal(
+          <FavoriteEditorToolbar save={handleSave} showPreview={showPreview} />,
+          toolbarPortalRef.current
+        )}
+    </>
+  );
+}

packages/web/src/tabs/index.js

@@ -11,6 +11,7 @@ import ChartTab from './ChartTab';
 import MarkdownEditorTab from './MarkdownEditorTab';
 import MarkdownViewTab from './MarkdownViewTab';
 import MarkdownPreviewTab from './MarkdownPreviewTab';
+import FavoriteEditorTab from './FavoriteEditorTab';
 
 export default {
   TableDataTab,
@@ -26,4 +27,5 @@ export default {
   MarkdownEditorTab,
   MarkdownViewTab,
   MarkdownPreviewTab,
+  FavoriteEditorTab,
 };