From adbcf445bb537968ee44037d00132796e2bea981 Mon Sep 17 00:00:00 2001
From: Alex Ramsdell <alex@harperdb.io>
Date: Thu, 2 Nov 2023 13:08:26 -0400
Subject: [PATCH 1/4] add ButtonWithLoader component, use in delete file
 window. todo: replace other network-bound buttons w/ this loader button.

---
 src/assets/styles/components/_web-ide.scss    | 24 ++++++++----
 src/components/shared/ButtonWithLoader.js     | 39 +++++++++++++++++++
 src/components/shared/webide/index.js         |  4 +-
 .../shared/webide/windows/DeleteFileWindow.js | 21 ++++++++--
 .../shared/webide/windows/NameInput.js        |  2 -
 5 files changed, 75 insertions(+), 15 deletions(-)
 create mode 100644 src/components/shared/ButtonWithLoader.js

diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss
index b2948c576..2cb47f5ce 100644
--- a/src/assets/styles/components/_web-ide.scss
+++ b/src/assets/styles/components/_web-ide.scss
@@ -162,14 +162,6 @@
       background: rgb(26, 26, 26);
     }
 
-    /*
-    .root {
-      display: grid;
-      grid-template-columns: 150px minmax(0px, auto);
-      height: 100%;
-    }
-    */
-    // background: transparent !important;
   }
 
   .file-menu,
