ui: Move to new ember nested file structure for components (#7403)

* ui: Move components to the new nested structure

* Move data-test attribute to the correct HTML element

We don't currently rely on this, but was incorrectly placed on the input
rather than the label tag

* Fix up left over curly bracket components that were causing issues

For some reason the combination of:

1. Old style curly bracket components
2. data-test-* attributes
3. Moving to the new component file structure

Meant that our data-test-* selectors where no longer being rendered.
Whilst this had no effect on the app, it meant our tests suite could no
longer select DOM elements in order to assert various things.

Moving the old style curly bracket components to the new style XML/Angle
bracket format fixes the issue

* Update ui-v2/app/templates/dc/nodes/-services.hbs

Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com>

* Update ui-v2/app/templates/dc/nodes/-services.hbs

Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com>

Co-authored-by: Greg Hoin <1416421+gregone@users.noreply.github.com>

ui-v2/.ember-cli

@@ -5,5 +5,14 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": false,
+  /**
+    We use a nested in /components folder structure:
+    /components/component-name/index.{hbs,js}
+  */
+  "componentStructure": "nested",
+  /**
+    We currently use classic components
+  */
+  "componentClass": "@ember/component"
 }

ui-v2/app/components/policy-form/index.hbs

@@ -12,9 +12,9 @@
     {{! this should use radio-group }}
     <div role="radiogroup" class={{if item.error.Type ' has-error'}}>
         {{#each templates as |template|}}
-            <label>
+            <label data-test-radiobutton={{concat 'template_' template.template}}>
               <span>{{template.name}}</span>
-              <input data-test-radiobutton={{concat 'template_' template.template}} type="radio" name={{concat name '[template]'}} value={{template.template}} checked={{eq item.template template.template}} onchange={{action (changeset-set item 'template') value='target.value'}}/>
+              <input type="radio" name={{concat name '[template]'}} value={{template.template}} checked={{eq item.template template.template}} onchange={{action (changeset-set item 'template') value='target.value'}}/>
             </label>
         {{/each}}
     </div>

ui-v2/app/components/policy-form/index.js

@@ -1,4 +1,4 @@
-import FormComponent from './form-component';
+import FormComponent from '../form-component/index';
 import { inject as service } from '@ember/service';
 import { get, set } from '@ember/object';
 

ui-v2/app/components/policy-selector/index.hbs

@@ -12,7 +12,11 @@
       </label>
       {{!TODO: potentially call trigger something else}}
       {{!the modal has to go here so that if you provide a slot to trigger it doesn't get rendered}}
-      {{#modal-dialog data-test-policy-form onopen=(action 'open') name="new-policy-toggle"}}
+      <ModalDialog
+        data-test-policy-form
+        @onopen={{action "open"}}
+        @name="new-policy-toggle"
+      >
         <BlockSlot @name="header">
           <h2>New Policy</h2>
         </BlockSlot>
@@ -28,18 +32,18 @@
           </button>
           <button type="reset" disabled={{if item.isSaving 'disabled'}} {{action (queue (action close) (action 'reset'))}}>Cancel</button>
         </BlockSlot>
-      {{/modal-dialog}}
+      </ModalDialog>
     {{/yield-slot}}
   </BlockSlot>
   <BlockSlot @name="option" as |option|>
     {{option.Name}}
   </BlockSlot>
   <BlockSlot @name="set">
-    {{#tabular-details
+    <TabularDetails
         data-test-policies
-        onchange=(action 'loadItem')
-        items=(sort-by 'CreateTime:desc' 'Name:asc' items) as |item index|
-    }}
+        @onchange={{action 'loadItem'}}
+        @items={{sort-by 'CreateTime:desc' 'Name:asc' items}} as |item index|
+    >
       <BlockSlot @name="header">
         <th>Name</th>
         <th>Datacenters</th>
@@ -83,7 +87,7 @@
             </ConfirmationDialog>
           </div>
       </BlockSlot>
-    {{/tabular-details}}
+    </TabularDetails>
 
   </BlockSlot>
 </ChildSelector>

ui-v2/app/components/policy-selector/index.js

@@ -1,4 +1,4 @@
-import ChildSelectorComponent from './child-selector';
+import ChildSelectorComponent from '../child-selector/index';
 import { get, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import updateArrayObject from 'consul-ui/utils/update-array-object';

ui-v2/app/components/role-form/index.js

@@ -1,4 +1,4 @@
-import FormComponent from './form-component';
+import FormComponent from '../form-component/index';
 export default FormComponent.extend({
   type: 'role',
   name: 'role',

ui-v2/app/components/role-selector/index.hbs

@@ -1,4 +1,8 @@
-{{#modal-dialog data-test-role-form onclose=(action (mut state) 'role') name="new-role-toggle"}}
+<ModalDialog
+  data-test-role-form
+  @onclose={{action (mut state) "role"}}
+  @name="new-role-toggle"
+>
   <BlockSlot @name="header">
 {{#if (eq state 'role')}}
     <h2>New Role</h2>
@@ -48,7 +52,7 @@
 {{/if}}
 
   </BlockSlot>
-{{/modal-dialog}}
+</ModalDialog>
 
 <ChildSelector @repo={{repo}} @dc={{dc}} @nspace={{nspace}} @type="role" @placeholder="Search for role" @items={{items}}>
   <BlockSlot @name="label">
@@ -64,11 +68,11 @@
     {{option.Name}}
   </BlockSlot>
   <BlockSlot @name="set">
-    {{#tabular-collection
+    <TabularCollection
         data-test-roles
-        rows=5
-        items=(sort-by 'CreateTime:desc' 'Name:asc' items) as |item index|
-    }}
+        @rows={{5}}
+        @items={{sort-by 'CreateTime:desc' 'Name:asc' items}} as |item index|
+    >
       <BlockSlot @name="header">
         <th>Name</th>
         <th>Description</th>
@@ -116,6 +120,6 @@
           </BlockSlot>
         </PopoverMenu>
       </BlockSlot>
-    {{/tabular-collection}}
+    </TabularCollection>
   </BlockSlot>
 </ChildSelector>

ui-v2/app/components/role-selector/index.js

@@ -1,4 +1,4 @@
-import ChildSelectorComponent from './child-selector';
+import ChildSelectorComponent from '../child-selector/index';
 import { inject as service } from '@ember/service';
 import { set } from '@ember/object';
 import { alias } from '@ember/object/computed';