Merge pull request #752 from derrabauke/octane-pr-23

chore(lint): configure linting for gradual code adaption

Author: derrabauke

.eslintignore

@@ -20,3 +20,6 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+# template lint ci config
+.template-lintrc-ci.js

.eslintrc.js

@@ -3,11 +3,15 @@
 module.exports = {
   extends: ["@adfinis-sygroup/eslint-config/ember-app"],
   rules: {
+    "ember/no-actions-hash": "warn",
+    "ember/no-component-lifecycle-hooks": "warn",
     "ember/no-mixins": "warn",
     "ember/no-new-mixins": "warn",
     "ember/no-classic-classes": "warn",
+    "ember/no-classic-components": "warn",
     "ember/no-get": "warn",
     "ember/no-observers": "warn",
     "qunit/no-assert-equal": "warn",
+    "ember/require-tagless-components": "warn",
   },
 };

.template-lintrc-ci.js

@@ -0,0 +1,22 @@
+"use strict";
+
+module.exports = {
+  extends: "recommended",
+  rules: {
+    // following rules are for temporary use only, delete when ember 4.0 ready
+    "no-action": "warn",
+    "no-curly-component-invocation": "warn",
+    "no-duplicate-id": "warn",
+    "no-link-to-positional-params": "warn",
+    "no-link-to-tagname": "warn",
+    "no-invalid-interactive": "warn",
+    "no-implicit-this": "warn",
+    "no-passed-in-event-handlers": "warn",
+    "no-positional-data-test-selectors": "warn",
+    "no-unknown-arguments-for-builtin-components": "warn",
+    "no-with": "warn",
+    "no-yield-only": "warn",
+    "require-input-label": "warn",
+    "require-has-block-helper": "warn",
+  },
+};

app/abilities/report.js

