[UI] - Colocated components in addons (#31413)

* core: run colocated components codemod

* kmip: run colocated components codemod

* replication: run colocated components codemod

* core: remove manual setting of templates with setComponentTemplate

* run prettier

ui/lib/core/addon/components/edit-form.js

@@ -7,19 +7,20 @@ import AdapterError from '@ember-data/adapter/error';
 import { service } from '@ember/service';
 import Component from '@ember/component';
 import { task } from 'ember-concurrency';
-import layout from '../templates/components/edit-form';
 import { next } from '@ember/runloop';
 import { waitFor } from '@ember/test-waiters';
 
 export default Component.extend({
-  layout,
   flashMessages: service(),
 
   // internal validations
   invalidFormAlert: '',
+
   modelValidations: null,
+
   // public API
   model: null,
+
   successMessage: 'Saved!',
   deleteSuccessMessage: 'Deleted!',
   deleteButtonText: 'Delete',

ui/lib/core/addon/components/message-error.js

@@ -4,8 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import layout from '../templates/components/message-error';
-import { setComponentTemplate } from '@ember/component';
 
 /**
  * @module MessageError
@@ -20,7 +18,7 @@ import { setComponentTemplate } from '@ember/component';
  * @param {string} [errorMessage=null] - An Error string to display.
  */
 
-class MessageError extends Component {
+export default class MessageError extends Component {
   get displayErrors() {
     const { errorMessage, errors, model } = this.args;
     if (errorMessage) {
@@ -47,4 +45,3 @@ class MessageError extends Component {
     return null;
   }
 }
-export default setComponentTemplate(layout, MessageError);

ui/lib/core/addon/components/read-more.js

@@ -4,8 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import layout from '../templates/components/read-more';
-import { setComponentTemplate } from '@ember/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
@@ -25,7 +23,7 @@ import { tracked } from '@glimmer/tracking';
  * </div>
  */
 
-class ReadMoreComponent extends Component {
+export default class ReadMoreComponent extends Component {
   @action
   calculateOverflow(e) {
     const spanText = e.querySelector('.description-block');
@@ -45,5 +43,3 @@ class ReadMoreComponent extends Component {
     this.isOpen = !this.isOpen;
   }
 }
-
-export default setComponentTemplate(layout, ReadMoreComponent);

ui/lib/core/addon/components/readonly-form-field.js

@@ -15,12 +15,10 @@
  */
 
 import Component from '@glimmer/component';
-import { setComponentTemplate } from '@ember/component';
 import { capitalize, dasherize } from '@ember/string';
 import { humanize } from 'vault/helpers/humanize';
-import layout from '../templates/components/readonly-form-field';
 
-class ReadonlyFormField extends Component {
+export default class ReadonlyFormField extends Component {
   get labelString() {
     if (!this.args.attr) {
       return '';
@@ -36,5 +34,3 @@ class ReadonlyFormField extends Component {
     return '';
   }
 }
-
-export default setComponentTemplate(layout, ReadonlyFormField);

ui/lib/core/addon/components/replication-action-demote.js

@@ -4,9 +4,7 @@
  */
 
 import Actions from 'core/components/replication-actions-single';
-import layout from '../templates/components/replication-action-demote';
 
 export default Actions.extend({
-  layout,
   tagName: '',
 });

ui/lib/core/addon/components/replication-action-disable.js

@@ -4,10 +4,8 @@
  */
 
 import Actions from 'core/components/replication-actions-single';
-import layout from '../templates/components/replication-action-disable';
 
 export default Actions.extend({
-  layout,
   tagName: '',
 
   actions: {

ui/lib/core/addon/components/replication-action-generate-token.js

@@ -4,9 +4,7 @@
  */
 
 import Actions from './replication-actions-single';
-import layout from '../templates/components/replication-action-generate-token';
 
 export default Actions.extend({
-  layout,
   tagName: '',
 });

ui/lib/core/addon/components/replication-action-promote.js

@@ -4,9 +4,7 @@
  */
 
 import Actions from './replication-actions-single';
-import layout from '../templates/components/replication-action-promote';
 
 export default Actions.extend({
-  layout,
   tagName: '',
 });

ui/lib/core/addon/components/replication-action-recover.js

@@ -4,9 +4,7 @@
  */
 
 import Actions from 'core/components/replication-actions-single';
-import layout from '../templates/components/replication-action-recover';
 
 export default Actions.extend({
-  layout,
   tagName: '',
 });

ui/lib/core/addon/components/replication-action-reindex.js

@@ -4,9 +4,7 @@
  */
 
 import Actions from 'core/components/replication-actions-single';
-import layout from '../templates/components/replication-action-reindex';
 
 export default Actions.extend({
-  layout,
   tagName: '',
 });

ui/lib/core/addon/components/replication-action-update-primary.js

@@ -4,9 +4,7 @@
  */
 
 import Actions from './replication-actions-single';
-import layout from '../templates/components/replication-action-update-primary';
 
 export default Actions.extend({
-  layout,
   tagName: '',
 });

ui/lib/core/addon/components/replication-actions.js

@@ -6,7 +6,6 @@
 import { alias } from '@ember/object/computed';
 import Component from '@ember/component';
 import ReplicationActions from 'core/mixins/replication-actions';
-import layout from '../templates/components/replication-actions';
 
 const DEFAULTS = {
   token: null,
@@ -18,10 +17,10 @@ const DEFAULTS = {
 };
 
 export default Component.extend(ReplicationActions, DEFAULTS, {
-  layout,
   replicationMode: null,
   model: null,
   cluster: alias('model'),
+
   reset() {
     if (!this || this.isDestroyed || this.isDestroying) {
       return;

ui/lib/core/addon/components/replication-secondary-card.js

@@ -6,7 +6,6 @@
 import { equal, reads } from '@ember/object/computed';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import layout from '../templates/components/replication-secondary-card';
 import { clusterStates } from 'core/helpers/cluster-states';
 
 /**
@@ -25,24 +24,28 @@ import { clusterStates } from 'core/helpers/cluster-states';
  */
 
 export default Component.extend({
-  layout,
   tagName: '',
   title: null,
   replicationDetails: null,
+
   state: computed('replicationDetails.state', function () {
     return this.replicationDetails && this.replicationDetails.state
       ? this.replicationDetails.state
       : 'unknown';
   }),
+
   connection: computed('replicationDetails.connection_state', function () {
     return this.replicationDetails.connection_state ? this.replicationDetails.connection_state : 'unknown';
   }),
+
   lastRemoteWAL: computed('replicationDetails.lastRemoteWAL', function () {
     return this.replicationDetails && this.replicationDetails.lastRemoteWAL
       ? this.replicationDetails.lastRemoteWAL
       : 0;
   }),
+
   inSyncState: equal('state', 'stream-wals'),
+
   hasErrorClass: computed('replicationDetails', 'title', 'state', 'connection', function () {
     const { title, state, connection } = this;
 
@@ -54,7 +57,9 @@ export default Component.extend({
     }
     return false;
   }),
+
   knownPrimaryClusterAddrs: reads('replicationDetails.knownPrimaryClusterAddrs'),
+
   primaryUiUrl: computed('replicationDetails.{primaries,knownPrimaryClusterAddrs}', function () {
     const { replicationDetails } = this;
     if (replicationDetails.primaries && replicationDetails.primaries.length) {

ui/lib/core/addon/components/replication-table-rows.js

@@ -6,7 +6,6 @@
 import { reads } from '@ember/object/computed';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import layout from '../templates/components/replication-table-rows';
 
 /**
  * @module ReplicationTableRows
@@ -24,17 +23,19 @@ import layout from '../templates/components/replication-table-rows';
  */
 
 export default Component.extend({
-  layout,
   classNames: ['replication-table-rows'],
   replicationDetails: null,
   clusterMode: null,
   secondaryId: reads('replicationDetails.secondaryId'),
+
   primaryClusterAddr: computed('replicationDetails.primaryClusterAddr', function () {
     return this.replicationDetails.primaryClusterAddr || 'None set';
   }),
+
   merkleRoot: computed('replicationDetails.merkleRoot', function () {
     return this.replicationDetails.merkleRoot || 'unknown';
   }),
+
   clusterId: computed('replicationDetails.clusterId', function () {
     return this.replicationDetails.clusterId || 'unknown';
   }),

ui/lib/core/addon/components/select.js

@@ -4,7 +4,6 @@
  */
 
 import Component from '@ember/component';
-import layout from '../templates/components/select';
 
 /**
  * @module Select
@@ -27,7 +26,6 @@ import layout from '../templates/components/select';
  */
 
 export default Component.extend({
-  layout,
   classNames: ['field'],
   label: null,
   selectedValue: null,

ui/lib/kmip/addon/components/header-scope.js

@@ -5,10 +5,8 @@
 
 import Component from '@ember/component';
 import { service } from '@ember/service';
-import layout from '../templates/components/header-scope';
 
 export default Component.extend({
-  layout,
   tagName: '',
   secretMountPath: service(),
 });

ui/lib/kmip/addon/components/kmip-breadcrumb.js

@@ -5,11 +5,9 @@
 
 import Component from '@ember/component';
 import { service } from '@ember/service';
-import layout from '../templates/components/kmip-breadcrumb';
 import { or } from '@ember/object/computed';
 
 export default Component.extend({
-  layout,
   tagName: '',
   secretMountPath: service(),
   shouldShowPath: or('showPath', 'scope', 'role'),

ui/lib/kmip/addon/components/operation-field-display.js

@@ -16,10 +16,8 @@
  *
  */
 import Component from '@ember/component';
-import layout from '../templates/components/operation-field-display';
 
 export default Component.extend({
-  layout,
   tagName: '',
   model: null,