Replace dynamic bootstrapped components with angular elements

app/components/projects/table_component.html.erb

@@ -31,10 +31,10 @@ See COPYRIGHT and LICENSE files for more details.
   <div class="generic-table--flex-container">
     <div class="generic-table--container <%= container_class %>">
       <div class="generic-table--results-container">
-        <table class="generic-table" <%= table_id ? "id=\"#{table_id}\"".html_safe : '' %>>
+        <table class="generic-table" data-controller="table-highlighting" <%= table_id ? "id=\"#{table_id}\"".html_safe : '' %>>
           <colgroup>
             <% columns.each do |column| %>
-              <col <%= "opHighlightCol" unless column.attribute == :hierarchy %> >
+              <%= tag :col, data: { highlight: column.attribute != :hierarchy } %>
             <% end %>
             <col>
           </colgroup>

app/components/table_component.html.erb

@@ -29,12 +29,12 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container <%= container_class %>" data-test-selector="<%= test_selector %>">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" data-controller="table-highlighting">
       <colgroup>
         <% headers.each do |_name, _options| %>
-          <col opHighlightCol>
+          <col>
         <% end %>
-        <col>
+        <col data-highlight="false">
       </colgroup>
       <thead>
         <tr>

app/helpers/application_helper.rb

@@ -172,9 +172,21 @@ def labeled_check_box_tags(name, collection, options = {})
   end
 
   def html_hours(text)
-    text.gsub(%r{(\d+)\.(\d+)},
-              '<span class="hours hours-int">\1</span><span class="hours hours-dec">.\2</span>')
-      .html_safe
+    html_safe_gsub(text,
+                   %r{(\d+)\.(\d+)},
+                   '<span class="hours hours-int">\1</span><span class="hours hours-dec">.\2</span>')
+  end
+
+  def html_safe_gsub(string, *gsub_args, &)
+    html_safe = string.html_safe?
+    string.gsub(*gsub_args, &)
+
+    # We only mark the string as safe if the previous string was already safe
+    if html_safe
+      string.html_safe # rubocop:disable Rails/OutputSafety
+    else
+      string
+    end
   end
 
   def authoring(created, author, options = {})
@@ -252,19 +264,18 @@ def accesskey(s)
 
   # Same as Rails' simple_format helper without using paragraphs
   def simple_format_without_paragraph(text)
-    text.to_s
-      .gsub(/\r\n?/, "\n")                    # \r\n and \r -> \n
-      .gsub(/\n\n+/, "<br /><br />")          # 2+ newline  -> 2 br
-      .gsub(/([^\n]\n)(?=[^\n])/, '\1<br />') # 1 newline   -> br
-      .html_safe
+    html_safe_gsub(text.to_s, /\r\n?/, "\n")
+      .then { |res| html_safe_gsub(res, /\n\n+/, "<br /><br />") }
+      .then { |res| html_safe_gsub(res, /([^\n]\n)(?=[^\n])/, '\1<br />') }
   end
 
   def lang_options_for_select(blank = true)
-    auto = if blank && (valid_languages - all_languages) == (all_languages - valid_languages)
-             [["(auto)", ""]]
-           else
-             []
-           end
+    auto =
+      if blank && (valid_languages - all_languages) == (all_languages - valid_languages)
+        [["(auto)", ""]]
+      else
+        []
+      end
 
     mapped_languages = valid_languages.map { |lang| translate_language(lang) }
 
@@ -344,10 +355,10 @@ def current_layout
   #   A hash containing the following keys:
   #   * width: (default '100px') the css-width for the progress bar
   #   * legend: (default: '') the text displayed alond with the progress bar
-  def progress_bar(pcts, options = {})
+  def progress_bar(pcts, options = {}) # rubocop:disable Metrics/AbcSize
     pcts = Array(pcts).map(&:round)
     closed = pcts[0]
-    done   = pcts[1] || 0
+    done = pcts[1] || 0
     width = options[:width] || "100px;"
     legend = options[:legend] || ""
     total_progress = options[:hide_total_progress] ? "" : t(:total_progress)
@@ -356,7 +367,7 @@ def progress_bar(pcts, options = {})
     content_tag :span do
       progress = content_tag :span, class: "progress-bar", style: "width: #{width}" do
         concat content_tag(:span, "", class: "inner-progress closed", style: "width: #{closed}%")