@@ -3,6 +3,7 @@ import { Ability } from "ember-can";
 
 export default Ability.extend({
   canEdit: computed(
+    // eslint-disable-next-line ember/use-brace-expansion
     "model.user.{id,supervisors}",
     "model.verifiedBy.id",
     "model.{billed,customerAssignees,projectAssignees,taskAssignees}",

app/components/attendance-slider/component.js

@@ -4,13 +4,13 @@
  * @public
  */
 
-import Component from "@glimmer/component";
 import { htmlSafe } from "@ember/string";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { dropTask } from "ember-concurrency";
 import { padStartTpl } from "ember-pad/utils/pad";
 import moment from "moment";
 import formatDuration from "timed/utils/format-duration";
-import { tracked } from "@glimmer/tracking";
-import { dropTask } from "ember-concurrency";
 
 const padTpl2 = padStartTpl(2);
 

app/components/pagination-limit/template.hbs

@@ -1,10 +1,15 @@
 Per page:
-{{#each this.limits as |l i|}}
+{{#each this.limits as |l|}}
   <span>
     {{#if (eq this.page_size l)}}
       {{l}}
     {{else}}
-      <a href="#" {{action (queue (action (mut this.page) 1) (action (mut this.page_size) l))}}>{{l}}</a>
+      <a
+        href="#"
+        {{action
+          (queue (action (mut this.page) 1) (action (mut this.page_size) l))
+        }}
+      >{{l}}</a>
     {{/if}}
   </span>
-{{/each}}
+{{/each}}

app/components/sy-timepicker/template.hbs

@@ -7,6 +7,7 @@
   maxlength={{this.maxlength}}
   placeholder={{this.placeholder}}
   autocomplete="off"
+  {{!template-lint-disable no-down-event-binding}}
   {{on "keydown" this.keyDown}}
   {{on "change" this.change}}
   {{on "focusout" (optional @onFocusOut)}}

app/components/user-selection/component.js

@@ -1,11 +1,10 @@
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { trackedTask } from "ember-resources/util/ember-concurrency";
 import { restartableTask } from "ember-concurrency";
-
-import customSelectedTemplate from "timed/components/optimized-power-select/custom-select/user-selection";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 import customOptionTemplate from "timed/components/optimized-power-select/custom-options/user-option";
+import customSelectedTemplate from "timed/components/optimized-power-select/custom-select/user-selection";
 
 export default class UserSelection extends Component {
   selectedTemplate = customSelectedTemplate;

app/components/welcome-modal/template.hbs

@@ -1,8 +1,8 @@
 <SyModal @visible={{this.visible}} as |modal|>
   <modal.body>
-    <div class="text-center">
+    <div class="text-center welcome-modal-body">
       <h1>Welcome to Timed!</h1>
-      <img style="max-width:50%" src="/assets/logo.svg">
+      <img class="logo" src="/assets/logo.svg" alt="timed" />
       <h4>Would you like to take a tour?</h4>
     </div>
   </modal.body>
@@ -12,23 +12,26 @@
       type="button"
       class="btn btn-never"
       data-test-tour-never
-      {{action this.on-never}}>
+      {{action this.on-never}}
+    >
       Never
     </button>
 
     <button
       type="button"
       class="btn btn-default"
       data-test-tour-later
-      {{action this.on-later}}>
+      {{action this.on-later}}
+    >
       Later
     </button>
 
     <button
       type="submit"
       class="btn btn-primary"
       data-test-tour-start
-      {{action this.on-start}}>
+      {{action this.on-start}}
+    >
       Sure
     </button>
   </modal.footer>

app/index/template.hbs

@@ -225,7 +225,7 @@
               {{/each}}
             </div>
           </f.input>
-          <f.input @name="dates" as |fi|>
+          <f.input @name="dates">
             <PowerCalendarMultiple
               class="calendar"
               @selected={{changeset.dates}}

app/models/task.js

@@ -4,6 +4,7 @@
  * @public
  */
 import Model, { attr, belongsTo, hasMany } from "@ember-data/model";
+import { get } from "@ember/object";
 
 /**
  * The task model
@@ -73,8 +74,8 @@ export default class Task extends Model {
 
   get longName() {
     const taskName = this.name;
-    const projectName = this.get("project.name");
-    const customerName = this.get("project.customer.name");
+    const projectName = get(this, "project.name");
+    const customerName = get(this, "project.customer.name");
 
     return `${customerName} > ${projectName} > ${taskName}`;
   }

app/statistics/route.js

@@ -1,3 +1,3 @@
 import Route from "@ember/routing/route";
 
-export default class StatisticsRoute extends Route{};
+export default class StatisticsRoute extends Route {}

app/styles/app.scss

@@ -33,6 +33,7 @@
 @import "components/sy-datepicker";
 @import "components/attendance-slider";
 @import "components/statistic-list-bar";
+@import "components/welcome-modal";
 
 html {
   hyphens: auto;

app/styles/components/welcome-modal.scss

@@ -0,0 +1,5 @@
+.welcome-modal-body {
+  .logo {
+    max-width: 50%;
+  }
+}

app/users/edit/index/template.hbs

@@ -20,15 +20,22 @@
               </tr>
               <tr>
                 <td>Contract type:</td>
-                <td>{{if this.model.activeEmployment.isExternal "External" "Internal"}}</td>
+                <td>{{if
+                    this.model.activeEmployment.isExternal
+                    "External"
+                    "Internal"
+                  }}</td>
               </tr>
               <tr>
                 <td>Percentage:</td>
                 <td>{{this.model.activeEmployment.percentage}}%</td>
               </tr>
               <tr>
                 <td>Worktime:</td>
-                <td>{{humanize-duration this.model.activeEmployment.worktimePerDay false}}</td>
+                <td>{{humanize-duration
+                    this.model.activeEmployment.worktimePerDay
+                    false
+                  }}</td>
               </tr>
             {{/if}}
           </tbody>
@@ -61,16 +68,20 @@
                   <tr>
                     <td>{{employment.location.name}}</td>
                     <td>{{employment.percentage}}%</td>
-                    <td>{{moment-format employment.start 'DD.MM.YYYY'}}</td>
-                    <td>{{if employment.end (moment-format employment.end 'DD.MM.YYYY') '-'}}</td>
+                    <td>{{moment-format employment.start "DD.MM.YYYY"}}</td>
+                    <td>{{if
+                        employment.end
+                        (moment-format employment.end "DD.MM.YYYY")
+                        "-"
+                      }}</td>
                   </tr>
                 {{/each}}
               </tbody>
             </table>
-          {{^}}
+          {{else}}
             <div class="card-block empty">
               <div>
-                {{fa-icon 'briefcase'}}
+                {{fa-icon "briefcase"}}
                 <p>
                   No employments found...
                 </p>
@@ -101,19 +112,19 @@
                 </tr>
               </thead>
               <tbody>
-                {{#each absences as |absence index|}}
+                {{#each absences as |absence|}}
                   <tr>
                     <td>{{absence.absenceType.name}}</td>
-                    <td>{{moment-format absence.date 'DD.MM.YYYY'}}</td>
+                    <td>{{moment-format absence.date "DD.MM.YYYY"}}</td>
                     <td>{{absence.comment}}</td>
                   </tr>
                 {{/each}}
               </tbody>
             </table>
-          {{^}}
+          {{else}}
             <div class="card-block empty">
               <div>
-                {{fa-icon 'calendar-times-o'}}
+                {{fa-icon "calendar-times-o"}}
                 <p>
                   No absences found...
                 </p>

config/targets.js

@@ -1,5 +1,9 @@
 "use-strict";
 
 module.exports = {
-  browsers: ["last 2 Firefox versions", "last 2 Chrome versions"],
+  browsers: [
+    "last 2 Firefox versions",
+    "last 2 Chrome versions",
+    "last 1 Safari versions",
+  ],
 };

package.json

@@ -13,9 +13,10 @@
     "build": "ember build --environment=production",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
+    "lint:hbs": "ember-template-lint . --config-path .template-lintrc-ci.js",
     "lint:hbs:fix": "ember-template-lint . --fix",
-    "lint:js": "eslint . --cache",
+    "lint:js": "eslint --config .eslintrc.js .",
+    "lint:js:fix": "eslint --config .eslintrc.js . --fix",
     "prepare": "husky install",
     "preinstall": "npx only-allow pnpm",
     "lint:js:fix": "eslint . --fix",
@@ -29,7 +30,7 @@
     ]
   },
   "lint-staged": {
-    "*.js": "eslint --cache --fix",
+    "*.js": "eslint --config .eslintrc.js --cache --fix",
     "*.hbs": "ember-template-lint --fix",
     "*.{scss,graphql,json,md,yml}": "prettier --write"
   },

testem.js

@@ -5,7 +5,7 @@ module.exports = {
   disable_watching: true,
   parallel: -1,
   launch_in_dev: [],
-  launch_in_ci: ["chrome", "firefox"],
+  launch_in_ci: ["chrome"],
   browser_start_timeout: 120,
   browser_args: {
     Chrome: {
@@ -20,7 +20,6 @@ module.exports = {
         "--remote-debugging-port=9222",
         "--window-size=1440,900",
       ].filter(Boolean),
-      firefox: ["--headless"],
     },
   },
 };

tests/acceptance/statistics-test.js

@@ -1,11 +1,4 @@
-import {
-  click,
-  fillIn,
-  currentURL,
-  visit,
-  find,
-  settled,
-} from "@ember/test-helpers";
+import { click, fillIn, currentURL, visit, find } from "@ember/test-helpers";
 import { setupMirage } from "ember-cli-mirage/test-support";
 import { setupApplicationTest } from "ember-qunit";
 import { authenticateSession } from "ember-simple-auth/test-support";

tests/integration/components/statistic-list/component-test.js

@@ -1,6 +1,6 @@
 import { A } from "@ember/array";
 import ArrayProxy from "@ember/array/proxy";
-import { render } from "@ember/test-helpers";
+import { render, waitFor } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { setupRenderingTest } from "ember-qunit";
 import moment from "moment";
@@ -99,6 +99,8 @@ module("Integration | Component | statistic list", function (hooks) {
       </div>
     `);
 
+    await waitFor("table tbody tr");
+
     assert.dom("[data-test-statistic-list-column]").exists({ count: 4 });
     assert.dom("[data-test-statistic-list-row]").exists({ count: 2 });
     assert.dom(".total").hasText("34h 30m");

tests/integration/components/user-selection/component-test.js

@@ -1,8 +1,8 @@
 import { find, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
+import { setupMirage } from "ember-cli-mirage/test-support";
 import { setupRenderingTest } from "ember-qunit";
 import { module, test } from "qunit";
-import { setupMirage } from "ember-cli-mirage/test-support";
 
 module("Integration | Component | user selection", function (hooks) {
   setupRenderingTest(hooks);