Auto merge of #2052 - Turbo87:tagless, r=locks

Migrate to tagless components

"Tagless" components are components with `tagName: ''`, which causes them to not have an implicit wrapping element. This is the new default in Ember.js apps with components based on `@glimmer/component`. To make it easier to eventually migrate to these new Glimmer components we'll set `tagName: ''` on some of the existing components that can automatically be migrated.

This PR was created using https://github.com/ember-codemods/tagless-ember-components-codemod

r? @locks

Author: bors

app/components/badge-appveyor.js

@@ -3,9 +3,7 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
-
+  tagName: '',
   id: alias('badge.attributes.id'),
   repository: alias('badge.attributes.repository'),
 

app/components/badge-azure-devops.js

@@ -3,13 +3,14 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   project: alias('badge.attributes.project'),
   pipeline: alias('badge.attributes.pipeline'),
+
   build: computed('badge.attributes.build', function() {
     return this.get('badge.attributes.build') || '1';
   }),
+
   text: computed('pipeline', function() {
     return `Azure Devops build status for the ${this.pipeline} pipeline`;
   }),

app/components/badge-bitbucket-pipelines.js

@@ -3,12 +3,13 @@ import { alias } from '@ember/object/computed';
 import Component from '@ember/component';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   branch: computed('badge.attributes.branch', function() {
     return encodeURIComponent(this.get('badge.attributes.branch'));
   }),