@@ -294,6 +286,22 @@
 }
 
 .web-ide {
+  .button-with-loader {
+    min-width: 105px;
+
+    &.loading {
+      color: transparent;
+    }
+
+    .button-with-loader-icon {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+  }
   .cancel-button {
     margin-left: 10px;
   }
diff --git a/src/components/shared/ButtonWithLoader.js b/src/components/shared/ButtonWithLoader.js
new file mode 100644
index 000000000..8f63e5db4
--- /dev/null
+++ b/src/components/shared/ButtonWithLoader.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import cn from 'classnames';
+
+export default function ButtonWithLoader({ text, className, onClick, children }) {
+
+  const [ loading, setLoading ] = useState(false);
+
+  return (
+    <button
+      type="button"
+      onClick={ 
+        async (event) => {
+
+          setLoading(true);
+
+          try {
+
+            await onClick();
+            setLoading(false);
+
+          } catch(e) {
+            setLoading(false);
+          }
+
+        }
+      }
+      className={
+        cn(`${className} button-with-loader`, { loading })
+      }>
+      {
+        loading ?
+          <i className="button-with-loader-icon fas fa-spinner fa-spin" /> 
+          : children
+      }
+    </button>
+  );
+}
+
+
diff --git a/src/components/shared/webide/index.js b/src/components/shared/webide/index.js
index c382bc1c1..4111b8c30 100644
--- a/src/components/shared/webide/index.js
+++ b/src/components/shared/webide/index.js
@@ -384,8 +384,8 @@ function WebIDE({
             active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_FILE_WINDOW }
             selectedFile={ selectedFile }
             onConfirm={
-              () => {
-                onDeleteFile(selectedFile);
+              async () => {
+                await onDeleteFile(selectedFile);
                 setSelectedFile(null);
                 setSelectedFolder(null);
                 updateActiveEditorWindow(EDITOR_WINDOWS.DEFAULT_WINDOW, activeEditorWindow);
diff --git a/src/components/shared/webide/windows/DeleteFileWindow.js b/src/components/shared/webide/windows/DeleteFileWindow.js
index 54219e960..ae9b1b693 100644
--- a/src/components/shared/webide/windows/DeleteFileWindow.js
+++ b/src/components/shared/webide/windows/DeleteFileWindow.js
@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
+import cn from 'classnames';
 import { Card, CardTitle, CardBody } from 'reactstrap';
+import { useAlert } from 'react-alert';
+import ButtonWithLoader from '../../ButtonWithLoader'; 
 
 export default function DeleteFileWindow({ active, selectedFile, onConfirm, onCancel }) {
 
+  const [ loading, setLoading ] = useState(false);
+
   if (!active) {
     return null;
   }
@@ -10,14 +15,24 @@ export default function DeleteFileWindow({ active, selectedFile, onConfirm, onCa
   const {project} = selectedFile;
   const filepath = selectedFile.path.split(`/${project}/`)[1];
 
+
   return (
     <Card className="delete-file-window">
       <CardBody className="delete-file-window-container">
         <div className="delete-file-window-controls">
           <CardTitle className="delete-file-window-title">Delete Confirmation</CardTitle>
           <p>Are you sure you want to delete file <span className="file-to-delete">{filepath}</span> from project <span className="file-to-delete-parent-project">{ project }</span> ?</p> 
-          <button type="button" className="btn btn-danger delete-button" onClick={ onConfirm }>Delete</button>
-          <button type="button" className="btn btn-secondary cancel-button" onClick={ onCancel }>Cancel</button>
+          <ButtonWithLoader
+            className="btn btn-danger delete-button"
+            onClick={ onConfirm }>
+            Delete
+          </ButtonWithLoader>
+          <button
+            type="button"
+            className="btn btn-secondary cancel-button"
+            onClick={ onCancel }>
+            Cancel
+          </button>
         </div>
       </CardBody>
     </Card>
diff --git a/src/components/shared/webide/windows/NameInput.js b/src/components/shared/webide/windows/NameInput.js
index 413b86107..6503192e6 100644
--- a/src/components/shared/webide/windows/NameInput.js
+++ b/src/components/shared/webide/windows/NameInput.js
@@ -6,8 +6,6 @@ import cn from 'classnames';
 
 export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value, validate=() => true }) {
 
-
-
   const [ name, setName ] = useState(value || '');
   const [ isValidName, setIsValidName ] = useState(false); 
 

From 4592f3022e01ed3277ada5e6a539be2371192496 Mon Sep 17 00:00:00 2001
From: Alex Ramsdell <alex@harperdb.io>
Date: Thu, 2 Nov 2023 13:16:27 -0400
Subject: [PATCH 2/4] add disabled prop to button with loader, use in more
 windows.

---
 src/components/shared/ButtonWithLoader.js     |  3 ++-
 .../webide/windows/DeleteFolderWindow.js      |  7 ++++++-
 .../webide/windows/DeletePackageWindow.js     |  7 ++++++-
 .../shared/webide/windows/NameInput.js        | 20 ++++++++++++-------
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/shared/ButtonWithLoader.js b/src/components/shared/ButtonWithLoader.js
index 8f63e5db4..276cb3946 100644
--- a/src/components/shared/ButtonWithLoader.js
+++ b/src/components/shared/ButtonWithLoader.js
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
 
-export default function ButtonWithLoader({ text, className, onClick, children }) {
+export default function ButtonWithLoader({ className, onClick, disabled, children }) {
 
   const [ loading, setLoading ] = useState(false);
 
   return (
     <button
+      disabled={disabled}
       type="button"
       onClick={ 
         async (event) => {
diff --git a/src/components/shared/webide/windows/DeleteFolderWindow.js b/src/components/shared/webide/windows/DeleteFolderWindow.js
index 12112bb1c..5a75546bb 100644
--- a/src/components/shared/webide/windows/DeleteFolderWindow.js
+++ b/src/components/shared/webide/windows/DeleteFolderWindow.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, CardTitle, CardBody } from 'reactstrap';
+import ButtonWithLoader from '../../ButtonWithLoader'; 
 
 export default function DeleteFolderWindow({ active, selectedFolder, onConfirm, onCancel }) {
 
@@ -24,7 +25,11 @@ export default function DeleteFolderWindow({ active, selectedFolder, onConfirm,
                   <span className="folder-to-delete"> {projectSubdir} </span> from project <span className="folder-to-delete-parent-project">{ project }</span> ?
                 </p> 
             }
-            <button type="button" className="btn btn-danger delete-button" onClick={ onConfirm }>Delete</button>
+            <ButtonWithLoader
+              className="btn btn-danger delete-button"
+              onClick={ onConfirm }>
+              Delete
+            </ButtonWithLoader>
             <button type="button" className="btn btn-secondary cancel-button" onClick={ onCancel }>Cancel</button>
         </div>
       </CardBody>
diff --git a/src/components/shared/webide/windows/DeletePackageWindow.js b/src/components/shared/webide/windows/DeletePackageWindow.js
index 6f88ade88..cdec8f499 100644
--- a/src/components/shared/webide/windows/DeletePackageWindow.js
+++ b/src/components/shared/webide/windows/DeletePackageWindow.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, CardTitle, CardBody } from 'reactstrap';
+import ButtonWithLoader from '../../ButtonWithLoader'; 
 
 export default function DeletePackageWindow({ active, selectedPackage, onConfirm, onCancel }) {
 
@@ -15,7 +16,11 @@ export default function DeletePackageWindow({ active, selectedPackage, onConfirm
         <div className="delete-package-window-controls">
           <CardTitle className="delete-package-window-title">Delete Confirmation</CardTitle>
           <p>Are you sure you want to delete package <span className="package-to-delete">{ packageName }</span> ?</p>
-          <button type="button" className="btn btn-danger delete-button" onClick={ onConfirm }>Delete</button>
+          <ButtonWithLoader
+            className="btn btn-danger delete-button"
+            onClick={ onConfirm }>
+            Delete
+          </ButtonWithLoader>
           <button type="button" className="btn btn-secondary cancel-button" onClick={ onCancel }>Cancel</button>
         </div>
       </CardBody>
diff --git a/src/components/shared/webide/windows/NameInput.js b/src/components/shared/webide/windows/NameInput.js
index 6503192e6..a2557af95 100644
--- a/src/components/shared/webide/windows/NameInput.js
+++ b/src/components/shared/webide/windows/NameInput.js
@@ -3,6 +3,7 @@
 
 import React, { useState } from 'react';
 import cn from 'classnames';
+import ButtonWithLoader from '../../ButtonWithLoader';
 
 export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value, validate=() => true }) {
 
@@ -59,15 +60,20 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac
           <span className="invalid-text" />
           <div className="name-input-buttons-container">
 
-            <button
-              type="button"
+            <ButtonWithLoader
               disabled={ !isValidName }
               className="btn btn-success name-input-confirm"
-              onClick={ () => {
-
-                onConfirm(name); 
-              }}>ok</button>
-            <button type="button" className="btn btn-secondary name-input-cancel cancel-button" onClick={ onCancel }>cancel</button>
+              onClick={
+                async () => {
+                  await onConfirm(name); 
+                }
+              }>OK</ButtonWithLoader>
+            <button
+              type="button"
+              className="btn btn-secondary name-input-cancel cancel-button"
+              onClick={ onCancel }>
+              Cancel
+            </button>
         </div>
     </div>
   );

From 15dd3d781a6e722341aae2458ae0bd398397e082 Mon Sep 17 00:00:00 2001
From: Alex Ramsdell <alex@harperdb.io>
Date: Thu, 2 Nov 2023 13:54:36 -0400
Subject: [PATCH 3/4] fix callbacks invoked by ButtonWithLoader

---
 src/components/instance/functions/index.js        | 1 +
 src/components/shared/webide/index.js             | 2 +-
 src/components/shared/webide/windows/NameInput.js | 9 +++------
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/instance/functions/index.js b/src/components/instance/functions/index.js
index 31a4ca24e..729bdcb6e 100644
--- a/src/components/instance/functions/index.js
+++ b/src/components/instance/functions/index.js
@@ -52,6 +52,7 @@ function CustomFunctionsIndex() {
     if (configuring) refreshCustomFunctions();
   }, 2000);
 
+  console.log('cf error: ', custom_functions?.error);
   return !custom_functions ? (
     <Loader header="loading custom functions" spinner />
   ) : custom_functions.error ? (
diff --git a/src/components/shared/webide/index.js b/src/components/shared/webide/index.js
index 4111b8c30..09d050be6 100644
--- a/src/components/shared/webide/index.js
+++ b/src/components/shared/webide/index.js
@@ -88,7 +88,7 @@ function WebIDE({
   }
 
   async function addProjectFolder(newFolderName) {
-    onAddProjectFolder(newFolderName, selectedFolder)
+    await onAddProjectFolder(newFolderName, selectedFolder)
     // go back to prev window
     updateActiveEditorWindow(previousActiveEditorWindow, activeEditorWindow);
   }
diff --git a/src/components/shared/webide/windows/NameInput.js b/src/components/shared/webide/windows/NameInput.js
index a2557af95..a053712d6 100644
--- a/src/components/shared/webide/windows/NameInput.js
+++ b/src/components/shared/webide/windows/NameInput.js
@@ -35,7 +35,7 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac
     <div
       tabIndex={0}
       className={ cn("name-input") }>
-      { label && <label><span>{label}:</span></label> }
+        { label && <label><span>{label}:</span></label> }
         <div className="name-input-container">
           <input
             className={ cn({ invalid: name.length > 0 && !isValidName }) }
@@ -63,11 +63,8 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac
             <ButtonWithLoader
               disabled={ !isValidName }
               className="btn btn-success name-input-confirm"
-              onClick={
-                async () => {
-                  await onConfirm(name); 
-                }
-              }>OK</ButtonWithLoader>
+              onClick={ () => onConfirm(name) } 
+              >OK</ButtonWithLoader>
             <button
               type="button"
               className="btn btn-secondary name-input-cancel cancel-button"

From d9b4c7cfe041a6a20f1bccf54834d75ddf9cf7f4 Mon Sep 17 00:00:00 2001
From: Alex Ramsdell <alex@harperdb.io>
Date: Thu, 2 Nov 2023 13:57:24 -0400
Subject: [PATCH 4/4] lint.

---
 src/components/instance/functions/index.js               | 1 -
 src/components/shared/ButtonWithLoader.js                | 2 +-
 src/components/shared/webide/windows/DeleteFileWindow.js | 4 ----
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/instance/functions/index.js b/src/components/instance/functions/index.js
index 729bdcb6e..31a4ca24e 100644
--- a/src/components/instance/functions/index.js
+++ b/src/components/instance/functions/index.js
@@ -52,7 +52,6 @@ function CustomFunctionsIndex() {
     if (configuring) refreshCustomFunctions();
   }, 2000);
 
-  console.log('cf error: ', custom_functions?.error);
   return !custom_functions ? (
     <Loader header="loading custom functions" spinner />
   ) : custom_functions.error ? (
diff --git a/src/components/shared/ButtonWithLoader.js b/src/components/shared/ButtonWithLoader.js
index 276cb3946..0fbe714bc 100644
--- a/src/components/shared/ButtonWithLoader.js
+++ b/src/components/shared/ButtonWithLoader.js
@@ -10,7 +10,7 @@ export default function ButtonWithLoader({ className, onClick, disabled, childre
       disabled={disabled}
       type="button"
       onClick={ 
-        async (event) => {
+        async () => {
 
           setLoading(true);
 
diff --git a/src/components/shared/webide/windows/DeleteFileWindow.js b/src/components/shared/webide/windows/DeleteFileWindow.js
index ae9b1b693..ebec03b17 100644
--- a/src/components/shared/webide/windows/DeleteFileWindow.js
+++ b/src/components/shared/webide/windows/DeleteFileWindow.js
@@ -1,13 +1,9 @@
 import React, { useState } from 'react';
-import cn from 'classnames';
 import { Card, CardTitle, CardBody } from 'reactstrap';
-import { useAlert } from 'react-alert';
 import ButtonWithLoader from '../../ButtonWithLoader'; 
 
 export default function DeleteFileWindow({ active, selectedFile, onConfirm, onCancel }) {
 
-  const [ loading, setLoading ] = useState(false);
-
   if (!active) {
     return null;
   }