lint

.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.idea
 /src/config/index.js
 
 # dependencies

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

@@ -90,21 +90,30 @@
   color: white;
 
   .name-input {
+    .name-input-container {
+      input.invalid:focus {
+        border: 1px solid #ea4c89 !important;
+      outline-color: #ea4c89 !important;
+      }
+    }
     .validation-message {
       margin-top: 8px;
+      color: $color-danger;
     }
 
     & > input.invalid {
-      border: 1px solid red !important;
-      outline-color: 1px solid red !important;
+      border: 1px solid $color-danger !important;
+      outline-color: $color-danger !important;
     }
 
+
+
     .invalid-text {
       color: red !important;
     }
 
     .invalid-project-name {
-      color: purple;
+      color: $color-danger;
     }
   }
 
@@ -117,7 +126,6 @@
 
   .package-install-window {
     background: white;
-
   }
 
   .editor.current-file-path {
@@ -182,6 +190,26 @@
 
 
 .light {
+
+  .name-input {
+
+    .validation-message {
+      color: $color-danger;
+    }
+
+    .name-input-container {
+      input.invalid {
+        border: 1px solid $color-danger !important;
+        outline-color: $color-danger !important;
+      }
+
+      .invalid-project-name {
+        color: $color-danger;
+      }
+    }
+  }
+
+
   .no-projects {
     color: rgb(105, 105, 105);
   }
@@ -704,6 +732,19 @@
       }
 
       .package-install-window {
+
+        .install-package-button {
+          width: 105px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+
+          .install-package-status-icon {
+          }
+        }
+        &.github {
+          line-height:0.5em;
+        }
         display: flex;
         flex-direction: column;
         height: 100%;

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

@@ -91,20 +91,6 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   }
 
-
-  async function restartWithLoadingState({ auth: instanceAuth, url: instanceUrl }) {
-
-    setRestartingInstance(true);
-
-    setTimeout(async () => { 
-      await restartInstance({ auth: instanceAuth, url: instanceUrl });
-      setRestartingInstance(false);
-    }, 100);
-
-
-  }
-
-
   // save file to instance
   async function saveCodeToInstance(selectedFile, restartRequired) {
 
@@ -328,7 +314,6 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
         alert.error(message);
       }
 
-
      // TODO: what do we actually want to do about an invalid package?
       // change to restartService({ auth, url, service: 'http_worker' });
       await restartInstance({ auth: t.auth, url: t.instance.url });

src/components/shared/webide/Editor.js

@@ -54,6 +54,7 @@ function Editor({ active, file, onChange, theme }) {
       theme={editorTheme}
       onChange={ onChange }
       options={{
+        readOnly: file.readOnly,
         automaticLayout: true,
         minimap: {
           enabled: false

src/components/shared/webide/FileBrowser.js

@@ -38,7 +38,7 @@ function ProjectIcon() {
   return <i className={cn(`project-icon fas fa-file-code`)} />;
 
 }
-function FolderIcon({ isOpen, toggleClosed }) {
+function FolderIcon({ toggleClosed }) {
   return <i onClick={toggleClosed} className={cn(`folder-icon fas fa-folder-open`)} />;
 }
 
@@ -166,10 +166,6 @@ function Folder({ directoryEntry, userOnSelect, onFolderSelect, onDeployProject,
   const entries = [...(directoryEntry.entries || [])].sort(directorySortComparator);
   const fileExtension = parseFileExtension(directoryEntry.name);
 
-  if (directoryEntry.path.endsWith('asdf')) {
-    console.log('directoryEntry: ', directoryEntry.path);
-    console.log('open: ', open);
-  }
   let Icon;
   // top-level dir === package
   // FolderIcon/PackageIcon is func so we can give it open args now, but instantiate it later.

src/components/shared/webide/index.js

@@ -64,7 +64,6 @@ function WebIDE({
   const canDeleteFolder = Boolean(hasProjects && (selectedFolder || selectedPackage));  // can only delete a folder if a target folder is selected
   const canAddProjectFolder = Boolean(selectedFolder); // can only add a folder toa project if a target folder is selected
 
-
   function updateActiveEditorWindow(to, from) {
     // TODO: figure out correct logic here.
     setActiveEditorWindow(to);

src/components/shared/webide/windows/PackageInstallWindow.js

@@ -22,6 +22,7 @@ export default function PackageInstallWindow({ selectedPackage, onConfirm, onCan
   const [ projectNameIsValid, setProjectNameIsValid ] = useState(true);
 
   const [ packageSpec, setPackageSpec ] = useState('');
+  const [ loading, setLoading ] = useState(false);
 
   // result: 'packageSpec' gets sent to harperdb and installed by npm
 
@@ -50,7 +51,11 @@ export default function PackageInstallWindow({ selectedPackage, onConfirm, onCan
   useEffect(validateProjectName, [ projectName ]);
 
   return (
-    <Card className="package-install-window">
+    <Card className={ cn("package-install-window", {
+      'github': packageType === 'github',
+      'npm': packageType === 'npm',
+      'url': packageType === 'url'
+    }) }>
       <div className="package-install-window-title">Package Install</div>
       <div className="package-install-source-form">
       {
@@ -109,7 +114,6 @@ export default function PackageInstallWindow({ selectedPackage, onConfirm, onCan
         {
           packageType === 'npm' &&
           <NpmPackageSelector
-            onConfirm={ onConfirm }
             projectName={ projectName }
             installed={ installed }
             pkg={ packageInfo } 
@@ -118,7 +122,6 @@ export default function PackageInstallWindow({ selectedPackage, onConfirm, onCan
         {
           packageType === 'github' &&
           <GithubRepoSelector
-            onConfirm={ onConfirm }
             projectName={ projectName }
             installed={ installed }
             pkg={ packageInfo }
@@ -127,7 +130,6 @@ export default function PackageInstallWindow({ selectedPackage, onConfirm, onCan
         {
           packageType === 'url' &&
           <UrlInstallField
-            onConfirm={onConfirm}
             projectName={projectName}
             installed={installed}
             pkg={ packageInfo }
@@ -161,19 +163,30 @@ export default function PackageInstallWindow({ selectedPackage, onConfirm, onCan
         <Button
           onClick={
              async () => {
-               await onConfirm(projectName, packageSpec, deployTargets);
+               setLoading(true);
+
+               try {
+                 await onConfirm(projectName, packageSpec, deployTargets);
+               } catch(e) {
+                 setLoading(false);
+               }
+
+               setLoading(false);
+
              }
            }
            className={
-             cn("get-package-button", {
-               'btn-success': true
-               // 'loading': loadingTags
+             cn("install-package-button", {
+               'btn-success': true,
+               'loading': loading
              })
            }
            disabled={
              !isValidProjectName(projectName) || !packageSpec || !deployTargets.length 
            }>
-           Deploy Package
+           {
+             loading ? <i className="install-package-status-icon fa fa-spinner fa-spin" /> : 'Install Package'
+           }
         </Button>
         <Button
           onClick={ onCancel }

src/functions/api/instance/getComponents.js

@@ -3,7 +3,7 @@ import queryInstance from '../queryInstance';
 
 // this 'addMetadata' logic probably belongs in src/functions/instance
 // by convention
-function addMetadata(fileTree, path, rootDir) {
+function addMetadata(fileTree, path, rootDir, readOnly=false) {
 
   if (!fileTree || !fileTree.entries) {
     return;
@@ -28,8 +28,9 @@ function addMetadata(fileTree, path, rootDir) {
     entry.project = project;
     entry.path = newPath;
     entry.key = uuid();
+    entry.readOnly = readOnly || !!entry.package;
 
-    addMetadata(entry, newPath, rootDir);
+    addMetadata(entry, newPath, rootDir, entry.readOnly);
 
   };
 
@@ -43,7 +44,7 @@ export default async ({ auth, url }) => {
     url,
   });
 
-  addMetadata(fileTree, fileTree.name, fileTree.name);
+  addMetadata(fileTree, fileTree.name, fileTree.name, false);
 
   return fileTree;