+
   text: computed('badge.attributes.branch', function() {
     const branch = this.get('badge.attributes.branch');
     return `Bitbucket Pipelines build status for the ${branch} branch`;

app/components/badge-circle-ci.js

@@ -3,12 +3,13 @@ import { alias } from '@ember/object/computed';
 import Component from '@ember/component';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   branch: computed('badge.attributes.branch', function() {
     return encodeURIComponent(this.get('badge.attributes.branch') || 'master');
   }),
+
   text: computed('branch', function() {
     return `Circle CI build status for the ${this.branch} branch`;
   }),

app/components/badge-cirrus-ci.js

@@ -3,12 +3,13 @@ import { alias } from '@ember/object/computed';
 import Component from '@ember/component';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   branch: computed('badge.attributes.branch', function() {
     return encodeURIComponent(this.get('badge.attributes.branch') || 'master');
   }),
+
   text: computed('branch', function() {
     return `Cirrus CI build status for the ${this.branch} branch`;
   }),

app/components/badge-codecov.js

@@ -3,15 +3,17 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   branch: computed('badge.attributes.branch', function() {
     return this.get('badge.attributes.branch') || 'master';
   }),
+
   service: computed('badge.attributes.service', function() {
     return this.get('badge.attributes.service') || 'github';
   }),
+
   text: computed('branch', function() {
     return `CodeCov coverage status for the ${this.branch} branch`;
   }),

app/components/badge-coveralls.js

@@ -3,15 +3,17 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   branch: computed('badge.attributes.branch', function() {
     return this.get('badge.attributes.branch') || 'master';
   }),
+
   service: computed('badge.attributes.service', function() {
     return this.get('badge.attributes.service') || 'github';
   }),
+
   text: computed('branch', function() {
     return `Coveralls coverage status for the ${this.branch} branch`;
   }),

app/components/badge-gitlab.js

@@ -3,12 +3,13 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   branch: computed('badge.attributes.branch', function() {
     return this.get('badge.attributes.branch') || 'master';
   }),
+
   text: computed('badge', function() {
     return `GitLab build status for the ${this.branch} branch`;
   }),

app/components/badge-is-it-maintained-issue-resolution.js

@@ -3,9 +3,9 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   text: computed('badge', function() {
     return `Is It Maintained average time to resolve an issue`;
   }),

app/components/badge-is-it-maintained-open-issues.js

@@ -3,9 +3,9 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   text: computed('badge', function() {
     return `Is It Maintained percentage of issues still open`;
   }),

app/components/badge-maintenance.js

@@ -3,15 +3,18 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
+
   escapedStatus: computed('badge', function() {
     return this.get('badge.attributes.status').replace(/-/g, '--');
   }),
+
   none: computed('badge', function() {
     return this.get('badge.attributes.status') === 'none' || !this.get('badge.attributes.status');
   }),
+
   status: alias('badge.attributes.status'),
+
   // eslint-disable-next-line ember/require-return-from-computed
   color: computed('badge', function() {
     switch (this.get('badge.attributes.status')) {
@@ -29,5 +32,6 @@ export default Component.extend({
         return 'red';
     }
   }),
+
   text: 'Maintenance intention for this crate',
 });

app/components/badge-travis-ci.js

@@ -3,12 +3,13 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'span',
-  classNames: ['badge'],
+  tagName: '',
   repository: alias('badge.attributes.repository'),
+
   branch: computed('badge.attributes.branch', function() {
     return this.get('badge.attributes.branch') || 'master';
   }),
+
   text: computed('branch', function() {
     return `Travis CI build status for the ${this.branch} branch`;
   }),

app/components/crate-badge.js

@@ -2,9 +2,7 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 
 export default Component.extend({
-  classNames: ['vers'],
-
-  tagName: 'span',
+  tagName: '',
 
   version: computed('crate.max_version', function() {
     return this.get('crate.max_version').replace('-', '--');

app/components/crate-row.js

@@ -2,10 +2,8 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 
 export default Component.extend({
-  classNames: ['crate', 'row'],
+  tagName: '',
   crateTomlText: computed('crate.name', 'max_version', function() {
     return `${this.get('crate.name')} = "${this.get('crate.max_version')}"`;
   }),
-
-  'data-test-crate-row': true,
 });

app/components/crate-toml-copy.js

@@ -2,7 +2,7 @@ import Component from '@ember/component';
 import { later } from '@ember/runloop';
 
 export default Component.extend({
-  classNames: ['crate-toml-copy'],
+  tagName: '',
   copyText: '',
   showSuccess: false,
   showNotification: false,

app/components/email-input.js

@@ -5,28 +5,32 @@ import { inject as service } from '@ember/service';
 import ajax from 'ember-fetch/ajax';
 
 export default Component.extend({
+  tagName: '',
   flashMessages: service(),
-
   type: '',
   value: '',
   isEditing: false,
   user: null,
   disableSave: empty('user.email'),
   notValidEmail: false,
   prevEmail: '',
+
   emailIsNull: computed('user.email', function() {
     let email = this.get('user.email');
     return email == null;
   }),
+
   emailNotVerified: computed('user.{email,email_verified}', function() {
     let email = this.get('user.email');
     let verified = this.get('user.email_verified');
 
     return email != null && !verified;
   }),
+
   isError: false,
   emailError: '',
   disableResend: false,
+
   resendButtonText: computed('disableResend', 'user.email_verification_sent', function() {
     if (this.disableResend) {
       return 'Sent!';

app/components/flash-message.js

@@ -5,8 +5,5 @@ import { inject as service } from '@ember/service';
 export default Component.extend({
   flashMessages: service(),
   message: readOnly('flashMessages.message'),
-
-  elementId: 'flash',
-  tagName: 'p',
-  classNameBindings: ['message:shown'],
+  tagName: '',
 });

app/components/owned-crate-row.js

@@ -3,7 +3,7 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
 export default Component.extend({
-  tagName: 'li',
+  tagName: '',
 
   name: alias('ownedCrate.name'),
   controlId: computed('ownedCrate.id', function() {

app/components/pending-owner-invite-row.js

@@ -1,6 +1,7 @@
 import Component from '@ember/component';
 
 export default Component.extend({
+  tagName: '',
   isAccepted: false,
   isDeclined: false,
   isError: false,

app/templates/components/badge-appveyor.hbs

@@ -1,8 +1,11 @@
-<a href="https://ci.appveyor.com/project/{{ this.projectName }}">
-  <img
-      src="{{ this.imageUrl }}"
-      alt="{{ this.text }}"
-      width="106"
-      height="20"
-      title="{{ this.text }}">
-</a>
+<span class="badge" ...attributes>
+  <a href="https://ci.appveyor.com/project/{{ this.projectName }}">
+    <img
+        src="{{ this.imageUrl }}"
+        alt="{{ this.text }}"
+        width="106"
+        height="20"
+        title="{{ this.text }}">
+  </a>
+  
+</span>

app/templates/components/badge-azure-devops.hbs

@@ -1,3 +1,6 @@
-<a href="https://dev.azure.com/{{ this.project }}/_build/latest?definitionId={{ this.build }}">
-  <img src="https://dev.azure.com/{{ this.project }}/_apis/build/status/{{ this.pipeline }}" alt="{{ this.text }}" title="{{ this.text }}">
-</a>
+<span class="badge" ...attributes>
+  <a href="https://dev.azure.com/{{ this.project }}/_build/latest?definitionId={{ this.build }}">
+    <img src="https://dev.azure.com/{{ this.project }}/_apis/build/status/{{ this.pipeline }}" alt="{{ this.text }}" title="{{ this.text }}">
+  </a>
+  
+</span>

app/templates/components/badge-bitbucket-pipelines.hbs

@@ -1,6 +1,9 @@
-<a href="https://bitbucket.org/{{ this.repository }}/addon/pipelines/home#!/results/branch/{{ this.branch }}/page/1">
-  <img
-      src="https://img.shields.io/bitbucket/pipelines/{{ this.repository }}/{{ this.branch }}"
-      alt="{{ this.text }}"
-      title="{{ this.text }}">
-</a>
+<span class="badge" ...attributes>
+  <a href="https://bitbucket.org/{{ this.repository }}/addon/pipelines/home#!/results/branch/{{ this.branch }}/page/1">
+    <img
+        src="https://img.shields.io/bitbucket/pipelines/{{ this.repository }}/{{ this.branch }}"
+        alt="{{ this.text }}"
+        title="{{ this.text }}">
+  </a>
+  
+</span>

app/templates/components/badge-circle-ci.hbs

@@ -1,6 +1,9 @@
-<a href="https://circleci.com/gh/{{ this.repository }}">
-  <img
-      src="https://circleci.com/gh/{{ this.repository }}/tree/{{ this.branch }}.svg?style=shield"
-      alt="{{ this.text }}"
-      title="{{ this.text }}">
-</a>
+<span class="badge" ...attributes>
+  <a href="https://circleci.com/gh/{{ this.repository }}">
+    <img
+        src="https://circleci.com/gh/{{ this.repository }}/tree/{{ this.branch }}.svg?style=shield"
+        alt="{{ this.text }}"
+        title="{{ this.text }}">
+  </a>
+  
+</span>

app/templates/components/badge-cirrus-ci.hbs

@@ -1,6 +1,9 @@
-<a href="https://cirrus-ci.com/github/{{ this.repository }}">
-  <img
-      src="https://api.cirrus-ci.com/github/{{ this.repository }}.svg?branch={{ this.branch }}"
-      alt="{{ this.text }}"
-      title="{{ this.text }}">
-</a>
+<span class="badge" ...attributes>
+  <a href="https://cirrus-ci.com/github/{{ this.repository }}">
+    <img
+        src="https://api.cirrus-ci.com/github/{{ this.repository }}.svg?branch={{ this.branch }}"
+        alt="{{ this.text }}"
+        title="{{ this.text }}">
+  </a>
+  
+</span>

app/templates/components/badge-codecov.hbs

@@ -1,6 +1,9 @@
-<a href="https://codecov.io/{{ this.service }}/{{ this.repository }}?branch={{ this.branch }}">
-  <img
-      src="https://codecov.io/{{ this.service }}/{{ this.repository }}/coverage.svg?branch={{ this.branch }}"
-      alt="{{ this.text }}"
-      title="{{ this.text }}">
-</a>
+<span class="badge" ...attributes>
+  <a href="https://codecov.io/{{ this.service }}/{{ this.repository }}?branch={{ this.branch }}">
+    <img
+        src="https://codecov.io/{{ this.service }}/{{ this.repository }}/coverage.svg?branch={{ this.branch }}"
+        alt="{{ this.text }}"
+        title="{{ this.text }}">
+  </a>
+  
+</span>