-        concat content_tag(:span, "", class: "inner-progress done",   style: "width: #{done}%")
+        concat content_tag(:span, "", class: "inner-progress done", style: "width: #{done}%")
       end
       progress + content_tag(:span, "#{legend}#{percent_sign} #{total_progress}", class: "progress-bar-legend")
     end
@@ -369,8 +380,10 @@ def checked_image(checked = true)
   end
 
   def calendar_for(*_args)
-    ActiveSupport::Deprecation.warn "calendar_for has been removed. Please use the op-basic-single-date-picker angular component instead",
-                                    caller
+    ActiveSupport::Deprecation.warn(
+      "calendar_for has been removed. Please use the opce-basic-single-date-picker angular component instead",
+      caller
+    )
   end
 
   def locale_first_day_of_week
@@ -435,7 +448,7 @@ def permitted_params
   def translate_language(lang_code)
     # rename in-context translation language name for the language select box
     if lang_code.to_sym == Redmine::I18n::IN_CONTEXT_TRANSLATION_CODE &&
-       ::I18n.locale != Redmine::I18n::IN_CONTEXT_TRANSLATION_CODE
+      ::I18n.locale != Redmine::I18n::IN_CONTEXT_TRANSLATION_CODE
       [Redmine::I18n::IN_CONTEXT_TRANSLATION_NAME, lang_code.to_s]
     else
       [I18n.t("cldr.language_name", locale: lang_code), lang_code.to_s]

app/helpers/custom_fields_helper.rb

@@ -63,7 +63,7 @@ def custom_fields_tabs
   end
 
   # Return custom field html tag corresponding to its format
-  def custom_field_tag(name, custom_value)
+  def custom_field_tag(name, custom_value) # rubocop:disable Metrics/AbcSize,Metrics/PerceivedComplexity
     custom_field = custom_value.custom_field
     field_name = "#{name}[custom_field_values][#{custom_field.id}]"
     field_id = "#{name}_custom_field_values_#{custom_field.id}"
@@ -72,7 +72,7 @@ def custom_field_tag(name, custom_value)
 
     tag = case field_format.try(:edit_as)
           when "date"
