Merge pull request #1499 from appknox/PD-1612-fix-ember-template-lint…

…-errors upgrade and fix ember-template-lint issues
appknox · Dec 27, 2024 · fb6c306 · fb6c306
2 parents 0ab70f2 + 2b6703f
commit fb6c306
Show file tree

Hide file tree

Showing 37 changed files with 2,591 additions and 5,143 deletions.
diff --git a/.template-lintrc.js b/.template-lintrc.js
@@ -2,5 +2,11 @@
 
 module.exports = {
   extends: 'recommended',
-  rules: { 'no-curly-component-invocation': { allow: ['day-js'] } },
+  rules: {
+    'no-curly-component-invocation': { allow: ['day-js'] },
+    // TODO: Remove these rules later on
+    'no-at-ember-render-modifiers': 'off',
+    'no-builtin-form-components': 'off',
+    'no-autofocus-attribute': 'off',
+  },
 };
diff --git a/app/components/ak-accordion/index.stories.js b/app/components/ak-accordion/index.stories.js
@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
@@ -32,6 +33,14 @@ const accordionList = [
   },
 ];
 
+function handleChange() {
+  this.set('accordionExpanded', !this.accordionExpanded);
+}
+
+function handleChangeId(id) {
+  this.set(id, !this[id]);
+}
+
 const Template = (args) => ({
   template: hbs`
     <AkStack @direction="column" @spacing="3" @width="full" class="mt-3">
@@ -40,14 +49,14 @@ const Template = (args) => ({
         
         <AkAccordion
             @isExpanded={{this.accordionExpanded}}
-            @onChange={{action this.handleChange}}
+            @onChange={{this.handleChange}}
             @summaryText={{this.summaryText}}
             @summaryIconName={{this.summaryIconName}}
             @disabled={{this.disabled}}
             @variant={{this.accordionVariant}}
         >
             <:content>
-              <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+              <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
                 <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content</AkTypography>
               </div>
             </:content>
@@ -69,7 +78,7 @@ const Template = (args) => ({
               @variant={{accordion.accordionVariant}}
             >
               <:content>
-                <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+                <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
                   <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content</AkTypography>
                 </div>
               </:content>
@@ -90,9 +99,7 @@ Default.args = {
   summaryIconName: 'account-box',
   accordionVariant: 'secondary',
   accordionExpanded: false,
-  handleChange() {
-    this.set('accordionExpanded', !this.accordionExpanded);
-  },
+  handleChange: action(handleChange),
 };
 
 const WithIconTemplate = (args) => ({
@@ -101,13 +108,13 @@ const WithIconTemplate = (args) => ({
       <AkAccordion
         @id="withIcon1"
         @isExpanded={{this.withIcon1}}
-        @onChange={{action this.handleChange}}
+        @onChange={{this.handleChange}}
         @summaryText="Secondary - Summary text with Icon"
         @variant="secondary"
         @summaryIconName="people"
       >
         <:content>
-          <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+          <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
             <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content</AkTypography>
           </div>
         </:content>
@@ -116,13 +123,13 @@ const WithIconTemplate = (args) => ({
       <AkAccordion
         @id="withIcon2"
         @isExpanded={{this.withIcon2}}
-        @onChange={{action this.handleChange}}
+        @onChange={{this.handleChange}}
         @summaryText="Primary - Summary text with Icon"
         @variant="primary"
         @summaryIconName="people"
       >
         <:content>
-          <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+          <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
             <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content</AkTypography>
           </div>
         </:content>
@@ -131,14 +138,14 @@ const WithIconTemplate = (args) => ({
       <AkAccordion
         @id="withIcon3"
         @isExpanded={{this.withIcon3}}
-        @onChange={{action this.handleChange}}
+        @onChange={{this.handleChange}}
         @disabled={{true}}
         @summaryText="Disabled - Summary text with Icon"
         @variant="secondary"
         @summaryIconName="people"
       >
         <:content>
-          <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+          <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
             <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content</AkTypography>
           </div>
         </:content>
@@ -150,9 +157,7 @@ const WithIconTemplate = (args) => ({
     withIcon1: false,
     withIcon2: false,
     withIcon3: false,
-    handleChange(id) {
-      this.set(id, !this[id]);
-    },
+    handleChange: action(handleChangeId),
   },
 });
 
@@ -168,7 +173,7 @@ const CustomTemplate = (args) => ({
         <AkAccordion  
           @id="withIcon1"
           @isExpanded={{this.withIcon1}}
-          @onChange={{action this.handleChange}}
+          @onChange={{this.handleChange}}
         >
           <:summary as |acs|>
             <AkStack @justifyContent="space-between" @alignItems="center" @width="full" class="p-2" {{style border="1px solid #2db421" cursor="pointer"}} {{on 'click' acs.onSummaryClick}}>
@@ -184,7 +189,7 @@ const CustomTemplate = (args) => ({
           </:summary>
 
           <:content>
-            <div class="p-3 m-2" style="color: #424651; background-color: #fafafa;" >
+            <div class="p-3 m-2" {{style color='#424651' backgroundColor='#fafafa'}} >
               <AkTypography @variant="body1" @gutterBottom={{true}} @color="inherit">- To customize the entire summary bar use the <span class="bold">:summary</span> block. </AkTypography>
               <AkTypography @variant="body1" @color="inherit">- The API needed to function was exposed to this block.</AkTypography>
             </div>
@@ -200,7 +205,7 @@ const CustomTemplate = (args) => ({
         <AkAccordion    
           @id="withIcon2"
           @isExpanded={{this.withIcon2}}
-          @onChange={{action this.handleChange}}
+          @onChange={{this.handleChange}}
           @variant="primary" 
           @summaryText="Secondary Variant with custom icon."
          >
@@ -212,7 +217,7 @@ const CustomTemplate = (args) => ({
           </:summaryIcon>
 
           <:content>
-            <div class="p-3 m-2" style="color: #424651; background-color: #fafafa;" >
+            <div class="p-3 m-2" {{style color='#424651' backgroundColor='#fafafa'}} >
               <AkTypography @variant="body1" @gutterBottom={{true}} @color="inherit">- To customize the summary icon only use the <span class="bold">:summaryIcon</span> block. </AkTypography>
             </div>
           </:content>
@@ -227,7 +232,7 @@ const CustomTemplate = (args) => ({
         <AkAccordion    
           @id="withIcon3"
           @isExpanded={{this.withIcon3}}
-          @onChange={{action this.handleChange}}
+          @onChange={{this.handleChange}}
           @variant="primary" 
           @summaryIconName="people"
         >
@@ -238,7 +243,7 @@ const CustomTemplate = (args) => ({
           </:summaryText>
 
           <:content>
-            <div class="p-3 m-2" style="color: #424651; background-color: #fafafa;" >
+            <div class="p-3 m-2" {{style color='#424651' backgroundColor='#fafafa'}} >
               <AkTypography @variant="body1" @gutterBottom={{true}} @color="inherit">- To customize the summary text only use the <span class="bold">:summaryText</span> block. </AkTypography>
             </div>
           </:content>
@@ -251,9 +256,7 @@ const CustomTemplate = (args) => ({
     withIcon1: false,
     withIcon2: false,
     withIcon3: false,
-    handleChange(id) {
-      this.set(id, !this[id]);
-    },
+    handleChange: action(handleChangeId),
   },
 });
 
@@ -275,7 +278,7 @@ const GroupsTemplate = (args) => ({
               @variant={{accordion.accordionVariant}}
             >
               <:content>
-                <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+                <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
                   <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content</AkTypography>
                 </div>
               </:content>
@@ -297,7 +300,7 @@ const GroupsTemplate = (args) => ({
               @variant={{accordion.accordionVariant}}
             >
               <:content>
-                <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+                <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
                   <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content</AkTypography>
                 </div>
               </:content>
@@ -321,15 +324,15 @@ const MountAndUnmountContentTemplate = (args) => ({
         <AkAccordion
             @id="accordion1"
             @isExpanded={{this.accordion1}}
-            @onChange={{action this.handleChange}}
+            @onChange={{this.handleChange}}
             @summaryText="Mounts content on expand"
             @summaryIconName={{this.summaryIconName}}
             @mountContentOnExpand={{this.mountContentOnExpand}}
             @disabled={{this.disabled}}
             @variant={{this.accordionVariant}}
         >
             <:content>
-              <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+              <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
                 <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content that mounts only after first expansion</AkTypography>
               </div>
             </:content>
@@ -342,15 +345,15 @@ const MountAndUnmountContentTemplate = (args) => ({
         <AkAccordion
             @id="accordion2"
             @isExpanded={{this.accordion2}}
-            @onChange={{action this.handleChange}}
+            @onChange={{this.handleChange}}
             @summaryText="Unmounts content on collapse"
             @summaryIconName={{this.summaryIconName}}
             @unmountContentOnCollapse={{this.unmountContentOnCollapse}}
             @disabled={{this.disabled}}
             @variant="primary"
         >
             <:content>
-              <div class="p-3 m-2" style="color: #ffffff; background-color: #424651;" >
+              <div class="p-3 m-2" {{style color='#ffffff' backgroundColor='#424651'}} >
                 <AkTypography @variant="subtitle1" @color="inherit">This is an accordion content that unmounts on collapse.</AkTypography>
               </div>
             </:content>
@@ -367,9 +370,7 @@ const MountAndUnmountContentTemplate = (args) => ({
     unmountContentOnCollapse: true,
     accordion1: false,
     accordion2: false,
-    handleChange(id) {
-      this.set(id, !this[id]);
-    },
+    handleChange: action(handleChangeId),
   },
 });
 

diff --git a/app/components/ak-autocomplete/index.hbs b/app/components/ak-autocomplete/index.hbs
@@ -64,11 +64,11 @@
         {{/if}}
 
       {{else}}
-        {{#each this.filteredOptions as |option|}}
+        {{#each this.filteredOptions as |option idx|}}
           <AkList::Item
             data-test-ak-autocomplete-item
             @button={{true}}
-            @divider={{not-eq this.filteredOptions.lastObject option}}
+            @divider={{not-eq this.filteredOptionsLastIndex idx}}
             {{on 'click' (fn this.onOptionClick option)}}
           >
             {{yield option}}

diff --git a/app/components/ak-autocomplete/index.stories.js b/app/components/ak-autocomplete/index.stories.js
@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
@@ -24,19 +25,17 @@ const objectOptions = [
   { label: 'username2' },
 ];
 
-const AutocompleteTemplate = (args) => {
-  const actions = {
-    onChange(searchValue) {
-      this.set('searchQuery', searchValue);
-    },
-  };
+function onChange(searchValue) {
+  this.set('searchQuery', searchValue);
+}
 
+const AutocompleteTemplate = (args) => {
   return {
     template: hbs`
       <AkAutocomplete
         @options={{this.options}}
         @searchQuery={{this.searchQuery}}
-        @onChange={{action this.onChange}}
+        @onChange={{this.handleChange}}
         @loading={{this.loadingOptions}}
         @filterFn={{this.filterFn}}
         @filterKey={{this.filterKey}}
@@ -52,7 +51,7 @@ const AutocompleteTemplate = (args) => {
       `,
     context: {
       ...args,
-      ...actions,
+      handleChange: action(onChange),
       options: args.objectOptions ? objectOptions : stringOptions,
     },
   };

diff --git a/app/components/ak-autocomplete/index.ts b/app/components/ak-autocomplete/index.ts
@@ -74,6 +74,10 @@ export default class AkAutocompleteComponent<T> extends Component<
     return this.args.options;
   }
 
+  get filteredOptionsLastIndex() {
+    return this.filteredOptions.length - 1;
+  }
+
   get filteredOptions() {
     const query = this.searchQuery.toLowerCase();
 

diff --git a/app/components/ak-checkbox-tree/index.stories.js b/app/components/ak-checkbox-tree/index.stories.js
@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
@@ -93,14 +94,13 @@ const TREE_DATA = [
   },
 ];
 
-const actions = {
-  onExpand(expandedItems) {
-    this.set('expanded', expandedItems);
-  },
-  onCheck(checkedItems) {
-    this.set('checked', checkedItems);
-  },
-};
+function onExpand(expandedItems) {
+  this.set('expanded', expandedItems);
+}
+
+function onCheck(checkedItems) {
+  this.set('checked', checkedItems);
+}
 
 const Template = (args) => ({
   template: hbs`
@@ -109,11 +109,15 @@ const Template = (args) => ({
       @expanded={{this.expanded}}
       @cascade={{this.cascade}}
       @checked={{this.checked}}
-      @onCheck={{action this.onCheck}}
-      @onExpand={{action this.onExpand}}
+      @onCheck={{this.onCheck}}
+      @onExpand={{this.onExpand}}
     />
   `,
-  context: { ...args, ...actions },
+  context: {
+    ...args,
+    onCheck: action(onCheck),
+    onExpand: action(onExpand),
+  },
 });
 
 export const Basic = Template.bind({});