cache local application to prevent data loss, provide revert functionality

src/assets/styles/components/_web-ide.scss

@@ -5,15 +5,15 @@
     }
   }
 
-  color: white;
+  color: $color-white;
 
   .editor.current-file-path {
     border-bottom: 1px solid transparent;
   }
 
   .default-window-option {
     span {
-      color: white;
+      color: $color-white;
     }
 
   }
@@ -50,7 +50,7 @@
   }
 
   .file-browser button > span {
-    color: white !important;
+    color: $color-white !important;
   }
 
   .file-browser .file.file-selected > span {
@@ -74,23 +74,25 @@
 
 
   .default-window-option span {
-      color: white !important;
+      color: $color-white !important;
   }
 
   .editor-window .default-window .default-window-container {
     background: $color-pureblack !important;
-    color: white;
+    color: $color-white;
   }
 
   .no-projects {
-    color: white;
+    color: $color-white;
 
     .docs-link {
       color: #ee81ee !important;
     }
   }
 
-  color: white;
+  color: $color-white;
+
+  color: rgb(105, 105, 105);
 
   color: rgb(105, 105, 105);
 
@@ -128,11 +130,11 @@
   }
 
   .editor-window .cancel-button:hover {
-    color: white;
+    color: $color-white;
   }
 
   .package-install-window {
-    background: white;
+    background: $color-white;
   }
 
   .editor.current-file-path {
@@ -177,6 +179,7 @@
     border-bottom: 1px solid darkgray !important;
   }
 
+  .revert-file[disabled],
   .save-code[disabled] {
     color: #c2c2c2 !important;
   }
@@ -228,7 +231,7 @@
   color: rgb(105, 105, 105);
 
   .package-install-window {
-    background: white;
+    background: $color-white;
   }
 
   .editor.current-file-path {
@@ -265,7 +268,7 @@
   }
 
   .editor-window button:hover {
-    color: white;
+    color: $color-white;
     //rgb(105,105,105);
   }
 
