[AT] - added remove site modal, controller, and tests (#64)

css/overrides.css

@@ -211,4 +211,13 @@ h3 {
 
 .site-icon {
     width: 50%;
+}
+
+.remove-option label {
+    white-space: pre-wrap;
+}
+
+.remove-option input {
+    position: relative;
+    top: -1.5rem;
 }

js/ddev-shell.js

@@ -123,11 +123,14 @@ const restart = (path, callback, errorCallback) => {
 /**
  * wrapper for `ddev remove`
  * @param path {string} - path to execute command in
- * @param callback {function} - function called on stdout update
- * @param errorCallback {function} - function called on error
+ * @param shouldRemoveData {boolean} - if data should be removed as well as project containers
  */
-const remove = (path, callback, errorCallback) => {
-    ddevShell('remove', null, path, callback, errorCallback, true);
+const remove = (path, shouldRemoveData) => {
+    var args = shouldRemoveData ? ['-j', '--remove-data'] : ['-j'];
+    var promise = new Promise(function(resolve, reject) {
+        ddevShell('remove', args, path, resolve, reject, false);
+    });
+    return promise;
 };
 
 /**

js/remove-project.js

@@ -0,0 +1,129 @@
+var bootstrapModal = require('./bootstrap-modal');
+var ddevShell = require('./ddev-shell');
+
+/**
+ * Remove Project - processes form input and calls ddevShell.remove
+ * @formData {object} - serialzed formdata containing path and data removal option
+ */
+function removeProject(formData){
+    try {
+        var path = formData.filter(function(input){
+            return input.name === 'projectPath'
+        });
+        var data = formData.filter(function(input){
+            return input.name === 'removeOptions'
+        });
+
+        displayLoadingState();
+
+        var removePath = path[0].value;
+        var removeData = data[0].value.includes('Database');
+
+        return  ddevShell.remove(removePath, removeData)
+            .then(function(){
+                removeCompleted('Project Successfully Removed.');
+            })
+            .catch(function(err){
+                removeCompleted('Could Not Remove Project ('+err+')');
+            });
+    } catch(err) {
+        removeCompleted('Invalid Input Passed To Remove ('+err+') payload:'+ JSON.stringify(formData) );
+    }
+}
+
+/**
+ * display loading spinner while waiting for promise to fulfill
+ */
+function displayLoadingState(){
+    $('.loading-overlay', '#removeModal').css('display','flex');
+    $('.remove-project-button').addClass('btn-secondary').removeClass('btn-danger');
+}
+
+/**
+ * Dismiss modal and show success or error result
+ * @param message
+ */
+function removeCompleted(message){
+    alert(message);
+    $('#removeModal').modal('hide');
+}
+
+/**
+ * Resets remove modal to defaults
+ */
+function resetRemoveModal() {
+    $('.remove-project-button').removeClass('btn-secondary').addClass('btn-danger');
+    $('#removeContainers').prop('checked',true).trigger('change');
+    $('#projectPath, #removeModal').val('');
+    $('#removeName').text('');
+    $('.loading-overlay', '#removeModal').css('display','none');
+}
+
+/**
+ * Updates remove modal content with current project data and shows modal
+ * @param projectPath {string} - path of project to remove
+ */
+function showRemoveModal(projectPath, projectName) {;
+    resetRemoveModal();
+    $('#removeName').text(projectName);
+    $('#projectPath, #removeModal').val(projectPath);
+    $('#removeModal').modal();
+}
+
+var removeProjectModalBody =
+    `<div class="loading-overlay">
+            <div>
+                <i class="fa fa-spinner fa-spin loading-spinner" style="font-size:150px"></i>
+            </div>
+            <div class="loading-text">Removing...</div>
+        </div>
+        <div class="error-overlay">
+            <div>
+                <i class="fa fa-exclamation-triangle error-icon" style="font-size:50px"></i>
+            </div>
+            <div class="error-text">Something Went Wrong</div>
+            <div class="btn btn-primary">OK</div>
+        </div>
+    <h2>Please select a removal option for project "<span id='removeName'></span>"</h2>
+    <div>The project files will *not* be removed from your system.</div>
+    <hr/>
+    <form class="remove-options">
+        <input id='projectPath' name="projectPath" type="hidden">
+        <div class="remove-option">
+            <input type="radio" name="removeOptions" id="removeContainers" value="Project from Dashboard" checked/>
+            <label for="removeContainers">Remove Project
+(ddev rm)</label>
+        </div>
+        <div class="remove-option">
+            <input type="radio" name="removeOptions" id="removeContainersAndData" value="Project from Dashboard AND Project Database"/>
+            <label for="removeContainersAndData">Remove Project AND Project Database 
+(ddev rm --remove-data)</label>
+        </div>
+    </form>
+    <hr/>
+    `;
+
+var removeProjectModalFooter =
+    `<div class="remove-button-container">
+        <div class="btn btn-danger pull-right remove-project-button">Remove <span class="removal-items">Project from Dashboard</span></div>
+    </div>`;
+
+/**
+ * Initialization - hook UI and generate markup.
+ */
+function init(){
+    $('body').append(bootstrapModal.createModal('removeModal','Remove Project',removeProjectModalBody,removeProjectModalFooter));
+    $(document).on('click', '.removebtn', function () {
+        showRemoveModal($(this).data('projectPath'),$(this).data('projectName'));
+    });
+    $('input[type=radio][name=removeOptions]').change(function() {
+        $('.removal-items').text(this.value);
+    });
+    $('.remove-project-button').click(function(){
+        if($('.remove-project-button').hasClass('btn-danger')){
+            removeProject($('.remove-options').serializeArray());
+        }
+    });
+}
+
+module.exports.init = init;

js/site-cards.js

@@ -55,7 +55,8 @@ function createCard(site) {
               </button>
               <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                 <a class="dropdown-item restartbtn" href="#">Restart</a>
-                <a class="dropdown-item" onclick='electron.shell.showItemInFolder("` + site.approot + `")' href="#">Browse Local Files</a>
+                <a class="dropdown-item removebtn" href="#" data-project-name="`+site.name+`" data-project-path="` + site.approot + `">Remove Project</a>
+                <a class="dropdown-item showfilesbtn" data-app-path="`+site.approot+`" href="#">Browse Local Files</a>
               </div>
             </div>
         </div>
@@ -79,7 +80,6 @@ function init(){
     $(document).on('click', '.stopbtn', function () {
         console.log('stopping');
         ddevShell.stop($(this).closest('.column').data('path'), function (data) {
-            console.log(data)
         }, function (error) {
             console.log(error)
         });
@@ -92,6 +92,10 @@ function init(){
             console.log(error)
         });
     });
+    $(document).on('click', '.showfilesbtn', function () {
+        console.log($(this).data('appPath'));
+        electron.shell.showItemInFolder($(this).data('appPath'));
+    });
 }
 
 module.exports.init = init;

js/ui.js

@@ -7,6 +7,7 @@ var updater = require('./js/distro-updater');
 var siteCreator = require('./js/cms-installer');
 var siteCard = require('./js/site-cards');
 var describeSite = require('./js/describe-site');
+var removeProject = require('./js/remove-project');
 
 /**
  * bootstraps application by initializing modules, downloading distros, starting ddev list polling
@@ -15,6 +16,7 @@ function init() {
     siteCard.init();
     siteCreator.init();
     describeSite.init();
+    removeProject.init();
     updater.updateDistros();
     setInterval(fetchState, 1000);
 }