pass loading state down from parent component to 'revert file' button

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

@@ -480,26 +480,24 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   async function revertFileChanges(selectedFile) {
 
-    // ditch local storage version
+    // unset local storage version
     removeFileFromLocalStorage({ path: selectedFile.path });
 
-    // get file
-    //
-    const { error, message} = await getComponentFile({
+    // get canonical file version
+    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 canonical file content to caller
     return message;
 
   }

src/components/shared/webide/Editor.js

@@ -39,7 +39,7 @@ function Editor({ active, file, onFileChange, theme }) {
     return null;
   }
 
-  const filepathRelativeToComponentsDir = file.path.split('/').slice(1).join('/');
+  const filepathRelativeToComponentsDir = file?.path.split('/').slice(1).join('/');
 
   // eslint-disable-next-line no-unused-vars
   return <>

src/components/shared/webide/EditorMenu.js

@@ -1,33 +1,34 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 
 export function SaveButton({ onClick, disabled }) {
 
   const [ loading, setLoading ] = useState(false);
+
   return (
     <button
       type="button"
       disabled={ disabled }
       title="save file to instance"
-      className={ cn("save-code fas", {
-        disabled, 
-        'fa-save': !loading,
-        'fa-spinner': loading,
-        'fa-spin': loading
-      }) }
+      className={
+        cn("save-code fas", {
+          disabled, 
+          'fa-save': !loading,
+          'fa-spinner': loading,
+          'fa-spin': loading
+        })
+      }
       onClick={ 
         async () => {
 
-          setLoading(true);
+          setLoading(() => true);
           await onClick();
-          setTimeout(() => {
-            setLoading(false);
-          }, 500);
+          setLoading(() => false);
         }
       } />
-  )
+  );
 
 }
 
@@ -74,36 +75,37 @@ export function RestartOnSaveToggle({ onClick, restartAfterSave }) {
   );
 }
 
