Merge pull request #2218 from aignatov-bio/ai-sci-4088-remove-rte-from-team-description

Replace RTE with simple textarea [SCI-4088]

app/assets/stylesheets/settings/teams.scss

@@ -49,11 +49,85 @@
 
   .team-description {
     display: inline-block;
+    margin-top: 20px;
     position: relative;
     width: 100%;
 
-    .form-group {
-      margin-bottom: 0;
+    .view-mode {
+      border: 1px solid transparent;
+      border-radius: 3px;
+      cursor: pointer;
+      float: left;
+      min-height: 100px;
+      padding: 2px 4px;
+      white-space: pre;
+      width: 100%;
+
+      &.disable-select {
+        cursor: default;
+        margin-bottom: 20px;
+        min-height: auto;
+      }
+
+      &:empty:not(:focus)::before {
+        color: $color-silver-chalice;
+        content: attr(data-placeholder);
+        font-weight: normal;
+      }
+    }
+
+    .input-field {
+      border: 1px solid $color-silver;
+      border-radius: $border-radius-small;
+      cursor: pointer;
+      display: block;
+      float: left;
+      min-height: 100px;
+      padding: 2px 4px;
+      width: 100%;
+
+      &::placeholder {
+        color: $color-silver-chalice;
+        font-weight: normal;
+      }
+
+      &:focus {
+        outline: 0;
+      }
+
+      &:disabled {
+        background: transparent;
+        border: 1px solid transparent;
+        cursor: pointer;
+        pointer-events: none;
+        user-select: none;
+
+        + .button-container {
+          display: none;
+        }
+      }
+    }
+
+    .button-container {
+      position: absolute;
+      right: 0;
+      top: -20px;
+
+      .inline-field-button {
+        color: $color-silver-chalice;
+        cursor: pointer;
+        line-height: 20px;
+        padding-left: 20px;
+      }
+    }
+
+    &:hover .input-field,
+    &:hover .view-mode:not(.disable-select) {
+      border: 1px solid $color-silver;
+
+      &:disabled {
+        border: 1px solid $color-gainsboro;
+      }
     }
   }
 
@@ -96,7 +170,7 @@
 
     .dropdown-teams-user {
       .dropdown-menu li.user-team-role {
-        & > :first-child {
+        > :first-child {
           padding-left: 10px;
         }
 

app/views/users/settings/teams/show.html.erb

@@ -55,14 +55,24 @@
     </div>
 
     <div class="team-description">
-      <%= render partial: "shared/tiny_mce_editor.html.erb",
-                 locals: { 
-                    object: @team,
-                    update_url: update_team_path(@team, format: :json),
-                    update_method: :put,
-                    field: :description,
-                    placeholder: t("users.settings.teams.show.enter_description")
-                  } %>
+      <% if can_update_team?(@team) %>
+        <div
+          class="inline-init-handler"
+          data-field-to-update="description"
+          data-params-group="team"
+          data-path-to-update="<%= update_team_path(@team, format: :json) %>"
+          data-original-name="<%= sanitize_input(@team.description) %>"
+        >
+          <div class="view-mode" data-placeholder="<%= t("users.settings.teams.show.enter_description") %>"><%= sanitize_input(@team.description) %></div>
+          <textarea placeholder="<%= t("users.settings.teams.show.enter_description") %>" class="hidden input-field smart-text-area" type="text" value="<%= sanitize_input(@team.description) %>" disabled><%= sanitize_input(@team.description) %></textarea>
+          <div class="button-container">
+            <span class="cancel-button inline-field-button"><%= t('general.cancel') %></span>
+            <span class="save-button inline-field-button"><%= t('general.save') %></span>
+          </div>
+        </div>
+      <% else %>
+        <span class="view-mode disable-select"><%= @team.description.empty? ? t('users.settings.teams.edit.header_no_description') : sanitize_input(@team.description)  %></span>
+      <% end %>
     </div>
     <!-- End of HEADER -->
 

features/settings_page/team.feature

@@ -29,8 +29,8 @@ Feature: Team settings
     Given I'm on "BioSistemika Process" team settings page
     Then I click on ".team-description" element
     Then I should not see "I was on Triglav one summer." on ".team-description" element
-    Then I fill in "I was on Triglav one summer." in "#team_1_textarea" rich text editor field
-    Then I click "Save" button
+    Then I fill in "I was on Triglav one summer." in ".team-description textarea" field
+    Then I click on ".save-button" element
     And I should see "I was on Triglav one summer." on ".team-description" element
 
   @javascript