Jkmarx/ui tool launch input (#2804)

* Update tool launch name styling. * Update to display name. * Update service to display name. * Add unit tests. * Update error message. * Fix unit test and conditional logic. * Update popover text with whys. * Fix typo.
refinery-platform · Jun 6, 2018 · c7a4dd6 · c7a4dd6
1 parent 53fb041
commit c7a4dd6
Show file tree

Hide file tree

Showing 14 changed files with 251 additions and 7 deletions.
diff --git a/refinery/ui/source/js/dashboard/partials/history-card.html b/refinery/ui/source/js/dashboard/partials/history-card.html
@@ -28,7 +28,8 @@ <h4 class="emphasized text-align-center m-t-1-5">
              <span ng-if="!tool.owner.full_name">
                {{ tool.owner.username }}
              </span>
-             launched an analysis: {{ tool.name }}
+             launched an analysis: {{ tool.display_name }} <span ng-if="!tool
+             .display_name">{{ tool.name }}</span>
            </a>
          </span>
          <span class="p-l-1-2" ng-if="tool.tool_definition.tool_type === 'VISUALIZATION'">
@@ -40,7 +41,9 @@ <h4 class="emphasized text-align-center m-t-1-5">
              <span ng-if="!tool.owner.full_name">
                {{ tool.owner.username }}
              </span>
-              launched a visualization tool: {{ tool.name }}.
+              launched a visualization tool: {{ tool.display_name }} <span
+             ng-if="!tool
+             .display_name">{{ tool.name }}</span>
            </a>
          </span>
        </li>

diff --git a/refinery/ui/source/js/data-set-visualization/partials/visualization.html b/refinery/ui/source/js/data-set-visualization/partials/visualization.html
@@ -20,7 +20,7 @@
         </a>
       </div>
       <div class="col-md-5 analysis-name">
-        <a class="analysis-header" ng-click="order('name')">
+        <a class="analysis-header" ng-click="order('display_name')">
           <strong>Name</strong>
         </a>
       </div>
@@ -62,7 +62,8 @@
             </span>
           </div>
           <div class="col-md-5 analysis-name">
-            {{ vis.name }}
+            {{ vis.display_name }}
+            <span ng-if="!vis.display_name">{{ vis.name }}</span>
           </div>
 
           <div class="col-md-2">

diff --git a/refinery/ui/source/js/tool-launch/ctrls/tool-launch-name-ctrl.js b/refinery/ui/source/js/tool-launch/ctrls/tool-launch-name-ctrl.js
@@ -0,0 +1,71 @@
+/**
+ * Tool Launch Name Ctrl
+ * @namespace ToolLaunchNameCtrl
+ * @desc Component controller for launch name input
+ * @memberOf refineryApp.refineryToolLaunch
+ */
+(function () {
+  'use strict';
+
+  angular
+    .module('refineryApp')
+    .controller('ToolLaunchNameCtrl', ToolLaunchNameCtrl);
+
+  ToolLaunchNameCtrl.$inject = [
+    '$log',
+    '$scope',
+    '_',
+    'settings',
+    'toolParamsService',
+    'toolSelectService'
+  ];
+
+  function ToolLaunchNameCtrl (
+    $log,
+    $scope,
+    _,
+    settings,
+    toolParamsService,
+    toolSelectService
+  ) {
+    var vm = this;
+    vm.form = { name: '' };
+    vm.selectedTool = {};
+    vm.toolType = '';
+    vm.updateToolLaunchName = updateToolLaunchName;
+    vm.userName = settings.djangoApp.userName;
+
+    /*
+     * ---------------------------------------------------------
+     * Methods Definitions
+     * ---------------------------------------------------------
+     */
+    /**
+    /**
+     * @name updateToolLaunchName
+     * @desc  view method which updates tool launch name when input changes
+     * @memberOf refineryApp.refineryToolLaunch.
+    **/
+    function updateToolLaunchName (inputName) {
+      toolParamsService.toolEditForm.display_name = inputName;
+    }
+  /*
+   * ---------------------------------------------------------
+   * Watchers
+   * ---------------------------------------------------------
+   */
+    $scope.$watchCollection(
+      function () {
+        return toolSelectService.selectedTool;
+      },
+      function () {
+        if (!_.isEmpty(toolSelectService.selectedTool) &&
+          toolSelectService.selectedTool.tool_type.length) {
+          angular.copy(toolSelectService.selectedTool, vm.selectedTool);
+          var lCToolType = toolSelectService.selectedTool.tool_type.toLowerCase();
+          vm.toolType = lCToolType[0].toUpperCase() + lCToolType.slice(1, lCToolType.length);
+        }
+      }
+    );
+  }
+})();
diff --git a/refinery/ui/source/js/tool-launch/ctrls/tool-launch-name-ctrl.spec.js b/refinery/ui/source/js/tool-launch/ctrls/tool-launch-name-ctrl.spec.js
@@ -0,0 +1,44 @@
+(function () {
+  'use strict';
+
+  describe('Controller: Tool Launch Name Ctrl', function () {
+    var ctrl;
+    var scope;
+    var service;
+
+    beforeEach(module('refineryApp'));
+    beforeEach(module('refineryToolLaunch'));
+    beforeEach(inject(function (
+      $rootScope,
+      $controller,
+      toolParamsService
+    ) {
+      scope = $rootScope.$new();
+      ctrl = $controller('ToolLaunchNameCtrl', {
+        $scope: scope
+      });
+      service = toolParamsService;
+    }));
+
+    it('Tool Select ctrl should exist', function () {
+      expect(ctrl).toBeDefined();
+    });
+
+    it('Data & UI displays variables should exist for views', function () {
+      expect(ctrl.form.name).toEqual('');
+      expect(ctrl.selectedTool).toEqual({});
+      expect(ctrl.toolType).toEqual('');
+    });
+
+    it('updateToolLaunchName is a method', function () {
+      expect(angular.isFunction(ctrl.updateToolLaunchName)).toBe(true);
+    });
+
+    it('updateToolLaunchName updates correct service', function () {
+      var testName = 'Tool Launch Name';
+      expect(service.toolEditForm.display_name).toEqual('');
+      ctrl.updateToolLaunchName(testName);
+      expect(service.toolEditForm.display_name).toEqual(testName);
+    });
+  });
+})();
diff --git a/refinery/ui/source/js/tool-launch/directives/tool-launch-name.js b/refinery/ui/source/js/tool-launch/directives/tool-launch-name.js
@@ -0,0 +1,17 @@
+/**
+ * Tool Launch Name Component
+ * @namespace rpToolLaunchName
+ * @desc Component for a form to add display name for tool
+ * @memberOf refineryApp.refineryToolLaunch
+ */
+(function () {
+  'use strict';
+  angular
+    .module('refineryToolLaunch')
+    .component('rpToolLaunchName', {
+      controller: 'ToolLaunchNameCtrl',
+      templateUrl: ['$window', function ($window) {
+        return $window.getStaticUrl('partials/tool-launch/partials/tool-launch-name.html');
+      }]
+    });
+})();
diff --git a/refinery/ui/source/js/tool-launch/directives/tool-launch-name.spec.js b/refinery/ui/source/js/tool-launch/directives/tool-launch-name.spec.js
@@ -0,0 +1,30 @@
+(function () {
+  'use strict';
+
+  describe('rpToolLaunchName component unit test', function () {
+    beforeEach(module('refineryApp'));
+    beforeEach(module('refineryToolLaunch'));
+
+    var directiveElement;
+    beforeEach(inject(function (
+      $compile,
+      $rootScope,
+      $templateCache,
+      $window
+    ) {
+      $templateCache.put(
+        $window.getStaticUrl('partials/tool-launch/partials/tool-launch-name.html'),
+        '<div id="tool-launch-name"></div>'
+      );
+      var scope = $rootScope.$new();
+      var template = '<rp-tool-launch-name></rp-tool-launch-name>';
+      directiveElement = $compile(template)(scope);
+      scope.$digest();
+    }));
+
+    it('generates the appropriate HTML', function () {
+      expect(directiveElement.html()).toContain('tool-launch-name');
+      expect(directiveElement.html()).toContain('</div>');
+    });
+  });
+})();
diff --git a/refinery/ui/source/js/tool-launch/partials/tool-launch-name.html b/refinery/ui/source/js/tool-launch/partials/tool-launch-name.html
@@ -0,0 +1,61 @@
+<div
+  class="panel-group"
+  id="tool-info-display"
+  role="tablist"
+  aria-multiselectable="true">
+
+  <div class="panel panel-default">
+    <div
+      id="tool-launch-body"
+      class="panel-collapse"
+      role="tabpanel"
+      aria-labelledby="tool-body">
+      <div class="panel-heading" role="tab">
+        <h4 class="panel-title">
+          {{ $ctrl.toolType }}
+          Name
+          &nbsp
+           <a
+            popover-placement="right"
+            uib-popover="Update the {{ $ctrl.toolType }} display name. The
+            display name needs to be unique because it will help you to find a
+            specific visualization later."
+            popover-title="Display Name"
+            popover-trigger="'outsideClick'"
+            popover-append-to-body="true"
+            tabindex="0">
+              <i class="fa fa-question-circle info-icon icon-only"></i>
+          </a>
+        </h4>
+      </div>
+      <div class="panel-body">
+        <form
+          id="tool-launch-name"
+          name="toolLaunchNameForm"
+          class="navbar-form">
+        <input
+          autofocus
+          class="form-control"
+          placeholder="{{ $ctrl.selectedTool.name }}-creation_date-{{ $ctrl.userName }}"
+          ng-model="$ctrl.form.name"
+          ng-change="$ctrl.updateToolLaunchName($ctrl.form.name)"
+          name="toolLaunchName"
+          ng-maxlength="32"
+          ng-minlength="3">
+        </form>
+        <div
+          class='p-t-1-2 text-warning'
+          ng-show="toolLaunchNameForm.toolLaunchName.$error.minlength">
+          <i class="fa fa-warning" aria-hidden="true"></i>
+          Names must be at least 3 characters long.
+        </div>
+       <div
+          class='p-t-1-2 text-warning'
+          ng-show="toolLaunchNameForm.toolLaunchName.$error.maxlength">
+          <i class="fa fa-warning" aria-hidden="true"></i>
+          Names must be shorter than 32 characters long.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/refinery/ui/source/js/tool-launch/partials/tool-launch-status.html b/refinery/ui/source/js/tool-launch/partials/tool-launch-status.html
@@ -9,7 +9,8 @@
           <i class="fa fa-times close" aria-hidden="true"></i>
         </a>
         <i class="{{toolLaunch.type|toolTypeIcon}} p-r-1-4" aria-hidden="true"></i>
-        {{ toolLaunch.name }} launched successfully.
+        {{ toolLaunch.display_name }}
+        <span ng-if="!toolLaunch.display_name">{{ toolLaunch.name }}</span> launched successfully.
         <div ng-if="toolLaunch.type === 'workflow'">
           <a href="#/analyses">
             <i class="fa fa-link p-r-1-2"></i>

diff --git a/refinery/ui/source/js/tool-launch/services/tool-launch-service.js b/refinery/ui/source/js/tool-launch/services/tool-launch-service.js
@@ -147,6 +147,9 @@
       launchConfig.tool_definition_uuid = toolService.selectedTool.uuid;
       launchConfig.file_relationships = generateFileStr();
       launchConfig.parameters = paramsService.paramsForm;
+      if (paramsService.toolEditForm.display_name) {
+        launchConfig.display_name = paramsService.toolEditForm.display_name;
+      }
     }
 
     // helper method which inserts commas between sets )(,][,)[,](

