DEV: Update default tagName and connectorTagName for plugin outlets (#…

…13685)

This commit should be a no-op for all existing core outlets. Outlets which are introduced by themes/plugins may see a change in behavior, and should follow the steps below if they want to maintain their previous behavior.

`tagName="" connectorTagName=""` is almost always the correct choice for plugin outlets. 40eba8c introduced a `noTags=true` shortcut which achieved this, and left a comment saying it should be the future default. This commit does exactly that. To avoid any breaking changes for plugins, all existing plugin outlets have been reviewed and adjusted by following this logic:

1) If `noTags=true`, remove the `noTags` parameter, and do not complete any further steps
2) If `tagName` is not specified, set `tagName="span"` (the previous default)
3) If `connectorTagName` is not specified, set `selectorTagName="div"` (the previous default)
4) If `tagName=""`, remove it
5) If `connectorTagName=""`, remove it

The updates were accomplished with the help of a ruby script:

```ruby
def removeAttr(tag, attribute)
  tag = tag.sub /\s#{attribute}="?\w*"? /, " "
  tag = tag.sub /\s#{attribute}="?\w*"?}}/, "}}"
  tag = tag.sub /^\s*#{attribute}="?\w*"?\n/, ""
  tag
end

files = Dir.glob("app/assets/javascripts/**/*.hbs")

puts "Checking #{files.count} files..."
files.each do |f|
  content = File.read(f)

  count = 0
  edits = 0
  content.gsub!(/{{\s*plugin-outlet.*?}}/m) do |match|
    count += 1

    result = match

    noTags = result.include?("noTags=true")
    tagName = result[/tagName="(\w*)"/, 1]
    connectorTagName = result[/connectorTagName="(\w*)"/, 1]

    if noTags
      result = removeAttr(result, "noTags")
    else
      if connectorTagName == ""
        result = removeAttr(result, "connectorTagName")
      elsif connectorTagName.nil?
        result = result.sub(/name="[\w-]+"/) { |m| "#{m} connectorTagName=\"div\"" }
      end

      if tagName == ""
        result = removeAttr(result, "tagName")
      elsif tagName.nil?
        result = result.sub(/name="[\w-]+"/) { |m| "#{m} tagName=\"span\"" }
      end
    end

    edits += 1 if match != result

    result
  end

  puts "#{count} outlets, #{edits} edited -> #{f}"

  File.write(f, content)
end
```

app/assets/javascripts/admin/addon/templates/admin.hbs

@@ -26,7 +26,7 @@
             {{/if}}
           {{/if}}
           {{nav-item route="adminPlugins" label="admin.plugins.title"}}
-          {{plugin-outlet name="admin-menu" connectorTagName="" tagName=""}}
+          {{plugin-outlet name="admin-menu"}}
         </ul>
       </div>
 

app/assets/javascripts/admin/addon/templates/backups.hbs

@@ -4,7 +4,7 @@
       <ul class="nav nav-pills">
         {{nav-item route="admin.backups.index" label="admin.backups.menu.backups"}}
         {{nav-item route="admin.backups.logs" label="admin.backups.menu.logs"}}
