Merge pull request #3425 from artoscinote/ma_SCI_5099

Fix styling, functionality issues with invite users modal [SCI-5099]

app/assets/javascripts/users/settings/teams/invite_users_modal.js

@@ -84,6 +84,10 @@
           inviteBtn.hide();
           inviteWithRoleDiv.show();
           break;
+        case 'invite_new_members':
+          inviteBtn.show();
+          inviteWithRoleDiv.hide();
+          break;
         default:
           break;
       }

app/assets/stylesheets/themes/scinote.scss

@@ -1317,6 +1317,8 @@ body > .loading-overlay {
 }
 
 .modal-invite-users {
+  overflow: hidden;
+
   .bootstrap-tagsinput {
     min-width: 450px;
     width: 100%;
@@ -1343,13 +1345,27 @@ body > .loading-overlay {
     }
   }
 
-  .dropdown-selector-container {
-    margin-bottom: 20px;
-  }
-
   .g-recaptcha {
     margin-top: 20px;
   }
+
+  h4 {
+    font-size: 14px;
+    margin-bottom: 5px;
+  }
+
+  .select-container--with-blank {
+    overflow: hidden;
+
+    .search-field::placeholder {
+      color: $color-black;
+      opacity: 1;
+    }
+
+    .search-field:focus::placeholder {
+      opacity: 0;
+    }
+  }
 }
 
 // Disable textarea resizing throughout application
@@ -1493,13 +1509,34 @@ a.disabled-with-click-events {
 }
 
 .form-select {
-  border: 1px solid $color-silver-chalice;
+  position: relative;
-  border-radius: 4px;
+
-  color: $color-emperor;
+  select {
-  display: block;
+    appearance: none;
-  font-size: 14px;
+    border: 1px solid $color-silver-chalice;
-  min-height: 36px;
+    border-radius: 4px;
-  outline: 0;
+    color: $color-emperor;
-  padding: 8px 42px 3px 3px;
+    display: block;
-  width: 100%;
+    font-size: 14px;
+    min-height: 36px;
+    outline: 0;
+    padding: 8px 42px 3px 3px;
+    width: 100%;
+  }
+
+  &::after {
+    color: $color-silver-chalice;
+    content: "\f0d7";
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    height: 100%;
+    padding: 12px 8px;
+    pointer-events: none;
+    position: absolute;
+    right: -6px;
+    text-align: center;
+    top: -6px;
+    width: 10%;
+    z-index: 1;
+  }
 }

app/controllers/users/invitations_controller.rb

@@ -165,7 +165,10 @@ module Users
                           .joins(:user_teams)
                           .where('user_teams.role': UserTeam.roles[:admin])
                           .distinct
-                          .select { |team| can_invite_team_users?(team) }
+
+      teams = teams.where_attributes_like(:name, params[:query]) if params[:query].present?
+
+      teams.select { |team| can_invite_team_users?(team) }
 
       render json: teams.map { |t| { value: t.id, label: t.name } }.to_json
     end

app/views/shared/_invite_users_modal.html.erb

@@ -23,6 +23,7 @@
 text_title ||= nil
 text_invite_heading ||= nil
 invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
+invite_with_team_selector = type.in?(%w(invite_new_members invite_with_team_selector invite_with_team_selector_and_role))
 %>
 <div
   class="modal modal-invite-users"
@@ -71,13 +72,26 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
             <% end %>
           </p>
 
-          <div class="user-selector">
+          <% if type == 'invite_new_members' %>
-            <select class="emails-input" multiple data-role="tags-input" name="emails[]">
+            <p><%= t('invite_users.new_members.description') %></p>
-            </select>
+            <h4 class="heading">
-            <h4><%= t('invite_users.input_subtitle') %></h4>
+              <span><%= t('invite_users.new_members.input_label') %></span>
-          </div>
+            </h4>
+            <div class="emails-selector" >
+              <div class="select-container">
+                <select name="emails[]" class="emails-input"></select>
+              </div>
+              <p><small><%= t('invite_users.new_members.input_subtitle') %></small></p>
+            </div>
+          <% else %>
+            <div class="user-selector">
+              <select class="emails-input" multiple data-role="tags-input" name="emails[]">
+              </select>
+              <h4><%= t('invite_users.input_subtitle') %></h4>
+            </div>
+          <% end %>
 
-          <% if current_user && type.in?(['invite_with_team_selector', 'invite_with_team_selector_and_role']) %>
+          <% if current_user && invite_with_team_selector %>
             <% # Only allow inviting to teams where user is admin %>
             <div class="team-selector">
               <h4 class="heading">
@@ -98,11 +112,13 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
                   <h4 class="heading">
                     <span><%= t('invite_users.select_team_role') %></span>
                   </h4>
-                  <%= select_tag "role",
+                  <div class="form-select">
-                    options_for_select(UserTeam.roles.keys
+                    <%= select_tag "role",
-                      .map { |k| [k.humanize + (k == 'normal_user' ? " (#{t('invite_users.default')})" : ''), k] }, 'normal_user'),
+                      options_for_select(UserTeam.roles.keys
-                    disabled: true, class: "role-input from-control form-select"
+                        .map { |k| [k.humanize + (k == 'normal_user' ? " (#{t('invite_users.default')})" : ''), k] }, 'normal_user'),
-                  %>
+                      disabled: true, class: "role-input from-control"
+                    %>
+                  </div>
                 </div>
               </div>
             </div>

config/locales/en.yml

@@ -2209,6 +2209,11 @@ en:
     no_team:
       title: "Invite users to SciNote"
       heading: "Invite more people to start using SciNote."
+    new_members:
+        description: "Invite people to your organization to start using SciNote"
+        input_placeholder: "jsmith@someemail.com"
+        input_label: "New member emails"
+        input_subtitle: "You can enter one or more emails. To confirm each one press the ENTER key."
     input_subtitle: "You can enter one or more emails. To confirm each one press the ENTER key."
     invite_to_team_heading: "Invite users to my team:"
     invite_btn: "Invite members"