New Twiddle

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

	get model() {
    return [{
        id: 1,
        name: 'Write tests from scratch',
        isVisible: true,
        description: 'desc',
        image: 'img',
        isChecked: false,
        route: 'tests',
        children: [
        {
          id: 10,
          name: 'Create suite',
          isVisible: true,
        },
        {
          id: 11,
          name: 'Create tests inside a suite',
          isVisible: true,
        },
        {
          id: 12,
          name: 'Copy Bolierplate code from Code Template',
          isVisible: true,
        },        
        {
          id: 13,
          name: 'Implement automated test in source code',
          isVisible: true,
        },                
        {
          id: 14,
          name: 'Import code to match test with description',
          isVisible: true,
        },    
      ]},
      {
        id: 2,
        name: 'Import tests from source code',
        isVisible: true,
        children: [
          {
            id: 20,
            name: 'Import tests from the project',
            isVisible: true,
          },
          {
            id: 20,
            name: 'Write descriptions to complex test flows (optionally)',
            isVisible: true,
          },          
          {
            id: 20,
            name: 'Add more tests to current suites',
            isVisible: true,
          },
          {
            id: 20,
            name: 'Copy boilerplate code and insert into test file',
            isVisible: true,
          },
          {
            id: 20,
            name: 'Implement automated test',
            isVisible: true,
          },
          {
            id: 20,
            name: 'Import tests again to see the tests are matced with description',
            isVisible: true,
          },          
        ]
      },
      {
        id: 3,
        name: 'Manage Steps',
        children: [],
        isVisible: true,
      },
      {
        id: 4,
        name: 'Receive reports',
        children: [],
        isVisible: true,        
      }
    ]
    
	}
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
AAAa
{{outlet}}
  <XTree @model={{ this.model }} class="flex-1" as |node|>
    {{node.toggle}}
    {{node.checkbox}}
    {{node.model.name}}    
  </XTree>

<br>
<br>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1",
    "ember-simple-tree": "^0.7.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
  }
}