@@ -352,7 +355,7 @@
   .add-file-icon {
     background: transparent;
     border: none;
-    color: white;
+    color: $color-white;
     margin: 0;
     outline: none !important;
     padding: 0;
@@ -371,7 +374,7 @@
     padding: 20px;
 
     .file-menu {
-      color: white;
+      color: $color-white;
 
       display: flex;
       flex-direction: row;
@@ -502,7 +505,7 @@
     .editor-menu {
       align-items: baseline;
       border-bottom: 1px solid #2e2e2e;
-      color: white;
+      color: $color-white;
       display: flex;
       flex-direction: row;
       justify-content: left;
@@ -536,6 +539,7 @@
         }
       }
 
+      .revert-file,
       .save-code {
         background: transparent;
         border: none;
@@ -546,6 +550,7 @@
         padding: 0;
       }
 
+      .revert-file[disabled],
       .save-code[disabled] {
         color: #5e5e5e;
         cursor: default;
@@ -828,11 +833,11 @@
               width: 40px;
 
               i {
-                color: white;
+                color: $color-white;
 
 
                 &.not-searching {
-                  color: white; //rgba(0,255,0, 0.1);
+                  color: $color-white; //rgba(0,255,0, 0.1);
                 }
 
 

src/components/instance/functions/manage/index.js

@@ -14,6 +14,7 @@ import deployComponent from '../../../../functions/api/instance/deployComponent'
 import restartService from '../../../../functions/api/instance/restartService';
 
 import useInstanceAuth from '../../../../functions/state/instanceAuths';
+import useEditorCache from '../../../../functions/state/editorCache';
 
 import ApplicationsEditor from '../../../shared/webide';
 import CustomFunctionsEditor from './CustomFunctionsEditor';
@@ -45,19 +46,19 @@ function getDeployTargets(instanceList, instanceAuthList, thisCsId, auth) {
       return memo;
     }
 
-    const [ major, minor ] = deployTarget?.version.split('.') || []; 
+    const [ major, minor ] = deployTarget?.version.split('.') || [];
 
     // exclude < 4.2
 
     if (parseInt(major, 10) >= 4 && parseInt(minor, 10) >= 2) {
 
-      memo.push({ 
+      memo.push({
         isCurrentInstance: csId === thisCsId,
         auth,
         instance
       });
 
-    } 
+    }
 
     return memo;
 
@@ -69,17 +70,44 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   const { compute_stack_id } = useParams();
   const registration = useStoreState(instanceState, (s) => s.registration);
-  const { fileTree } = useStoreState(instanceState, (s) => s.custom_functions); 
+  const { fileTree } = useStoreState(instanceState, (s) => s.custom_functions);
   const auth = useStoreState(instanceState, (s) => s.auth);
   const url = useStoreState(instanceState, (s) => s.url);
   const [majorVersion, minorVersion] = (registration?.version || '').split('.') || [];
   const supportsApplicationsAPI = parseFloat(`${majorVersion}.${minorVersion}`) >= 4.2;
   const instances = useStoreState(appState, (s) => s.instances);
-  const [instanceAuths] = useInstanceAuth({});
+  const [ instanceAuths ] = useInstanceAuth({});
+  const [ editorCache, setEditorCache ] = useEditorCache({});
   const theme = useStoreState(appState, (s) => s.theme);
   const [ restartingInstance, setRestartingInstance ] = useState(false);
   const alert = useAlert();
 
+  function removeFileFromLocalStorage({ path }) {
+
+    const updatedCache = {...editorCache};
+    const fileKey = `${compute_stack_id}_${path}`;
+
+    if (fileKey in updatedCache) {
+      delete updatedCache[fileKey];
+    }
+
+    setEditorCache({
+      ...updatedCache
+    });
+  }
+
+  async function saveFileToLocalStorage(selectedFile) {
+    const { path, content } = selectedFile;
+
+    const fileKey = `${compute_stack_id}_${path}`;
+
+    setEditorCache({
+      ...editorCache,
+      [fileKey]: content
+    });
+
+  }
+
   async function restartWithLoadingState({ auth: instanceAuth, url: instanceUrl }) {
 
     setRestartingInstance(true);
@@ -96,9 +124,14 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
   }
 
   // save file to instance
-  async function saveCodeToInstance(selectedFile, restartRequired) {
-
-    const filepathRelativeToProjectDir = selectedFile.path.split('/').slice(2).join('/'); 
+  async function saveFileToInstance(selectedFile, restartRequired) {
+
+    // handle cached situation
+    // - NOTE: this 'selectedFile' is not reactive.
+    // - remove cache entry for this file
+    // - update selectedFile with new content
+    // - set selectedFile.cached = false.
+    const filepathRelativeToProjectDir = selectedFile.path.split('/').slice(2).join('/');
     const payload = {
       auth,
       url,
@@ -113,11 +146,13 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
       alert.error(message);
     }
 
-
     if (restartRequired) {
       await restartWithLoadingState({ auth, url });
     }
 
+    removeFileFromLocalStorage({ path: selectedFile.path });
+    selectedFile.cached = false;
+
     await refreshCustomFunctions();
 
   }
@@ -156,7 +191,25 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
     const { path, project, name } = selectedFile;
     const newFile = getRelativeFilepath(path);
-    const { error, message } = await getComponentFile({
+    const fileCacheKey = `${compute_stack_id}_${path}`;
+    const cachedFile = editorCache[fileCacheKey];
+    const isCached = fileCacheKey in editorCache;
+
+    if (isCached) {
+
+      return {
+        cached: isCached,
+        content: cachedFile,
+        path,
+        project,
+        name
+      };
+
+    }
+
+    // TODO: set file content to local storage copy if it exists.
+    //
+    const { error, message: content } = await getComponentFile({
       auth,
       url,
       project,
@@ -165,19 +218,21 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
     if (error) {
 
-      alert.error(message);
+      alert.error(content);
 
       return {
         content: '',
         path,
         project,
-        name
+        name,
+        cached: false
       };
 
     }
 
     return {
-      content: message,
+      cached: isCached,
+      content,
       path,
       project,
       name
@@ -423,14 +478,42 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   }
 
+  async function revertFileChanges(selectedFile) {
+
+    // ditch local storage version
+    removeFileFromLocalStorage({ path: selectedFile.path });
+
+    // get file
+    //
+    const { error, message} = await getComponentFile({
+      auth,
+      url,
+      project: selectedFile.project,
+      file: getRelativeFilepath(selectedFile.path)
+    });
+
+    removeFileFromLocalStorage({ path: selectedFile.path });
+
+    if (error) {
+      return alert.error(message);
+    }
+
+    await refreshCustomFunctions();
+
+    return message;
+
+  }
+
   return supportsApplicationsAPI ?
     <ApplicationsEditor
       theme={theme}
-      fileTree={fileTree} 
+      fileTree={fileTree}
       deployTargets={
         getDeployTargets(instances, instanceAuths, compute_stack_id, auth)
       }
-      onSave={saveCodeToInstance}
+      onRevertFile={revertFileChanges}
+      onFileChange={saveFileToLocalStorage}
+      onFileSave={saveFileToInstance}
       onUpdate={refreshCustomFunctions}
       onAddFile={createNewFile}
       onAddProject={createNewProject}

src/components/shared/webide/Editor.js

@@ -19,7 +19,7 @@ const extensionToLanguageMap = {
 
 // TODO: update code using whatever monaco hook is available. onupdate.
 // don't allow save if there are errors.
-function Editor({ active, file, onChange, theme }) {
+function Editor({ active, file, onFileChange, theme }) {
 
   const [ language, setLanguage ] = useState('javascript');
   const [ editorTheme, setEditorTheme ] = useState('vs-dark');
@@ -44,15 +44,16 @@ function Editor({ active, file, onChange, theme }) {
   // eslint-disable-next-line no-unused-vars
   return <>
     <div className="editor current-file-path">
-      <i className="current-file-path-icon fas fa-caret-right" />
-      {filepathRelativeToComponentsDir}
+      path: <span>{filepathRelativeToComponentsDir} </span>
+      size: <span> {file.size} bytes </span>
+      last saved: <span> {file.mtime} </span>
     </div>
     <ReactMonacoEditor
       height="100%"
       language={language}
       value={file?.content || ''}
       theme={editorTheme}
-      onChange={ onChange }
+      onChange={onFileChange}
       options={{
         readOnly: file.readOnly,
         automaticLayout: true,