-        {{plugin-outlet name="downloader" tagName=""}}
+        {{plugin-outlet name="downloader" connectorTagName="div"}}
         <div class="admin-actions">
           {{#if model.canRollback}}
             {{d-button action=(route-action "rollback")
@@ -32,7 +32,7 @@
     </nav>
   </div>
 
-  {{plugin-outlet name="before-backup-list" tagName=""}}
+  {{plugin-outlet name="before-backup-list" connectorTagName="div"}}
 
   <div class="admin-container">
     {{outlet}}

app/assets/javascripts/admin/addon/templates/components/themes-list-item.hbs

@@ -1,5 +1,5 @@
 <div class="inner-wrapper">
-  {{plugin-outlet name="admin-customize-themes-list-item" connectorTagName="span" args=(hash theme=theme)}}
+  {{plugin-outlet name="admin-customize-themes-list-item" tagName="span" connectorTagName="span" args=(hash theme=theme)}}
 
   <div class="info">
     <span class="name">

app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs

@@ -1,5 +1,5 @@
 <div class="show-current-style">
-  {{plugin-outlet name="admin-customize-themes-show-top" args=(hash theme=model)}}
+  {{plugin-outlet name="admin-customize-themes-show-top" tagName="span" connectorTagName="div" args=(hash theme=model)}}
   <div class="title">
     {{#if editingName}}
       {{text-field value=model.name autofocus="true"}}

app/assets/javascripts/admin/addon/templates/dashboard.hbs

@@ -1,4 +1,4 @@
-{{plugin-outlet name="admin-dashboard-top"}}
+{{plugin-outlet name="admin-dashboard-top" tagName="span" connectorTagName="div"}}
 
 {{#if showVersionChecks}}
   <div class="section-top">
@@ -53,4 +53,4 @@
 
 {{dashboard-new-features tagName="div"}}
 
-{{plugin-outlet name="admin-dashboard-bottom"}}
+{{plugin-outlet name="admin-dashboard-bottom" tagName="span" connectorTagName="div"}}

app/assets/javascripts/admin/addon/templates/dashboard_general.hbs

@@ -1,5 +1,5 @@
 {{#conditional-loading-spinner condition=isLoading}}
-  {{plugin-outlet name="admin-dashboard-general-top"}}
+  {{plugin-outlet name="admin-dashboard-general-top" tagName="span" connectorTagName="div"}}
 
   {{#if isCommunityHealthVisible}}
     <div class="community-health section">
@@ -156,5 +156,5 @@
     {{/if}}
   </div>
 
-  {{plugin-outlet name="admin-dashboard-general-bottom"}}
+  {{plugin-outlet name="admin-dashboard-general-bottom" tagName="span" connectorTagName="div"}}
 {{/conditional-loading-spinner}}

app/assets/javascripts/admin/addon/templates/dashboard_moderation.hbs

@@ -1,5 +1,5 @@
 <div class="sections">
-  {{plugin-outlet name="admin-dashboard-moderation-top"}}
+  {{plugin-outlet name="admin-dashboard-moderation-top" tagName="span" connectorTagName="div"}}
 
   {{#if isModeratorsActivityVisible}}
     <div class="moderators-activity section">
@@ -40,6 +40,6 @@
       filters=lastWeekfilters
       reportOptions=userFlaggingRatioOptions}}
 
-    {{plugin-outlet name="admin-dashboard-moderation-bottom"}}
+    {{plugin-outlet name="admin-dashboard-moderation-bottom" tagName="span" connectorTagName="div"}}
   </div>
 </div>

app/assets/javascripts/admin/addon/templates/dashboard_security.hbs

@@ -1,5 +1,5 @@
 <div class="sections">
-  {{plugin-outlet name="admin-dashboard-security-top"}}
+  {{plugin-outlet name="admin-dashboard-security-top" tagName="span" connectorTagName="div"}}
 
   <div class="main-section">
     {{admin-report
@@ -10,6 +10,6 @@
       dataSourceName="staff_logins"
       filters=lastWeekfilters}}
 
-    {{plugin-outlet name="admin-dashboard-security-bottom"}}
+    {{plugin-outlet name="admin-dashboard-security-bottom" tagName="span" connectorTagName="div"}}
   </div>
 </div>

app/assets/javascripts/admin/addon/templates/plugins-index.hbs

@@ -67,4 +67,4 @@
 
 <p class="admin-plugins-howto"><a href="https://meta.discourse.org/t/install-a-plugin/19157">{{i18n "admin.plugins.howto"}}</a></p>
 
-{{plugin-outlet name="admin-below-plugins-index" args=(hash model=model)}}
+{{plugin-outlet name="admin-below-plugins-index" tagName="span" connectorTagName="div" args=(hash model=model)}}

app/assets/javascripts/admin/addon/templates/user-index.hbs

@@ -27,8 +27,7 @@
     {{plugin-outlet
       name="admin-user-controls-after"
       args=(hash model=model)
-      tagName=""
-      connectorTagName=""}}
+     }}
   </div>
 
   <div class="display-row username">
@@ -48,8 +47,7 @@
   {{plugin-outlet
     name="admin-user-below-names"
     args=(hash user=model)
-    tagName=""
-    connectorTagName=""}}
+   }}
 
   {{#if canCheckEmails}}
     <div class="display-row email">
@@ -235,7 +233,7 @@
   </section>
 {{/if}}
 
-{{plugin-outlet name="admin-user-details" args=(hash model=model)}}
+{{plugin-outlet name="admin-user-details" tagName="span" connectorTagName="div" args=(hash model=model)}}
 
 <section class="details">
   <h1>{{i18n "admin.user.permissions"}}</h1>
@@ -726,7 +724,7 @@
   </section>
 {{/if}}
 
-{{plugin-outlet name="after-user-details" args=(hash model=model)}}
+{{plugin-outlet name="after-user-details" tagName="span" connectorTagName="div" args=(hash model=model)}}
 
 <section>
   <hr>

app/assets/javascripts/admin/addon/templates/users-list-show.hbs

@@ -100,7 +100,7 @@
               {{#if user.second_factor_enabled}}
                 {{d-icon "lock" title="admin.user.second_factor_enabled" }}
               {{/if}}
-              {{plugin-outlet name="admin-users-list-icon" tagName="" args=(hash user=user query=query)}}
+              {{plugin-outlet name="admin-users-list-icon" connectorTagName="div" args=(hash user=user query=query)}}
             </td>
           </tr>
         {{/each}}

app/assets/javascripts/admin/addon/templates/users-list.hbs

@@ -8,7 +8,7 @@
       {{nav-item route="adminUsersList.show" routeParam="silenced" label="admin.users.nav.silenced" class="silenced-users"}}
       {{nav-item route="adminUsersList.show" routeParam="staged" label="admin.users.nav.staged" class="staged-users"}}
       {{nav-item route="groups" label="groups.index.title" class="groups"}}
-      {{plugin-outlet name="admin-users-list-nav-after" tagName="" connectorTagName=""}}
+      {{plugin-outlet name="admin-users-list-nav-after"}}
 
       <li class="admin-actions">
         {{#if currentUser.can_invite_to_forum}}

app/assets/javascripts/admin/addon/templates/web-hooks-show.hbs

@@ -71,7 +71,7 @@
       </div>
     </div>
 
-    {{plugin-outlet name="web-hook-fields" args=(hash model=model)}}
+    {{plugin-outlet name="web-hook-fields" tagName="span" connectorTagName="div" args=(hash model=model)}}
 
     <div>
       {{input type="checkbox" name="verify_certificate" checked=model.verify_certificate}} {{i18n "admin.web_hooks.verify_certificate"}}

app/assets/javascripts/discourse/app/components/plugin-outlet.js

@@ -36,16 +36,11 @@ import {
 import Component from "@ember/component";
 
 export default Component.extend({
-  tagName: "span",
+  tagName: "",
+  connectorTagName: "",
   connectors: null,
 
   init() {
-    // This should be the future default
-    if (this.noTags) {
-      this.set("tagName", "");
-      this.set("connectorTagName", "");
-    }
-
     this._super(...arguments);
     const name = this.name;
     if (name) {

app/assets/javascripts/discourse/app/templates/about.hbs

@@ -21,7 +21,6 @@
 
       {{plugin-outlet name="about-after-description"
               connectorTagName="section"
-              tagName=""
               args=(hash model=model)}}
 
       {{#if model.admins}}
@@ -35,6 +34,7 @@
       {{/if}}
 
       {{plugin-outlet name="about-after-admins"
+                    tagName="span"
                     connectorTagName="section"
                     args=(hash model=model)}}
 
@@ -50,6 +50,7 @@
       {{/if}}
 
       {{plugin-outlet name="about-after-moderators"
+                    tagName="span"
                     connectorTagName="section"
                     args=(hash model=model)}}
 

app/assets/javascripts/discourse/app/templates/application.hbs

@@ -1,7 +1,7 @@
 {{#discourse-root}}
   <a href="#main-container" id="skip-link">{{i18n "skip_to_main_content"}}</a>
   {{d-document}}
-  {{plugin-outlet name="above-site-header" tagName=""}}
+  {{plugin-outlet name="above-site-header" connectorTagName="div"}}
   {{site-header canSignUp=canSignUp
                 showCreateAccount=(route-action "showCreateAccount")
                 showLogin=(route-action "showLogin")
@@ -11,10 +11,10 @@
                 logout=(route-action "logout")}}
   {{software-update-prompt}}
 
-  {{plugin-outlet name="below-site-header" tagName="" args=(hash currentPath=router._router.currentPath)}}
+  {{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
 
   <div id="main-outlet" class="wrap" role="main">
-    {{plugin-outlet name="above-main-container" tagName=""}}
+    {{plugin-outlet name="above-main-container" connectorTagName="div"}}
     <div class="container" id="main-container">
       {{#if showTop}}
         {{custom-html name="top"}}
@@ -23,17 +23,17 @@
       {{pwa-install-banner}}
       {{global-notice}}
       {{create-topics-notice}}
-      {{plugin-outlet name="top-notices" tagName="" args=(hash currentPath=router._router.currentPath)}}
+      {{plugin-outlet name="top-notices" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
     </div>
     {{outlet}}
     {{outlet "user-card"}}
   </div>
 
-  {{plugin-outlet name="above-footer" tagName="" args=(hash showFooter=showFooter)}}
+  {{plugin-outlet name="above-footer" connectorTagName="div" args=(hash showFooter=showFooter)}}
   {{#if showFooter}}
     {{custom-html name="footer" triggerAppEvent="true"}}
   {{/if}}
-  {{plugin-outlet name="below-footer" tagName="" args=(hash showFooter=showFooter)}}
+  {{plugin-outlet name="below-footer" connectorTagName="div" args=(hash showFooter=showFooter)}}
 
   {{outlet "modal"}}
   {{topic-entrance}}

app/assets/javascripts/discourse/app/templates/badges/index.hbs

@@ -2,7 +2,7 @@
   <div class="container badges">
     <h1>{{i18n "badges.title"}}</h1>
 
-    {{plugin-outlet name="below-badges-title"}}
+    {{plugin-outlet name="below-badges-title" tagName="span" connectorTagName="div"}}
 
     <div class="badge-groups">
       {{#each badgeGroups as |bg|}}

app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs

@@ -41,4 +41,4 @@
   {{/if}}
 {{/if}}
 
-{{plugin-outlet name="bread-crumbs-right" connectorTagName="li" tagName=""}}
+{{plugin-outlet name="bread-crumbs-right" connectorTagName="li"}}

app/assets/javascripts/discourse/app/templates/components/categories-and-latest-topics.hbs

@@ -6,4 +6,4 @@
   {{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
 </div>
 
-{{plugin-outlet name="extra-categories-column" tagName=""}}
+{{plugin-outlet name="extra-categories-column" connectorTagName="div"}}

app/assets/javascripts/discourse/app/templates/components/categories-and-top-topics.hbs

@@ -6,4 +6,4 @@
   {{categories-topic-list topics=topics filter="top" class="top-topic-list"}}
 </div>
 
-{{plugin-outlet name="extra-categories-column" tagName=""}}
+{{plugin-outlet name="extra-categories-column" connectorTagName="div"}}

app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs

@@ -35,7 +35,7 @@
           {{/if}}
         </div>
       {{/unless}}
-      {{plugin-outlet name="category-box-below-each-category" connectorTagName="" tagName="" args=(hash category=c)}}
+      {{plugin-outlet name="category-box-below-each-category" args=(hash category=c)}}
     </div>
   </div>
 {{/each}}

app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs

@@ -70,7 +70,7 @@
           {{/if}}
         {{/unless}}
       </div>
-      {{plugin-outlet name="category-box-below-each-category" connectorTagName="" tagName="" args=(hash category=c)}}
+      {{plugin-outlet name="category-box-below-each-category" args=(hash category=c)}}
     </div>
   </div>
 {{/each}}

app/assets/javascripts/discourse/app/templates/components/categories-only.hbs

@@ -46,4 +46,4 @@
   {{/if}}
 {{/if}}
 
-{{plugin-outlet name="below-categories-only" tagName="" args=(hash categories=categories showTopics=showTopics)}}
+{{plugin-outlet name="below-categories-only" connectorTagName="div" args=(hash categories=categories showTopics=showTopics)}}

app/assets/javascripts/discourse/app/templates/components/categories-topic-list.hbs

@@ -1,6 +1,6 @@
 <div aria-role="heading" aria-level="2" class="table-heading">
   {{i18n (concat "filters." filter ".title")}}
-  {{plugin-outlet name="categories-topics-table-heading" tagName=""}}
+  {{plugin-outlet name="categories-topics-table-heading" connectorTagName="div"}}
 </div>
 
 {{#if topics}}

app/assets/javascripts/discourse/app/templates/components/category-title-before.hbs

@@ -1 +1 @@
-{{plugin-outlet name="category-title-before" noTags=true args=(hash category=category)}}
+{{plugin-outlet name="category-title-before" args=(hash category=category)}}

app/assets/javascripts/discourse/app/templates/components/composer-toggles.hbs

@@ -1,5 +1,5 @@
 <div class="composer-controls">
-  {{plugin-outlet name="before-composer-toggles"}}
+  {{plugin-outlet name="before-composer-toggles" tagName="span" connectorTagName="div"}}
 
   {{#if site.mobileView}}
     {{d-button

app/assets/javascripts/discourse/app/templates/components/d-editor.hbs

@@ -55,7 +55,7 @@
         focusOut=(action "focusOut")
       }}
       {{popup-input-tip validation=validation}}
-      {{plugin-outlet name="after-d-editor" tagName="" args=outletArgs}}
+      {{plugin-outlet name="after-d-editor" connectorTagName="div" args=outletArgs}}
     </div>
   </div>
 
@@ -65,7 +65,7 @@
         {{html-safe preview}}
       {{/unless}}
     </div>
-    {{plugin-outlet name="editor-preview" classNames="d-editor-plugin" args=outletArgs}}
+    {{plugin-outlet name="editor-preview" tagName="span" connectorTagName="div" classNames="d-editor-plugin" args=outletArgs}}
   </div>
 </div>
 

app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs

@@ -35,7 +35,7 @@
     {{/if}}
   {{/if}}
 
-  {{plugin-outlet name="before-create-topic-button" tagName=""
+  {{plugin-outlet name="before-create-topic-button" connectorTagName="div" tagName=""
     args=(hash
       canCreateTopic=canCreateTopic
       createTopicDisabled=createTopicDisabled
@@ -54,7 +54,7 @@
     canCreateTopicOnTag=canCreateTopicOnTag
   }}
 
-  {{plugin-outlet name="after-create-topic-button" tagName=""
+  {{plugin-outlet name="after-create-topic-button" connectorTagName="div" tagName=""
     args=(hash
       canCreateTopic=canCreateTopic
       createTopicDisabled=createTopicDisabled

app/assets/javascripts/discourse/app/templates/components/edit-category-security.hbs

@@ -52,4 +52,4 @@
   {{/unless}}
 </section>
 
-{{plugin-outlet name="category-custom-security" args=(hash category=category) connectorTagName="" tagName="section"}}
+{{plugin-outlet name="category-custom-security" args=(hash category=category) tagName="section"}}

app/assets/javascripts/discourse/app/templates/components/edit-category-settings.hbs

@@ -310,7 +310,7 @@
       </label>
     </section>
 
-    {{plugin-outlet name="category-email-in" args=(hash category=category)}}
+    {{plugin-outlet name="category-email-in" tagName="span" connectorTagName="div" args=(hash category=category)}}
   {{/if}}
 
   {{#unless emailInEnabled}}
@@ -321,4 +321,4 @@
   {{/unless}}
 </section>
 
-{{plugin-outlet name="category-custom-settings" args=(hash category=category) connectorTagName="" tagName="section"}}
+{{plugin-outlet name="category-custom-settings" args=(hash category=category) tagName="section"}}

app/assets/javascripts/discourse/app/templates/components/group-navigation.hbs

@@ -23,5 +23,5 @@
       {{/link-to}}
     </li>
   {{/each}}
-  {{plugin-outlet name="group-reports-nav-item" args=(hash group=group) tagName="" connectorTagName="li"}}
+  {{plugin-outlet name="group-reports-nav-item" args=(hash group=group) connectorTagName="li"}}
 {{/mobile-nav}}

app/assets/javascripts/discourse/app/templates/components/group-post.hbs

@@ -16,7 +16,7 @@
       <div class="group-member-info names">
         <span class="name">{{name}}</span>
         {{#if post.user.title}}<span class="user-title">{{post.user.title}}</span>{{/if}}
-        {{plugin-outlet name="group-post-additional-member-info" noTags=true args=(hash user=post.user)}}
+        {{plugin-outlet name="group-post-additional-member-info" args=(hash user=post.user)}}
       </div>
     {{/if}}
   </div>