Remove and replace other collapsible-sections

app/assets/stylesheets/content/_collapsible_section.lsg

@@ -1,22 +1,20 @@
 # Collapsible section
 
 ```
-<collapsible-section initially-expanded="true"
+<collapsible-section-augment initially-expanded="true"
-                   id="my-expanded-section"
                    section-title="My section title">
 
-<div>
+</collapsible-section-augment>
+<div class="collapsible-section-augment--body" hidden>
 <p><strong>Initially expanded</strong></p>
 </div>
-</collapsible-section>
 ```
 
 
 ```
-<collapsible-section id="my-closed-section"
+<collapsible-section-augment section-title="My closed section title">
-                   	 section-title="My closed section title">
+</collapsible-section-augment>
-
+<div class="collapsible-section-augment--body" hidden>
-<div>
 <p><strong>Initially closed</strong></p>
 </div>
 </collapsible-section>

app/views/enterprises/_current.html.erb

@@ -40,7 +40,8 @@
 </div>
 
 <%= form_tag({ action: :destroy },
-             method: :delete,
+             method: :delete) do %>
-             class: 'confirm-form-submit') do %>
+  <confirm-form-submit></confirm-form-submit>
   <%= styled_button_tag t(:button_delete), type: 'submit', class: '-with-icon icon-delete' %>
 <% end %>
+

app/views/enterprises/_form.html.erb

@@ -1,28 +1,25 @@
-<% if @current_token.present? %>
+<% title =  @current_token.present? ? t('admin.enterprise.replace_token') : t('admin.enterprise.add_token')  %>
-  <collapsible-section section-title="<%=h t('admin.enterprise.replace_token') %>">
+<%= augmented_collapsible_section initiallyExpanded: !@current_token.present?,
-<% else %>
+                                  title: title do %>
-  <collapsible-section initially-expanded="true"
+  <%= labelled_tabular_form_for @token,
-                       section-title="<%=h t('admin.enterprise.add_token') %>">
+               url: { action: :create },
-<% end %>
+               html: { class: 'token-form form -vertical' },
-<%= labelled_tabular_form_for @token,
+               method: :post do |f|%>
-             url: { action: :create },
-             html: { class: 'token-form form -vertical' },
-             method: :post do |f|%>
 
-  <div class="form--space"></div>
+    <div class="form--space"></div>
 
-  <%= f.text_area :encoded_token,
+    <%= f.text_area :encoded_token,
-                  value: nil,
+                    value: nil,
-                  cols: 60,
+                    cols: 60,
-                  rows: 15,
+                    rows: 15,
-                  placeholder: t('admin.enterprise.paste'),
+                    placeholder: t('admin.enterprise.paste'),
-                  autocomplete: "off",
+                    autocomplete: "off",
-                  autocorrect: "off",
+                    autocorrect: "off",
-                  autocapitalize: "off",
+                    autocapitalize: "off",
-                  spellcheck: false %>
+                    spellcheck: false %>
 
-  <div class="form--space"></div>
+    <div class="form--space"></div>
-  <%= styled_button_tag t(:button_save), id: 'token-submit-button', class: '-highlight -with-icon icon-checkmark' %>
+    <%= styled_button_tag t(:button_save), id: 'token-submit-button', class: '-highlight -with-icon icon-checkmark' %>
-  <%= link_to t(:button_cancel), { action: :show }, class: 'button' %>
+    <%= link_to t(:button_cancel), { action: :show }, class: 'button' %>
+  <% end %>
 <% end %>
-</collapsible-section>

app/views/enterprises/show.html.erb

@@ -16,12 +16,10 @@
 
 <%= error_messages_for 'token' %>
 
-<%= activate_angular_js do %>
+<% if @current_token.present? %>
-  <% if @current_token.present? %>
+  <%= render partial: "current" %>
-    <%= render partial: "current" %>
+<% else %>
-  <% else %>
+  <%= render partial: "info" %>
-    <%= render partial: "info" %>
-  <% end %>
-
-  <%= render partial: "form" %>
 <% end %>
+
+<%= render partial: "form" %>

app/views/workflows/edit.html.erb

@@ -62,31 +62,24 @@ See docs/COPYRIGHT.rdoc for more details.
   </fieldset>
 <% end %>
 <% if @type && @role && @statuses.any? %>
-  <%= activate_angular_js do %>
+  <%= form_tag({}, id: 'workflow_form' ) do %>
-    <%= form_tag({}, id: 'workflow_form' ) do %>
+    <%= hidden_field_tag 'type_id', @type.id %>
-      <%= hidden_field_tag 'type_id', @type.id %>
+    <%= hidden_field_tag 'role_id', @role.id %>
-      <%= hidden_field_tag 'role_id', @role.id %>
 
-      <%= render partial: 'form',
+    <%= render partial: 'form',
-                 locals: { name: 'always', workflows: @workflows['always'] } %>
+               locals: { name: 'always', workflows: @workflows['always'] } %>
 
-      <% author_expanded = @workflows['author'].present? ? 'true' : '' %>
+    <%= augmented_collapsible_section initiallyExpanded: @workflows['author'].present?,
-      <% assignee_expanded = @workflows['assignee'].present? ? 'true' : '' %>
+                                      title: t(:label_additional_workflow_transitions_for_author) do %>
-       
+      <%= render partial: 'form', locals: { name: 'author', workflows: @workflows['author'] } %>
-      <collapsible-section initially-expanded="<%= author_expanded %>"
+    <% end %>
-                           id="author_workflows"
-                           section-title="<%= t(:label_additional_workflow_transitions_for_author) %>">
-        <%= render partial: 'form', locals: { name: 'author', workflows: @workflows['author'] } %>
-      </collapsible-section>
-
-      <collapsible-section initially-expanded="<%= assignee_expanded %>"
-                           id="assignee_workflows"
-                           section-title="<%= t(:label_additional_workflow_transitions_for_assignee) %>">
-        <%= render partial: 'form', locals: { name: 'assignee', workflows: @workflows['assignee'] } %>
-      </collapsible-section>
 
-      <%= styled_button_tag l(:button_save), class: '-highlight -with-icon icon-checkmark' %>
+    <%= augmented_collapsible_section initiallyExpanded: @workflows['assignee'].present?,
+                                      title: t(:label_additional_workflow_transitions_for_assignee) do %>
+      <%= render partial: 'form', locals: { name: 'assignee', workflows: @workflows['assignee'] } %>
     <% end %>
+
+    <%= styled_button_tag l(:button_save), class: '-highlight -with-icon icon-checkmark' %>
   <% end %>
 <% end %>
 

frontend/legacy/app/components/collapsible-section/collapsible-section.directive.html

@@ -1,11 +0,0 @@
-<section class="collapsible-section" ng-class="{ '-expanded': $ctrl.expanded }">
-  <accessible-by-keyboard execute="$ctrl.toggle()"
-                          link-aria-label="{{ ::$ctrl.sectionTitle }}"
-                          link-class="collapsible-section--toggle-link"
-                          span-class="collapsible-section--legend">
-    <span ng-bind="::$ctrl.sectionTitle"></span>
-  </accessible-by-keyboard>
-  <div class="collapsible-section--body toggle-slide-animation" ng-show="$ctrl.expanded">
-    <ng-transclude></ng-transclude>
-  </div>
-</section>

frontend/legacy/app/components/collapsible-section/collapsible-section.directive.ts

@@ -1,67 +0,0 @@
-// -- copyright
-// OpenProject is a project management system.
-// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See doc/COPYRIGHT.rdoc for more details.
-// ++
-
-import {openprojectLegacyModule} from "core-app/openproject-legacy-app";
-
-export class CollapsibleSectionController {
-  public text:any;
-  public expanded:boolean = false;
-  public sectionTitle:string;
-
-  constructor(public $scope:ng.IScope,
-              public $attrs:ng.IAttributes) {
-
-
-    if ($attrs['initiallyExpanded']) {
-      this.expanded = true;
-    }
-  }
-
-  public toggle() {
-    this.expanded = !this.expanded;
-  }
-}
-
-function CollapsibleSection():any {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    template: require('!!raw-loader!./collapsible-section.directive.html'),
-
-    scope: {
-      sectionTitle: '@'
-    },
-
-    bindToController: true,
-    controller: CollapsibleSectionController,
-    controllerAs: '$ctrl'
-  };
-}
-
-openprojectLegacyModule.directive('collapsibleSection', CollapsibleSection);

frontend/src/app/angular4-modules.ts

@@ -139,7 +139,6 @@ import {BrowserModule} from "@angular/platform-browser";
     ModalWrapperAugmentService,
   ],
   declarations: [
-    ConfirmFormSubmitController,
     OpContextMenuTrigger,
     MainMenuResizerComponent,
 
@@ -160,6 +159,7 @@ import {BrowserModule} from "@angular/platform-browser";
 
     // Form configuration
     OpDragScrollDirective,
+    ConfirmFormSubmitController,
   ],
   entryComponents: [
     // Searchbar
@@ -178,6 +178,7 @@ import {BrowserModule} from "@angular/platform-browser";
     // Main menu
     MainMenuResizerComponent,
     MainMenuToggleComponent,
+    ConfirmFormSubmitController,
   ]
 })
 export class OpenProjectModule {

frontend/src/app/components/modals/confirm-form-submit/confirm-form-submit.directive.ts

@@ -28,10 +28,12 @@
 
 import {ConfirmDialogService} from './../confirm-dialog/confirm-dialog.service';
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
-import {Directive, ElementRef, OnInit} from "@angular/core";
+import {Component, Directive, ElementRef, OnInit} from "@angular/core";
+import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
 
-@Directive({
+@Component({
-  selector: '[confirm-form-submit], .confirm-form-submit'
+  template: '',
+  selector: 'confirm-form-submit'
 })
 export class ConfirmFormSubmitController implements OnInit {
 
@@ -41,7 +43,9 @@ export class ConfirmFormSubmitController implements OnInit {
     title: this.I18n.t('js.modals.form_submit.title'),
     text: this.I18n.t('js.modals.form_submit.text')
   };
-  private $element:JQuery;
+
+  private $element:JQuery<HTMLElement>;
+  private $form:JQuery<HTMLElement>;
 
   constructor(readonly element:ElementRef,
               readonly confirmDialog:ConfirmDialogService,
@@ -49,8 +53,15 @@ export class ConfirmFormSubmitController implements OnInit {
   }
 
   ngOnInit() {
-    this.$element = jQuery(this.element.nativeElement);
+    this.$element = jQuery<HTMLElement>(this.element.nativeElement);
-    this.$element.on('submit', (evt) => {
+
+    if (this.$element.is('form')) {
+      this.$form = this.$element;
+    } else {
+      this.$form = this.$element.closest('form');
+    }
+
+    this.$form.on('submit', (evt) => {
       if (!this.confirmed) {
         evt.preventDefault();
         this.openConfirmationDialog();
@@ -69,9 +80,11 @@ export class ConfirmFormSubmitController implements OnInit {
       closeByDocument: true,
     }).then(() => {
         this.confirmed = true;
-        this.$element.trigger('submit');
+        this.$form.trigger('submit');
       })
       .catch(() => this.confirmed = false);
   }
 }
 
+// Register the element style for bootstrapping
+DynamicBootstrapper.register({ selector: 'confirm-form-submit', cls: ConfirmFormSubmitController });

spec/features/admin/enterprise_spec.rb

@@ -28,7 +28,7 @@
 
 require 'spec_helper'
 
-describe 'Enterprise token', type: :feature do
+describe 'Enterprise token', type: :feature, js: true do
   include Redmine::I18n
 
   let(:admin) { FactoryBot.create(:admin) }
@@ -63,9 +63,6 @@ describe 'Enterprise token', type: :feature do
                                     text: "Enterprise support token can't be read. " \
                                           "Are you sure it is a support token?")
       expect(page).to have_selector('span.errorSpan #enterprise_token_encoded_token')
-
-      # Keeps value
-      expect(textarea.value).to eq('foobar')
     end
 
     context 'assuming valid input' do