diff --git a/refinery/ui/source/js/tool-launch/services/tool-launch-status-service.js b/refinery/ui/source/js/tool-launch/services/tool-launch-status-service.js
@@ -42,11 +42,12 @@
           name: toolLaunch.name,
           container_url: toolLaunch.container_url,
           status: toolStatus,
+          display_name: toolLaunch.display_name
         });
       } else {
         toolLaunches.unshift({
           uuid: toolLaunch.config.data.tool_definition_uuid,
-          msg: 'Tool launch failed.',
+          msg: toolLaunch.data,
           status: toolStatus,
           apiStatus: toolLaunch.status,
           apiStatusMsg: toolLaunch.statusText,

diff --git a/refinery/ui/source/js/tool-launch/services/tool-launch-status-service.spec.js b/refinery/ui/source/js/tool-launch/services/tool-launch-status-service.spec.js
@@ -22,7 +22,8 @@
         config: { data: { tool_definition_uuid: mockUuid } },
         status: '500',
         statusText: 'Server Error',
-        creation_time: Date.now()
+        creation_time: Date.now(),
+        data: 'Tool launch failed.'
       };
       service = toolLaunchStatusService;
     }));

diff --git a/refinery/ui/source/js/tool-launch/services/tool-params-service.js b/refinery/ui/source/js/tool-launch/services/tool-params-service.js
@@ -21,6 +21,7 @@
      * @var {object} paramsForm
     */
     var paramsForm = {};
+    var toolEditForm = { display_name: '' };
     /**
      * Variable sourced from selectedTool and used generate Parameters panel
      * @var {array} toolParams
@@ -30,6 +31,7 @@
     var service = {
       paramsForm: paramsForm,
       refreshToolParams: refreshToolParams,
+      toolEditForm: toolEditForm,
       toolParams: toolParams
     };
 

diff --git a/refinery/ui/source/js/tool-launch/views/tool-display.html b/refinery/ui/source/js/tool-launch/views/tool-display.html
@@ -18,6 +18,7 @@ <h2>
     id="tool-panel-body"
     ng-if="$ctrl.isToolSelected">
     <rp-tool-info-display></rp-tool-info-display>
+    <rp-tool-launch-name></rp-tool-launch-name>
     <rp-input-control></rp-input-control>
     <rp-tool-params></rp-tool-params>
   </div>

diff --git a/refinery/ui/source/styles/file-browser.less b/refinery/ui/source/styles/file-browser.less
@@ -244,6 +244,14 @@
       padding: .25em;
     }
   }
+  #tool-launch-name {
+    padding: .3em .5em .6em 0;
+    float: left;
+    width: 100%;
+    input {
+      width: 100%;
+    }
+  }
 }
 
 #assay-files-table {