-            angular_component_tag "op-basic-single-date-picker",
+            angular_component_tag "opce-basic-single-date-picker",
                                   inputs: {
                                     required: custom_field.is_required,
                                     value: custom_value.value,
@@ -143,14 +143,14 @@ def custom_field_tag_with_label(name, custom_value)
     custom_field_label_tag(name, custom_value) + custom_field_tag(name, custom_value)
   end
 
-  def custom_field_tag_for_bulk_edit(name, custom_field, project = nil)
+  def custom_field_tag_for_bulk_edit(name, custom_field, project = nil) # rubocop:disable Metrics/AbcSize
     field_name = "#{name}[custom_field_values][#{custom_field.id}]"
     field_id = "#{name}_custom_field_values_#{custom_field.id}"
     field_format = OpenProject::CustomFieldFormat.find_by_name(custom_field.field_format)
 
     case field_format.try(:edit_as)
     when "date"
-      angular_component_tag "op-modal-single-date-picker",
+      angular_component_tag "opce-modal-single-date-picker",
                             inputs: {
                               id: field_id,
                               name: field_name

app/views/admin/backups/show.html.erb

@@ -90,7 +90,7 @@ See COPYRIGHT and LICENSE files for more details.
 <% end %>
 
 <% if @backup_token.present? %>
-<%= tag :backup, data: {
+<%= angular_component_tag "opce-backup", data: {
   'job-status-id': @job_status_id,
   'last-backup-date': @last_backup_date,
   'last-backup-attachment-id': @last_backup_attachment_id,

app/views/admin/settings/projects_settings/show.html.erb

@@ -61,14 +61,13 @@ See COPYRIGHT and LICENSE files for more details.
       </div>
       <span class="form--field-container">
         <span class="form--text-field-container">
-          <%= content_tag 'editable-query-props',
-                          '',
-                          data: {
-                            name: 'settings[project_gantt_query]',
-                            id: 'settings_project_gantt_query',
-                            query: ::Projects::GanttQueryGeneratorService.current_query,
-                            'url-params': 'true'
-                          }
+          <%= angular_component_tag 'opce-editable-query-props',
+                                    data: {
+                                      name: 'settings[project_gantt_query]',
+                                      id: 'settings_project_gantt_query',
+                                      query: ::Projects::GanttQueryGeneratorService.current_query,
+                                      'url-params': 'true'
+                                    }
           %>
         </span>
       </span>

app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb

@@ -1,7 +1,7 @@
 <% unless EnterpriseToken.allows_to?(ee_feature) %>
   <span class="form--field -indented">
     <%=
-    angular_component_tag 'op-enterprise-banner',
+    angular_component_tag 'opce-enterprise-banner',
                           inputs: {
                             collapsible: true,
                             textMessage: explanation,

app/views/admin/settings/working_days_and_hours_settings/show.html.erb

@@ -90,7 +90,7 @@ See COPYRIGHT and LICENSE files for more details.
       <p>
         <%= t("working_days.instance_wide_info") %>
       </p>
-      <%= angular_component_tag "op-non-working-days-list",
+      <%= angular_component_tag "opce-non-working-days-list",
                                 data: { modified_non_working_days: @modified_non_working_days } %>
 
     </fieldset>

app/views/attribute_help_texts/_tab.html.erb

@@ -2,12 +2,12 @@
 <% if entries.any? %>
   <div class="generic-table--container">
     <div class="generic-table--results-container">
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
-          <col opHighlightCol>
           <col>
+          <col>
+          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
         <tr>
@@ -42,7 +42,7 @@
                           edit_attribute_help_text_path(attribute_help_text) %>
             </td>
             <td>
-              <%= angular_component_tag 'attribute-help-text',
+              <%= angular_component_tag 'opce-attribute-help-text',
                                         inputs: {
                                           helpTextId: attribute_help_text.id,
                                           attribute: attribute_help_text.attribute_name,

app/views/augmented/_collapsible_section.html.erb

@@ -1,6 +1,6 @@
-<collapsible-section-augment initially-expanded="<%= initiallyExpanded %>"
+<opce-collapsible-section-augment initially-expanded="<%= initiallyExpanded %>"
                              section-title="<%= title %>">
-</collapsible-section-augment>
-<div class="collapsible-section-augment--body" hidden>
+</opce-collapsible-section-augment>
+<div class="opce-collapsible-section-augment--body" hidden>
   <%= capture(&block) %>
 </div>

app/views/colors/_color_autocomplete_field.html.erb

@@ -7,7 +7,7 @@
   </label>
   <div class="form--field-container">
     <%= form.hidden_field :color_id %>
-    <%= content_tag('colors-autocompleter',
+    <%= content_tag('opce-colors-autocompleter',
                     '',
                     class: "colors-autocomplete form--select-container " + "#{container_class.present? ? container_class : '-middle'}",
                     data: { colors: options_for_colors(object),

app/views/common/_tabs.html.erb

@@ -29,7 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 <% gon.contentTabs = { tabs: tabs.to_json.html_safe, selected: selected_tab.to_json.html_safe } %>
 
 <% if with_tab_nav %>
-  <content-tabs></content-tabs>
+  <opce-content-tabs></opce-content-tabs>
 <% end %>
 
 <%= content_tag 'div',

app/views/common/upsale.html.erb

@@ -56,5 +56,5 @@
       <%= spot_icon('enterprise-addons') %>
       <span class="button--text"><%= t('admin.enterprise.buttons.upgrade') %></span>
     <% end %>
-    <free-trial-button></free-trial-button>
+    <opce-free-trial-button></opce-free-trial-button>
 </div>

app/views/custom_actions/_form.html.erb

@@ -66,7 +66,8 @@
           <% elsif %i(date_property).include?(action.type) %>
             <div class="form--field-container">
               <% date = action.values.first %>
-              <%= tag 'custom-date-action-admin', data: { 'field-value': date.try(:iso8601) || date, 'field-name': input_name } %>
+              <%= angular_component_tag 'opce-custom-date-action-admin',
+                                        data: { 'field-value': date.try(:iso8601) || date, 'field-name': input_name } %>
             </div>
           <% elsif %i(string_property text_property).include?(action.type) %>
             <div class="form--field-container">
@@ -101,7 +102,7 @@
                                           step: 1 %>
             </div>
           <% end %>
-          <hide-section-link data-section-name="<%= action.key %>"></hide-section-link>
+          <opce-hide-section-link data-section-name="<%= action.key %>"></opce-hide-section-link>
         </div>
       </section>
     <% end %>
@@ -116,8 +117,8 @@
     </label>
     <span class="form--field-container">
       <span class="form--text-field-container -middle">
-        <add-section-dropdown data-html-id="custom-actions-form--add-action">
-        </add-section-dropdown>
+        <opce-add-section-dropdown data-html-id="custom-actions-form--add-action">
+        </opce-add-section-dropdown>
       </span>
     </span>
   </div>

app/views/custom_fields/_custom_options.html.erb

@@ -32,12 +32,12 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table" id="custom-options-table">
+    <table class="generic-table" id="custom-options-table" data-controller="table-highlighting">
       <colgroup>
-        <col opHighlightCol>
-        <col opHighlightCol>
-        <col opHighlightCol>
         <col>
+        <col>
+        <col>
+        <col data-highlight="false">
       </colgroup>
       <thead>
       <tr>

app/views/custom_fields/_tab.html.erb

@@ -39,17 +39,17 @@ See COPYRIGHT and LICENSE files for more details.
           </div>
         </div>
       <% end %>
-      <table class="generic-table">
+      <table class="generic-table" data-controller="table-highlighting">
         <colgroup>
-          <col opHighlightCol>
-          <col opHighlightCol>
+          <col>
+          <col>
           <% if tab[:name] == 'WorkPackageCustomField' %>
-            <col opHighlightCol>
-            <col opHighlightCol>
+            <col>
+            <col>
           <% end %>
-          <col opHighlightCol>
-          <col opHighlightCol>
           <col>
+          <col>
+          <col data-highlight="false">
         </colgroup>
         <thead>
           <tr>

app/views/custom_styles/show.html.erb

@@ -156,10 +156,10 @@ See COPYRIGHT and LICENSE files for more details.
 <% end %>
 
 <% custom_export_expanded = @custom_style.id && (@custom_style.export_logo.present? || @custom_style.export_cover.present? || @custom_style.export_cover_text_color.present?) %>
-<collapsible-section-augment initially-expanded="<%= custom_export_expanded %>"
+<opce-collapsible-section-augment initially-expanded="<%= custom_export_expanded %>"
                              section-title="<%= I18n.t(:label_custom_pdf_export_settings) %>">
-</collapsible-section-augment>
-<div class="collapsible-section-augment--body" hidden>
+</opce-collapsible-section-augment>
+<div class="opce-collapsible-section-augment--body" hidden>
 
   <%= form_for @custom_style, url: custom_style_path, html: { multipart: true, class: "form -vertical" } do |f| %>
     <section class="form--section">

app/views/enterprises/_current.html.erb

@@ -1,4 +1,4 @@
-<enterprise-active-saved-trial
+<opce-enterprise-active-saved-trial
   data-subscriber="<%= @current_token.subscriber %>"
   data-email="<%= @current_token.mail %>"
   data-company="<%= @current_token.try(:company) %>"
@@ -9,7 +9,7 @@
   data-is-expired="<%= @current_token.expired?(reprieve: false) %>"
   data-reprieve-days-left="<%= @current_token.reprieve_days_left %>"
 >
-</enterprise-active-saved-trial>
+</opce-enterprise-active-saved-trial>
 
 <%= form_tag(enterprise_path,
              method: :delete,

app/views/enterprises/_info.html.erb

@@ -34,7 +34,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="upsale--information-container">
   <div class='upsale-information'>
-    <enterprise-base></enterprise-base>
+    <opce-enterprise-base></opce-enterprise-base>
   </div>
 
   <div class='upsale-actions'>

app/views/filters/_boolean.html.erb

@@ -1,7 +1,7 @@
 <label class="advanced-filters--filter-value"
        data-filter--filters-form-target="filterValueContainer"
        data-filter-name="<%= filter.name %>">
-  <%= angular_component_tag 'spot-switch',
+  <%= angular_component_tag 'opce-spot-switch',
                             inputs: {
                               name: "v-" + filter.class.key.to_s,
                               checked: filter.values.first != 'f',