From fb040bee07292392ba956c19b988100ccdb485cc Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Thu, 8 Jul 2021 16:10:20 +0200
Subject: [PATCH 1/4] Fix styling, functionality issues with invite users modal
 [SCI-5099]

---
 .../settings/teams/invite_users_modal.js      | 19 +++-
 app/assets/stylesheets/themes/scinote.scss    | 88 ++++++++++++++++---
 .../users/invitations_controller.rb           |  5 +-
 app/views/shared/_invite_users_modal.html.erb | 37 +++++---
 config/locales/en.yml                         |  5 ++
 5 files changed, 128 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/users/settings/teams/invite_users_modal.js b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
index f89a5deff..07eac5717 100644
--- a/app/assets/javascripts/users/settings/teams/invite_users_modal.js
+++ b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
@@ -26,11 +26,24 @@
     var teamSelectorDropdown = modal.find('[data-role=team-selector-dropdown]');
     var teamSelectorDropdown2 = $();
     var emailsInput = modal.find('.emails-input');
+    var emailTagsInput = modal.find('.email-tags-input');
     var teamsInput = modal.find('.teams-input');
     var roleInput = modal.find('.role-input');
     var recaptchaErrorMsgDiv = modal.find('#recaptcha-error-msg');
     var recaptchaErrorText = modal.find('#recaptcha-error-msg>span');
 