-export function RevertFileButton({ onClick, disabled }) {
+export function RevertFileButton({ onClick, disabled, loading }) {
+
   return (
     <button
       type="button"
       disabled={ disabled }
       title="revert file to previously saved state"
-      className={
-        cn('revert-file fas fa-history', { disabled })
+      onClick={
+        async () => {
+          await onClick();
+        }
       }
-      onClick={ onClick } />
+      className={
+        cn("revert-file fas", {
+          disabled,
+          'fa-history': !loading,
+          'fa-spinner': loading,
+          'fa-spin': loading,
+        })
+      } /> 
+  );
 
-  )
 }
 
-// TODO: convert to mapping children to a list instead of explicitly doing all of this
-export default function EditorMenu({ SaveButton: SaveBtn, RestartInstanceButton: RestartInstanceBtn, RestartOnSaveToggle: RestartOnSaveTgl, RevertFileButton: RevertFileBtn }) {
-  return (
+export default function EditorMenu({ children }) {
+
+  const keys = children?.map(k => crypto.randomUUID());
+
+  return children ? (
     <ul className="editor-menu">
-      <li>
-        <SaveBtn />
-      </li>
-      <li>
-        <RestartInstanceBtn />
-      </li>
-      <li>
-        <RestartOnSaveTgl />
-      </li>
-      <li>
-        <RevertFileBtn />
-      </li>
+      { children.map((child, index) => <li key={keys[index]}>{child}</li>) }
     </ul>
-  )
+  ) : null;
 }

src/components/shared/webide/FileMenu.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import cn from 'classnames';
-import { v4 as uuid } from 'uuid';
 
 
 export function DeleteFolderButton({ onClick, disabled }) {
@@ -82,7 +81,7 @@ function FileMenu({ children }) {
   return (
     <ul className="file-menu">
       {
-        children.map(child => <li className="file-menu-item" key={ uuid() }>{child}</li>)
+        children.map(child => <li className="file-menu-item" key={ crypto.randomUUID() }>{child}</li>)
       }
     </ul>
   )

src/components/shared/webide/index.js

@@ -61,6 +61,7 @@ function WebIDE({
   const [ activeEditorWindow, setActiveEditorWindow ] = useState(EDITOR_WINDOWS.DEFAULT_WINDOW);
   const [ previousActiveEditorWindow, setPreviousActiveEditorWindow ] = useState(null);
   const [ restartAfterSave, setRestartAfterSave ] = useState(true);
+  const [ revertingFile, setRevertingFile ] = useState(false);
 
   const hasProjects = fileTree?.entries?.length > 0;
   const canAddFile = Boolean(hasProjects && selectedFolder);  // can only add a file if a target folder is selected
@@ -233,57 +234,50 @@ function WebIDE({
           } />
       </Col>
       <Col className="editor-window-container col-md-8">
-        <EditorMenu
-          SaveButton={
-            () => (
-              <SaveButton
-                disabled={ !(selectedFile && activeEditorWindow === EDITOR_WINDOWS.CODE_EDITOR_WINDOW) }
-                onClick={
-                  async () => {
-                    await onFileSave(selectedFile, restartAfterSave)
-                  }
-                } />
-            )
-          }
-          RestartInstanceButton={
-            () => (
-              <RestartInstanceButton
-                restarting={restartingInstance}
-                onClick={
-                  async () => {
-                    await restartInstance();
-                  }
-                } />
-            )
-          }
-          RestartOnSaveToggle={
-            () => (
-              <RestartOnSaveToggle
-                restartAfterSave={restartAfterSave}
-                onClick={
-                  () => {
-                    setRestartAfterSave(!restartAfterSave);
-                  }
-                } />
-            )
-          }
-          RevertFileButton={
-            () => (
-              <RevertFileButton
-                disabled={!selectedFile?.cached}
-                onClick={
-                  async () => {
-                    const updatedContent = await onRevertFile(selectedFile);
-                    setSelectedFile({
-                      ...selectedFile,
-                      content: updatedContent,
-                      cached: false
-                    });
-                  }
-                }  />
-            )
-          }
-        />
+        <EditorMenu>
+          <SaveButton
+            disabled={ !(selectedFile && activeEditorWindow === EDITOR_WINDOWS.CODE_EDITOR_WINDOW) }
+            onClick={
+              async () => {
+                await onFileSave(selectedFile, restartAfterSave)
+              }
+            } />
+          <RestartInstanceButton
+            restarting={restartingInstance}
+            onClick={
+              async () => {
+                await restartInstance();
+              }
+            } />
+          <RestartOnSaveToggle
+            restartAfterSave={restartAfterSave}
+            onClick={
+              () => {
+                setRestartAfterSave(!restartAfterSave);
+              }
+            } />
+          <RevertFileButton
+            loading={ revertingFile }
+            disabled={!(selectedFile?.cached && activeEditorWindow === EDITOR_WINDOWS.CODE_EDITOR_WINDOW)}
+            onClick={
+              async () => {
+
+                setRevertingFile(true);
+                try { 
+                  const updatedContent = await onRevertFile(selectedFile);
+                  const updatedSelectedFile = {
+                    ...selectedFile,
+                    content: updatedContent,
+                    cached: false
+                  };
+                  setSelectedFile(updatedSelectedFile);
+                } finally {
+                  setRevertingFile(false);
+                }
+
+              }
+            } />
+        </EditorMenu>
         <EditorWindow>
           <DefaultWindow
             fileTree={fileTree}

src/functions/api/instance/getComponents.js

@@ -1,4 +1,3 @@
-import { v4 as uuid } from 'uuid';
 import queryInstance from '../queryInstance';
 
 // this 'addMetadata' logic probably belongs in src/functions/instance
@@ -11,7 +10,7 @@ function addMetadata(fileTree, path, rootDir, readOnly=false) {
 
   if (path === rootDir) {
     fileTree.path = rootDir;
-    fileTree.key = uuid();
+    fileTree.key = crypto.randomUUID();
   }
 
   for (const entry of fileTree.entries) {
@@ -27,7 +26,7 @@ function addMetadata(fileTree, path, rootDir, readOnly=false) {
     const [ , project ] = newPath.split('/');
     entry.project = project;
     entry.path = newPath;
-    entry.key = uuid();
+    entry.key = crypto.randomUUID();
     entry.readOnly = readOnly || !!entry.package;
 
     addMetadata(entry, newPath, rootDir, entry.readOnly);