move up component logic

addons/core/translations/resources/en-us.yaml

@@ -89,6 +89,14 @@ host-catalog:
     unknown: Unknown
     aws: AWS
     azure: Azure
+    dynamic: Dynamic
+  form:
+    provider-details: Provider Details 
+    types:
+      static: 
+        help: Provide a list of hosts and host sets with static addresses
+      dynamic: 
+        help: Automate discovery of target hosts and services on Azure or AWS
 host-set:
   title: Host Set
   title_plural: Host Sets

ui/admin/app/components/form/host-catalog/aws/index.hbs

@@ -1 +1,129 @@
-AWS Form
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  as |form|
+>
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name='description'
+    @type='description'
+    @value={{@model.description}}
+    @label={{t 'form.description.label'}}
+    @helperText={{t 'form.description.help'}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+  <form.fieldset>
+    <:title>{{t 'form.type.label'}}</:title>
+    <:body>
+      <form.radioGroup
+        @name='aws-types'
+        @changed={{@toggleType}}
+        @selectedValue='dynamic'
+        as |radioGroup|
+      >
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.static'}}
+          @value='static'
+          @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+          @layout='wide'
+        />
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.dynamic'}}
+          @value='dynamic'
+          @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+          @layout='wide'
+        />
+      </form.radioGroup>
+    </:body>
+  </form.fieldset>
+
+  {{#if @showDynamicPlugins}}
+    <form.fieldset>
+      <:title>{{t 'resources.host-catalog.form.provider-details'}}</:title>
+      <:body>
+        <form.radioGroup
+          @name='aws-plugins'
+          @selectedValue={{@model.compositeType}}
+          @changed={{route-action 'changeType'}}
+          as |radioGroup|
+        >
+          <radioGroup.card
+            @label='AWS'
+            @value='aws'
+            @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+            @layout='tile'
+          />
+          <radioGroup.card
+            @label='Azure'
+            @value='azure'
+            @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+            @layout='tile'
+          />
+        </form.radioGroup>
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
+  <form.input
+    @name='Region'
+    @type='region'
+    @value='region'
+    @label='Region'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='accesskey'
+    @type='accesskey'
+    @value='accesskey'
+    @label='Access key ID'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='secretaccesskey'
+    @type='secretaccesskey'
+    @value='secretaccesskey'
+    @label='Secret Access Key'
+    readonly={{false}}
+  />
+
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @disabled={{if @model.cannotSave @model.cannotSave}}
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>

ui/admin/app/components/form/host-catalog/azure/index.hbs

@@ -1 +1,129 @@
-Azure Form
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  as |form|
+>
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name='description'
+    @type='description'
+    @value={{@model.description}}
+    @label={{t 'form.description.label'}}
+    @helperText={{t 'form.description.help'}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+  <form.fieldset>
+    <:title>{{t 'form.type.label'}}</:title>
+    <:body>
+      <form.radioGroup
+        @name='aws-types'
+        @changed={{@toggleType}}
+        @selectedValue='dynamic'
+        as |radioGroup|
+      >
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.static'}}
+          @value='static'
+          @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+          @layout='wide'
+        />
+        <radioGroup.card
+          @label={{t 'resources.host-catalog.types.dynamic'}}
+          @value='dynamic'
+          @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+          @layout='wide'
+        />
+      </form.radioGroup>
+    </:body>
+  </form.fieldset>
+
+  {{#if @showDynamicPlugins}}
+    <form.fieldset>
+      <:title>{{t 'resources.host-catalog.form.provider-details'}}</:title>
+      <:body>
+        <form.radioGroup
+          @name='aws-plugins'
+          @selectedValue={{@model.compositeType}}
+          @changed={{route-action 'changeType'}}
+          as |radioGroup|
+        >
+          <radioGroup.card
+            @label='AWS'
+            @value='aws'
+            @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+            @layout='tile'
+          />
+          <radioGroup.card
+            @label='Azure'
+            @value='azure'
+            @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+            @layout='tile'
+          />
+        </form.radioGroup>
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
+  <form.input
+    @name='Region'
+    @type='region'
+    @value='region'
+    @label='Region'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='accesskey'
+    @type='accesskey'
+    @value='accesskey'
+    @label='Access key ID'
+    readonly={{false}}
+  />
+
+  <form.input
+    @name='secretaccesskey'
+    @type='secretaccesskey'
+    @value='secretaccesskey'
+    @label='Secret Access Key'
+    readonly={{false}}
+  />
+
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @disabled={{if @model.cannotSave @model.cannotSave}}
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>

ui/admin/app/components/form/host-catalog/index.hbs

@@ -1,10 +1,24 @@
 {{#if @model.isNew}}
-{{#if @model.compositeType}}
-  {{component
-    (concat 'form/host-catalog/' @model.compositeType)
-    model=@model
-    submit=@submit
-    cancel=@cancel
-  }}
-{{/if}}
-{{/if}}
+  <div>{{@model.type}} {{@model.compositeType}}</div>
+  {{#if @model.isStatic}}
+    {{component
+      (concat 'form/host-catalog/' @model.compositeType)
+      model=@model
+      submit=@submit
+      cancel=@cancel
+      toggleType=this.toggleType
+      showDynamicPlugins=this.showDynamicPlugins
+    }}
+  {{/if}}
+
+  {{#if this.showDynamicPlugins}}
+    {{component
+      (concat 'form/host-catalog/' @model.compositeType)
+      model=@model
+      submit=@submit
+      cancel=@cancel
+      toggleType=this.toggleType
+      showDynamicPlugins=this.showDynamicPlugins
+    }}
+  {{/if}}
+{{/if}}

ui/admin/app/components/form/host-catalog/index.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class FormHostCatalogIndexComponent extends Component {
+  // =properties
+  /**
+  /**
+   */
+  @tracked showDynamicPlugins = false;
+  // =actions
+
+  @action
+  toggleType(type) {
+    this.renderDynamicPlugins(type);
+  }
+  //show dynamic type radio cards -> aws and azure if the type is dynamic
+  //call route action to update the query and rerender the model if static is selected
+  renderDynamicPlugins(type) {
+    if (type === 'dynamic') {
+      this.showDynamicPlugins = true;
+    } else {
+      this.showDynamicPlugins = false;
+      //CHECK:how to call the action to update query param
+      this.args.model.type = 'static';
+      this.args.changeType();
+    }
+  }
+}

ui/admin/app/components/form/host-catalog/static/index.hbs

@@ -43,9 +43,14 @@
     {{/if}}
   </form.textarea>
   <form.fieldset>
-    <:title>{{t 'resources.host-catalog.type'}}</:title>
+    <:title>{{t 'form.type.label'}}</:title>
     <:body>
-      <form.radioGroup @name='types' as |radioGroup|>
+      <form.radioGroup
+        @name='types'
+        @selectedValue={{@model.type}}
+        @changed={{@toggleType}}
+        as |radioGroup|
+      >
         <radioGroup.card
           @label={{t 'resources.host-catalog.types.static'}}
           @value='static'
@@ -61,6 +66,33 @@
       </form.radioGroup>
     </:body>
   </form.fieldset>
+
+  {{#if @showDynamicPlugins}}
+    <form.fieldset>
+      <:title>{{t 'resources.host-catalog.form.provider-details'}}</:title>
+      <:body>
+        <form.radioGroup
+          @name='plugins'
+          @changed={{route-action 'changeType'}}
+          as |radioGroup|
+        >
+          <radioGroup.card
+            @label='AWS'
+            @value='aws'
+            @helperText={{t 'resources.host-catalog.form.types.static.help'}}
+            @layout='tile'
+          />
+          <radioGroup.card
+            @label='Azure'
+            @value='azure'
+            @helperText={{t 'resources.host-catalog.form.types.dynamic.help'}}
+            @layout='tile'
+          />
+        </form.radioGroup>
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
   {{#if (can 'save model' @model)}}
     <form.actions
       @disabled={{if @model.cannotSave @model.cannotSave}}
@@ -69,6 +101,4 @@
       @cancelText={{t 'actions.cancel'}}
     />
   {{/if}}
-</Rose::Form>
-
-{{{log @model.compositeType 'compostite type'}}}
+</Rose::Form>

ui/admin/app/components/form/host-catalog/static/index.js

@@ -1,26 +0,0 @@
-import Component from '@glimmer/component';
-import { options } from 'api/models/credential-library';
-import { computed, action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-export default class FormHostCatalogIndexComponent extends Component {
-  // =properties
-  /**
-  /**
-   */
-   @tracked showDynamicPlugins = false;
-  // =actions
-
-  @action
-  toggleType(type) {
-    this.renderDynamicPlugins(type);
-  }
-  renderDynamicPlugins(type) {
-   if(type === 'dynamic') {
-      this.showDynamicPlugins = true;
-   } else {
-    this.showDynamicPlugins = false;
-   }
- }
-
-}

ui/admin/app/controllers/scopes/scope/host-catalogs/new.js

@@ -1,7 +1,23 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class ScopesScopeHostCatalogsNewController extends Controller {
   // =attributes
 
   queryParams = ['type'];
+  @tracked showDynamicPlugins = false;
+
+  @action
+  async toggleType(type) {
+    this.renderDynamicPlugins(type);
+  }
+
+  renderDynamicPlugins(type) {
+    if (type !== 'static') {
+      this.showDynamicPlugins = true;
+    } else {
+      this.showDynamicPlugins = false;
+    }
+  }
 }

ui/admin/app/routes/scopes/scope/host-catalogs/new.js

@@ -6,13 +6,12 @@ export default class ScopesScopeHostCatalogsNewRoute extends Route {
   // =services
 
   @service router;
-
   // =attributes
 
   queryParams = {
     type: {
       refreshModel: true,
-      replace: true
+      replace: true,
     },
   };