+    emailTagsInput.tagsinput({
+      maxTags: modal.data('max-tags')
+    });
+
+    emailTagsInput.on('change', function(e) {
+      if (emailTagsInput.val()) {
+        inviteBtn.removeAttr('disabled');
+      } else {
+        inviteBtn.attr('disabled', 'disabled');
+      }
+    });
+
     dropdownSelector.init(emailsInput, {
       delimiter: true,
       optionClass: 'users-dropdown-list',
@@ -84,6 +97,10 @@
           inviteBtn.hide();
           inviteWithRoleDiv.show();
           break;
+        case 'invite_new_members':
+          inviteBtn.show();
+          inviteWithRoleDiv.hide();
+          break;
         default:
           break;
       }
@@ -115,7 +132,7 @@
       // Click action
       modal.find('[data-action=invite]').off('click').on('click', function() {
         var data = {
-          emails: dropdownSelector.getValues(emailsInput),
+          emails: dropdownSelector.getValues(emailsInput) || emailTagsInput.val(),
           team_ids: dropdownSelector.getValues(teamsInput),
           role: roleInput.val(),
           'g-recaptcha-response': $('#recaptcha-invite-modal').val()
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index ab5d80afc..75e7cbc69 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1320,6 +1320,29 @@ body > .loading-overlay {
   .bootstrap-tagsinput {
     min-width: 450px;
     width: 100%;
+    border-color: $color-silver-chalice;
+
+    .tag {
+      color: $color-black;
+      font-weight: normal;
+      font-size: 12px;
+      line-height: 13px;
+      padding: 5px 8px;
+    }
+
+    [data-role="remove"] {
+      margin-left: 4px;
+
+      &::after {
+        content: "\f00d";
+        font-family: "Font Awesome 5 Free";
+        padding: 0px 2px;
+        font-weight: 900;
+        display: inline-block;
+        font-size: 12px;
+        opacity: .7;
+      }
+    }
   }
 
   .results-container .alert {
@@ -1343,13 +1366,31 @@ body > .loading-overlay {
     }
   }
 
-  .dropdown-selector-container {
-    margin-bottom: 20px;
-  }
-
   .g-recaptcha {
     margin-top: 20px;
   }
+
+  h4 {
+    font-size: 14px;
+    margin-bottom: 5px;
+  }
+
+  .tag.label.label-info {
+    background-color: $color-concrete;
+  }
+
+  .select-container--with-blank {
+    input.search-field::placeholder {
+      color: $color-black;
+      opacity: 1;
+    }
+
+    input.search-field:focus::placeholder {
+      opacity: 0;
+    }
+
+    overflow: hidden;
+  }
 }
 
 // Disable textarea resizing throughout application
@@ -1493,13 +1534,34 @@ a.disabled-with-click-events {
 }
 
 .form-select {
-  border: 1px solid $color-silver-chalice;
-  border-radius: 4px;
-  color: $color-emperor;
-  display: block;
-  font-size: 14px;
-  min-height: 36px;
-  outline: 0;
-  padding: 8px 42px 3px 3px;
-  width: 100%;
+  position: relative;
+
+  select {
+    border: 1px solid $color-silver-chalice;
+    border-radius: 4px;
+    color: $color-emperor;
+    display: block;
+    font-size: 14px;
+    min-height: 36px;
+    outline: 0;
+    padding: 8px 42px 3px 3px;
+    width: 100%;
+    appearance: none;
+  }
+
+  &:after {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    content: "\f0d7";
+    color: $color-silver-chalice;
+    padding: 12px 8px;
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    z-index: 1;
+    text-align: center;
+    width: 10%;
+    height: 100%;
+    pointer-events: none;
+  }
 }
diff --git a/app/controllers/users/invitations_controller.rb b/app/controllers/users/invitations_controller.rb
index af3b16aba..59c1216f7 100644
--- a/app/controllers/users/invitations_controller.rb
+++ b/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('name ILIKE ?', "%#{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
diff --git a/app/views/shared/_invite_users_modal.html.erb b/app/views/shared/_invite_users_modal.html.erb
index c92171852..5e5a96155 100644
--- a/app/views/shared/_invite_users_modal.html.erb
+++ b/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,25 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
             <% end %>
           </p>
 
-          <div class="user-selector">
-            <select class="emails-input" multiple data-role="tags-input" name="emails[]">
-            </select>
-            <h4><%= t('invite_users.input_subtitle') %></h4>
-          </div>
+          <% if type == 'invite_new_members' %>
+            <p><%= t('invite_users.new_members.description') %></p>
+            <h4 class="heading">
+              <span><%= t('invite_users.new_members.input_label') %></span>
+            </h4>
+            <div class="emails-selector" >
+              <select class="email-tags-input" multiple data-role="tags-input" name="emails[]">
+              </select>
+              <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 +111,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",
-                    options_for_select(UserTeam.roles.keys
-                      .map { |k| [k.humanize + (k == 'normal_user' ? " (#{t('invite_users.default')})" : ''), k] }, 'normal_user'),
-                    disabled: true, class: "role-input from-control form-select"
-                  %>
+                  <div class="form-select">
+                    <%= select_tag "role",
+                      options_for_select(UserTeam.roles.keys
+                        .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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8afec4aab..48f1e799f 100644
--- a/config/locales/en.yml
+++ b/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"

From fe06effbd789cd475a254595b891600ab6055dbd Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Fri, 9 Jul 2021 09:40:06 +0200
Subject: [PATCH 2/4] Fix linter errors [SCI-5099]

---
 .../settings/teams/invite_users_modal.js      |  2 +-
 app/assets/stylesheets/themes/scinote.scss    | 46 ++++++++++---------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/users/settings/teams/invite_users_modal.js b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
index 07eac5717..d461c9cb6 100644
--- a/app/assets/javascripts/users/settings/teams/invite_users_modal.js
+++ b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
@@ -36,7 +36,7 @@
       maxTags: modal.data('max-tags')
     });
 
-    emailTagsInput.on('change', function(e) {
+    emailTagsInput.on('change', function() {
       if (emailTagsInput.val()) {
         inviteBtn.removeAttr('disabled');
       } else {
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 75e7cbc69..bbf858852 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/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%;
@@ -1324,24 +1326,24 @@ body > .loading-overlay {
 
     .tag {
       color: $color-black;
-      font-weight: normal;
       font-size: 12px;
+      font-weight: normal;
       line-height: 13px;
       padding: 5px 8px;
     }
 
     [data-role="remove"] {
       margin-left: 4px;
+    }
 
-      &::after {
-        content: "\f00d";
-        font-family: "Font Awesome 5 Free";
-        padding: 0px 2px;
-        font-weight: 900;
-        display: inline-block;
-        font-size: 12px;
-        opacity: .7;
-      }
+    [data-role="remove"]::after {
+      content: "\f00d";
+      display: inline-block;
+      font-family: "Font Awesome 5 Free";
+      font-size: 12px;
+      font-weight: 900;
+      opacity: .7;
+      padding: 0 2px;
     }
   }
 
@@ -1380,16 +1382,16 @@ body > .loading-overlay {
   }
 
   .select-container--with-blank {
-    input.search-field::placeholder {
+    overflow: hidden;
+
+    .search-field::placeholder {
       color: $color-black;
       opacity: 1;
     }
 
-    input.search-field:focus::placeholder {
+    .search-field:focus::placeholder {
       opacity: 0;
     }
-
-    overflow: hidden;
   }
 }
 
@@ -1537,6 +1539,7 @@ a.disabled-with-click-events {
   position: relative;
 
   select {
+    appearance: none;
     border: 1px solid $color-silver-chalice;
     border-radius: 4px;
     color: $color-emperor;
@@ -1546,22 +1549,21 @@ a.disabled-with-click-events {
     outline: 0;
     padding: 8px 42px 3px 3px;
     width: 100%;
-    appearance: none;
   }
 
-  &:after {
+  &::after {
+    color: $color-silver-chalice;
+    content: "\f0d7";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
-    content: "\f0d7";
-    color: $color-silver-chalice;
+    height: 100%;
     padding: 12px 8px;
+    pointer-events: none;
     position: absolute;
     right: -6px;
-    top: -6px;
-    z-index: 1;
     text-align: center;
+    top: -6px;
     width: 10%;
-    height: 100%;
-    pointer-events: none;
+    z-index: 1;
   }
 }

From 3cb395db156955d7191359d04be4828c3fb8fd18 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Fri, 9 Jul 2021 10:49:11 +0200
Subject: [PATCH 3/4] Use where_attributes like in team search [SCI-5099]

---
 app/controllers/users/invitations_controller.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/controllers/users/invitations_controller.rb b/app/controllers/users/invitations_controller.rb
index 59c1216f7..606b9513b 100644
--- a/app/controllers/users/invitations_controller.rb
+++ b/app/controllers/users/invitations_controller.rb
@@ -166,7 +166,7 @@ module Users
                           .where('user_teams.role': UserTeam.roles[:admin])
                           .distinct
 
-      teams = teams.where('name ILIKE ?', "%#{params[:query]}%") if params[:query].present?
+      teams = teams.where_attributes_like(:name, params[:query]) if params[:query].present?
 
       teams.select { |team| can_invite_team_users?(team) }
 

From 40a8f3a434996624ff2fe2cff70e4116a5cf2616 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Fri, 9 Jul 2021 11:20:48 +0200
Subject: [PATCH 4/4] Switch to using dropdownSelector for emails input
 [SCI-5099]

---
 .../settings/teams/invite_users_modal.js      | 15 +----------
 app/assets/stylesheets/themes/scinote.scss    | 27 -------------------
 app/views/shared/_invite_users_modal.html.erb |  5 ++--
 3 files changed, 4 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/users/settings/teams/invite_users_modal.js b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
index d461c9cb6..6d0b95a40 100644
--- a/app/assets/javascripts/users/settings/teams/invite_users_modal.js
+++ b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
@@ -26,24 +26,11 @@
     var teamSelectorDropdown = modal.find('[data-role=team-selector-dropdown]');
     var teamSelectorDropdown2 = $();
     var emailsInput = modal.find('.emails-input');
-    var emailTagsInput = modal.find('.email-tags-input');
     var teamsInput = modal.find('.teams-input');
     var roleInput = modal.find('.role-input');
     var recaptchaErrorMsgDiv = modal.find('#recaptcha-error-msg');
     var recaptchaErrorText = modal.find('#recaptcha-error-msg>span');
 
-    emailTagsInput.tagsinput({
-      maxTags: modal.data('max-tags')
-    });
-
-    emailTagsInput.on('change', function() {
-      if (emailTagsInput.val()) {
-        inviteBtn.removeAttr('disabled');
-      } else {
-        inviteBtn.attr('disabled', 'disabled');
-      }
-    });
-
     dropdownSelector.init(emailsInput, {
       delimiter: true,
       optionClass: 'users-dropdown-list',
@@ -132,7 +119,7 @@
       // Click action
       modal.find('[data-action=invite]').off('click').on('click', function() {
         var data = {
-          emails: dropdownSelector.getValues(emailsInput) || emailTagsInput.val(),
+          emails: dropdownSelector.getValues(emailsInput),
           team_ids: dropdownSelector.getValues(teamsInput),
           role: roleInput.val(),
           'g-recaptcha-response': $('#recaptcha-invite-modal').val()
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index bbf858852..c7c635a00 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1322,29 +1322,6 @@ body > .loading-overlay {
   .bootstrap-tagsinput {
     min-width: 450px;
     width: 100%;
-    border-color: $color-silver-chalice;
-
-    .tag {
-      color: $color-black;
-      font-size: 12px;
-      font-weight: normal;
-      line-height: 13px;
-      padding: 5px 8px;
-    }
-
-    [data-role="remove"] {
-      margin-left: 4px;
-    }
-
-    [data-role="remove"]::after {
-      content: "\f00d";
-      display: inline-block;
-      font-family: "Font Awesome 5 Free";
-      font-size: 12px;
-      font-weight: 900;
-      opacity: .7;
-      padding: 0 2px;
-    }
   }
 
   .results-container .alert {
@@ -1377,10 +1354,6 @@ body > .loading-overlay {
     margin-bottom: 5px;
   }
 
-  .tag.label.label-info {
-    background-color: $color-concrete;
-  }
-
   .select-container--with-blank {
     overflow: hidden;
 
diff --git a/app/views/shared/_invite_users_modal.html.erb b/app/views/shared/_invite_users_modal.html.erb
index 5e5a96155..1959b6e6f 100644
--- a/app/views/shared/_invite_users_modal.html.erb
+++ b/app/views/shared/_invite_users_modal.html.erb
@@ -78,8 +78,9 @@ invite_with_team_selector = type.in?(%w(invite_new_members invite_with_team_sele
               <span><%= t('invite_users.new_members.input_label') %></span>
             </h4>
             <div class="emails-selector" >
-              <select class="email-tags-input" multiple data-role="tags-input" name="emails[]">
-              </select>
+              <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 %>