DEV: Fix array-related linting issues in templates (#22935)

and remove more linting exemptions

.template-lintrc.js

@@ -5,7 +5,6 @@ module.exports = {
   rules: {
     "no-action-modifiers": true,
     "no-args-paths": true,
-    "no-array-prototype-extensions": false,
     "no-attrs-in-components": true,
     "no-capital-arguments": false, // TODO: we extensively use `args` argument name
     "no-curly-component-invocation": {
@@ -22,7 +21,6 @@ module.exports = {
     "no-implicit-this": {
       allow: ["loading-spinner"],
     },
-    "no-obscure-array-access": false,
     "require-mandatory-role-attributes": false,
     "require-media-caption": false,
     // Begin prettier compatibility

app/assets/javascripts/admin/addon/components/modal/merge-users-prompt.hbs

@@ -23,10 +23,7 @@
   <:footer>
     <DButton
       class="btn-primary"
-      @action={{fn
-        @model.showMergeConfirmation
-        this.targetUsername.firstObject
-      }}
+      @action={{fn @model.showMergeConfirmation (get this.targetUsername "0")}}
       @icon="trash-alt"
       @disabled={{this.mergeDisabled}}
       @translatedLabel={{i18n

app/assets/javascripts/admin/addon/controllers/admin-user-fields.js

@@ -11,11 +11,18 @@ export default class AdminUserFieldsController extends Controller {
   @service dialog;
 
   fieldTypes = null;
+  fieldSortOrder = ["position"];
 
   @gte("model.length", MAX_FIELDS) createDisabled;
   @sort("model", "fieldSortOrder") sortedFields;
 
-  fieldSortOrder = ["position"];
+  get firstField() {
+    return this.sortedFields[0];
+  }
+
+  get lastField() {
+    return this.sortedFields[this.sortedFields.length - 1];
+  }
 
   @action
   createField() {

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

@@ -8,8 +8,8 @@
       <AdminUserFieldItem
         @userField={{uf}}
         @fieldTypes={{this.fieldTypes}}
-        @firstField={{this.sortedFields.firstObject}}
-        @lastField={{this.sortedFields.lastObject}}
+        @firstField={{this.firstField}}
+        @lastField={{this.lastField}}
         @destroyAction={{action "destroyField"}}
         @moveUpAction={{action "moveUp"}}
         @moveDownAction={{action "moveDown"}}

app/assets/javascripts/discourse/app/components/emoji-picker.hbs

@@ -29,7 +29,7 @@
           {{on "click" (fn this.onCategorySelection (concat "custom-" group))}}
           class="btn btn-default category-button emoji"
         >
-          {{replace-emoji (concat ":" emojis.firstObject.code ":")}}
+          {{replace-emoji (concat ":" (get emojis "0.code") ":")}}
         </button>
       {{/each-in}}
     </div>

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.hbs

@@ -23,7 +23,7 @@
       {{#each this.filteredCategoriesGroupings as |categories|}}
         <div
           class="sidebar-categories-form__row"
-          style={{html-safe (border-color categories.0.color "left")}}
+          style={{border-color (get categories "0.color") "left"}}
         >
 
           {{#each categories as |category|}}

plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs

@@ -7,7 +7,7 @@
             {{@channel.chatable.users.length}}
           </span>
         {{else}}
-          <Chat::UserAvatar @user={{@channel.chatable.users.firstObject}} />
+          <Chat::UserAvatar @user={{get @channel.chatable.users "0"}} />
         {{/if}}
       </div>
     {{/if}}
@@ -18,12 +18,12 @@
           {{#if this.multiDm}}
             <span class="chat-channel-title__name">{{this.usernames}}</span>
           {{else}}
-            {{#let @channel.chatable.users.firstObject as |user|}}
+            {{#let (get @channel.chatable.users "0") as |user|}}
               <span class="chat-channel-title__name">{{user.username}}</span>
               {{#if this.showUserStatus}}
                 <UserStatusMessage
                   @class="chat-channel-title__user-status-message"
-                  @status={{@channel.chatable.users.firstObject.status}}
+                  @status={{get @channel.chatable.users "0.status"}}
                   @showDescription={{if this.site.mobileView "true"}}
                 />
               {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs

@@ -109,7 +109,7 @@
                   width="18"
                   height="18"
                   class="emoji"
-                  src={{emojis.firstObject.url}}
+                  src={{get emojis "0.url"}}
                 />
               {{/if}}
             </DButton>
@@ -177,7 +177,7 @@
               </h2>
               <div class="chat-emoji-picker__section-emojis">
                 {{! we always want the first emoji for tabbing}}
-                {{#let emojis.firstObject as |emoji|}}
+                {{#let (get emojis "0") as |emoji|}}
                   <img
                     width="32"
                     height="32"

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-input-fields.hbs

@@ -44,7 +44,7 @@
 
 <StyleguideExample
   @title="inline-form with <ComboBox>"
-  @initialValue={{@dummy.options.0.name}}
+  @initialValue={{get @dummy "options.0.name"}}
   as |value|
 >
   <div class="inline-form">

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs

@@ -1,6 +1,6 @@
 <StyleguideExample
   @title="<ComboBox>"
-  @initialValue={{@dummy.options.0.name}}
+  @initialValue={{get @dummy "options.0.name"}}
   as |value|
 >
   <ComboBox
@@ -12,7 +12,7 @@
 
 <StyleguideExample
   @title="filterable <ComboBox>"
-  @initialValue={{@dummy.categories.0.name}}
+  @initialValue={{get @dummy "categories.0.name"}}
   as |value|
 >
   <ComboBox
@@ -25,7 +25,7 @@
 
 <StyleguideExample
   @title="<ComboBox> with a default state"
-  @initialValue={{@dummy.options.0.name}}
+  @initialValue={{get @dummy "options.0.name"}}
   as |value|
 >
   <ComboBox
@@ -38,7 +38,7 @@
 
 <StyleguideExample
   @title="<ComboBox> clearable"
-  @initialValue={{@dummy.options.0.name}}
+  @initialValue={{get @dummy "options.0.name"}}
   as |value|
 >
   <ComboBox
@@ -68,7 +68,7 @@
 
 <StyleguideExample
   @title="<CategoryChooser>"
-  @initialValue={{@categories.0.name}}
+  @initialValue={{get @categories "0" "name"}}
   as |value|
 >
   <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
@@ -88,7 +88,7 @@
 
 <StyleguideExample @title="<CategoryNotificationsButton>">
   <CategoryNotificationsButton
-    @category={{get @dummy.categories 0}}
+    @category={{get @dummy "categories.0"}}
     @value={{1}}
     @onChange={{@dummyAction}}
   />