Merge pull request #2449 from mlorb/ml-sci-4376

Add endpoints for lists of projects and experiments with filtering… [SCI-4376][SCI-4377]

app/assets/javascripts/dashboard/quick_start.js

@@ -1,9 +1,11 @@
-/* global dropdownSelector */
+/* global I18n dropdownSelector */
 /* eslint-disable no-param-reassign */
 
 var DasboardQuickStartWidget = (function() {
   var projectFilter = '#create-task-modal .project-filter';
   var experimentFilter = '#create-task-modal .experiment-filter';
+  var createTaskButton = '#create-task-modal .create-task-button';
+  var newProjectsVisibility = '#create-task-modal .new-projects-visibility';
 
   function initNewTaskModal() {
     $('.quick-start-widget .new-task').click(() => {
@@ -13,13 +15,84 @@ var DasboardQuickStartWidget = (function() {
     dropdownSelector.init(projectFilter, {
       singleSelect: true,
       closeOnSelect: true,
-      selectAppearance: 'simple'
+      selectAppearance: 'simple',
+      optionLabel: (data) => {
+        if (data.value === 0) {
+          return `<i class="fas fa-plus"></i>
+                  <span class="create-new">${I18n.t('dashboard.create_task_modal.filter_create_new')}</span>
+                  <span>"${data.label}"</span>`;
+        }
+        return data.label;
+      },
+      onSelect: () => {
+        var selectedValue = dropdownSelector.getValues(projectFilter);
+        // Toggle project visibility button
+        if (selectedValue === '0') {
+          $(newProjectsVisibility).show();
+        } else {
+          $(newProjectsVisibility).hide();
+        }
+        // Enable/disable experiment filter
+        if (selectedValue >= 0) {
+          dropdownSelector.enableSelector(experimentFilter);
+        } else {
+          dropdownSelector.disableSelector(experimentFilter);
+        }
+        dropdownSelector.clearData(experimentFilter);
+      }
     });
 
     dropdownSelector.init(experimentFilter, {
       singleSelect: true,
       closeOnSelect: true,
-      selectAppearance: 'simple'
+      selectAppearance: 'simple',
+      optionLabel: (data) => {
+        if (data.value === 0) {
+          return `<i class="fas fa-plus"></i>
+                  <span class="create-new">${I18n.t('dashboard.create_task_modal.filter_create_new')}</span>
+                  <span>"${data.label}"</span>`;
+        }
+        return data.label;
+      },
+      ajaxParams: (params) => {
+        if (dropdownSelector.getValues(projectFilter) === '0') {
+          params.project = {
+            name: dropdownSelector.getData(projectFilter)[0].label,
+            visibility: $('input[name="projects-visibility-selector"]:checked').val()
+          };
+        } else {
+          params.project = { id: dropdownSelector.getValues(projectFilter) };
+        }
+        return params;
+      },
+      onSelect: () => {
+        var selectedValue = dropdownSelector.getValues(experimentFilter);
+        if (selectedValue >= 0) {
+          $(createTaskButton).removeAttr('disabled');
+        } else {
+          $(createTaskButton).attr('disabled', true);
+        }
+      }
+    });
+
+    $(createTaskButton).click(() => {
+      var params = {};
+      if (dropdownSelector.getValues(projectFilter) === '0') {
+        params.project = {
+          name: dropdownSelector.getData(projectFilter)[0].label,
+          visibility: $('input[name="projects-visibility-selector"]:checked').val()
+        };
+      } else {
+        params.project = { id: dropdownSelector.getValues(projectFilter) };
+      }
+      if (dropdownSelector.getValues(experimentFilter) === '0') {
+        params.experiment = { name: dropdownSelector.getData(experimentFilter)[0].label };
+      } else {
+        params.experiment = { id: dropdownSelector.getValues(experimentFilter) };
+      }
+      $.post($(createTaskButton).data('ajaxUrl'), params, function(data) {
+        window.location.href = data.my_module_path;
+      });
     });
   }
 

app/assets/stylesheets/dashboard/create_task_modal.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable SelectorDepth QualifyingElement NestingDepth
+
 #create-task-modal {
   .modal-dialog {
     width: 360px;
@@ -21,6 +23,56 @@
       }
     }
 
+    .dropdown-selector-container {
+      .create-new {
+        padding: 0 5px;
+      }
+    }
+
+    .down-arrow {
+      background-color: $color-white;
+      box-shadow: -4px 4px 0 $color-black;
+      display: inline-block;
+      height: 38px;
+      margin: 0 6px 24px 14px;
+      opacity: .2;
+      width: 18px;
+    }
+
+    .down-arrow::before {
+      border-bottom: 6px solid transparent;
+      border-left: 8px solid $color-black;
+      border-top: 6px solid transparent;
+      content: "";
+      height: 0;
+      left: 40px;
+      position: absolute;
+      top: 185px;
+      width: 0;
+    }
+
+    .project-visibility-container {
+      display: inline-block;
+    }
+
+    .project-visibility-title {
+      @include font-small;
+      display: inline-block;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+
+    .sci-toggles-group {
+      .sci-toggle-item {
+        width: 143px;
+      }
+
+      .sci-toggle-item-label {
+        margin-left: -143px;
+        width: 143px;
+      }
+    }
+
     .modal-footer {
       text-align: center;
     }

app/controllers/dashboard/quick_start_controller.rb

@@ -2,7 +2,9 @@
 
 module Dashboard
   class QuickStartController < ApplicationController
-    before_action :load_project, only: :create_task
+    include InputSanitizeHelper
+
+    before_action :load_project, only: %i(create_task experiment_filter)
     before_action :load_experiment, only: :create_task
     before_action :check_task_create_permissions, only: :create_task
 
@@ -17,10 +19,34 @@ module Dashboard
       end
     end
 
+    def project_filter
+      projects = current_team.projects.search(current_user, false, params[:query], 1, current_team).select(:id, :name)
+      projects = projects.map { |i| { value: i.id, label: escape_input(i.name) } }
+      if (projects.map { |i| i[:label] }.exclude? params[:query]) && params[:query].present?
+        projects = [{ value: 0, label: params[:query] }] + projects
+      end
+      render json: projects, status: :ok
+    end
+
+    def experiment_filter
+      if create_project_params.present? && params[:query].present?
+        experiments = [{ value: 0, label: params[:query] }]
+      elsif @project
+        experiments = @project.experiments
+                              .search(current_user, false, params[:query], 1, current_team)
+                              .select(:id, :name)
+        experiments = experiments.map { |i| { value: i.id, label: escape_input(i.name) } }
+        if (experiments.map { |i| i[:label] }.exclude? params[:query]) && params[:query].present?
+          experiments = [{ value: 0, label: params[:query] }] + experiments
+        end
+      end
+      render json: experiments || [], status: :ok
+    end
+
     private
 
     def create_project_params
-      params.require(:project).permit(:name)
+      params.require(:project).permit(:name, :visibility)
     end
 
     def create_experiment_params

app/services/create_project_service.rb

@@ -9,7 +9,6 @@ class CreateProjectService
 
   def call
     ActiveRecord::Base.transaction do
-      @params[:visibility] ||= 'hidden'
       @params[:created_by] = @user
       @params[:last_modified_by] = @user
 

app/views/dashboards/_create_task_modal.html.erb

@@ -14,20 +14,40 @@
           <div class="select-block">
             <label><%= t("dashboard.create_task_modal.project") %></label>
             <select class="project-filter"
-                    data-ajax-url=""
+                    data-ajax-url="<%= dashboard_quick_start_project_filter_path %>"
                     data-placeholder="<%= t("dashboard.create_task_modal.project_placeholder") %>"></select>
           </div>
+          <div class="new-projects-visibility" style="display: none;">
+            <div class="down-arrow"></div>
+            <div class="project-visibility-container">
+              <div class="project-visibility-title"><%= t("dashboard.create_task_modal.project_visibility_label") %></div>
+              <div class="sci-toggles-group" data-toggle="buttons">
+                <input type="radio" name="projects-visibility-selector" class="sci-toggle-item" value="hidden" checked="checked">
+                <label class="sci-toggle-item-label">
+                  <%= t("dashboard.create_task_modal.project_visibility_members") %>
+                </label>
+                <input type="radio" name="projects-visibility-selector" class="sci-toggle-item" value="visible">
+                <label class="sci-toggle-item-label">
+                  <%= t("dashboard.create_task_modal.project_visibility_all") %>
+                </label>
+              </div>
+            </div>
+          </div>
           <div class="select-block">
             <label><%= t("dashboard.create_task_modal.experiment") %></label>
             <select class="experiment-filter"
-                    data-ajax-url=""
+                    data-ajax-url="<%= dashboard_quick_start_experiment_filter_path %>"
                     data-disable-on-load="true"
                     data-disable-placeholder="<%= t("dashboard.create_task_modal.experiment_disabled_placeholder") %>"
                     data-placeholder="<%= t("dashboard.create_task_modal.experiment_placeholder") %>"></select>
           </div>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" data-dismiss="modal" disabled>
+          <button type="button"
+                  class="create-task-button btn btn-primary"
+                  data-ajax-url="<%= dashboard_quick_start_create_task_path %>"
+                  data-dismiss="modal"
+                  disabled>
             <%= t("dashboard.create_task_modal.create_task") %>
           </button>
         </div>

config/locales/dashboard/en.yml

@@ -52,8 +52,12 @@ en:
       title: "Create a new Task"
       description: "Simply type in the fields bellow to find or create space for your new task to live in"
       project: "Project"
+      project_visibility_label: "Visible to"
+      project_visibility_members: "Project members"
+      project_visibility_all: "All team members"
       experiment: "Experiment"
       project_placeholder: "Enter project name (New or Existing)"
       experiment_placeholder: "Enter experiment name (New or Existing)"
       experiment_disabled_placeholder: "Select Project to enable Experiments"
+      filter_create_new: "Create"
       create_task: "Create Task"

config/routes.rb

@@ -247,6 +247,8 @@ Rails.application.routes.draw do
       end
 
       namespace :quick_start, module: :dashboard, controller: :quick_start do
+        get :project_filter
+        get :experiment_filter
         post :create_task
       end