fix spacing, update to use nested dropdown

Author: solocommand

services/manage/app/controllers/manage/orgs/view/apps/view/users/edit.js

@@ -2,10 +2,20 @@ import Controller from '@ember/controller';
 import ActionMixin from '@identity-x/manage/mixins/action-mixin';
 import AppQueryMixin from '@identity-x/manage/mixins/app-query';
 import { inject } from '@ember/service';
+import { computed } from '@ember/object';
 
 export default Controller.extend(ActionMixin, AppQueryMixin, {
   router: inject(),
 
+  isCustomActive: computed('router.currentRouteName', function() {
+    return this.router.currentRouteName.includes('users.edit.custom-');
+  }),
+  customDropdownClasses: computed('isCustomActive', function() {
+    const classes = ['nav-link', 'dropdown-toggle'];
+    if (this.isCustomActive) classes.push('active');
+    return classes.join(' ');
+  }),
+
   actions: {
     returnToList() {
       return this.router.transitionTo('manage.orgs.view.apps.view.users');

services/manage/app/templates/manage/orgs/view/apps/view/users/edit.hbs

@@ -11,20 +11,19 @@
           Address
         {{/link-to}}
       </li>
-      <li class="nav-item">
-        {{#link-to "manage.orgs.view.apps.view.users.edit.custom-select-fields" class="nav-link"}}
-          Custom Selects
-        {{/link-to}}
-      </li>
-      <li class="nav-item">
-        {{#link-to "manage.orgs.view.apps.view.users.edit.custom-boolean-fields" class="nav-link"}}
-          Custom Checkboxes
-        {{/link-to}}
-      </li>
-      <li class="nav-item">
-        {{#link-to "manage.orgs.view.apps.view.users.edit.custom-text-fields" class="nav-link"}}
-          Custom Inputs
-        {{/link-to}}
+      <li class="nav-item dropdown">
+        <a class={{customDropdownClasses}} data-toggle="dropdown" href="#" role="button" aria-expanded="false">Custom Fields</a>
+        <div class="dropdown-menu">
+          {{#link-to "manage.orgs.view.apps.view.users.edit.custom-boolean-fields" class="dropdown-item"}}
+            Checkboxes
+          {{/link-to}}
+          {{#link-to "manage.orgs.view.apps.view.users.edit.custom-text-fields" class="dropdown-item"}}
+            Text fields
+          {{/link-to}}
+          {{#link-to "manage.orgs.view.apps.view.users.edit.custom-select-fields" class="dropdown-item"}}
+            Selects
+          {{/link-to}}
+        </div>
       </li>
       <li class="nav-item">
         {{#link-to "manage.orgs.view.apps.view.users.edit.external-ids" class="nav-link"}}

services/manage/app/templates/manage/orgs/view/apps/view/users/edit/custom-text-fields.hbs

@@ -1,28 +1,28 @@
 <form {{action "save" on="submit"}}>
   <fieldset disabled={{this.isActionRunning}}>
     <BsModal::Body>
-      <div class="row">
-        {{#each this.model.customTextFieldAnswers as |answer|}}
-          <div class="col-sm-6">
-            <div class="form-group">
-              <FormElements::Label>
-                <CustomField::Label @value={{answer.field.label}} />
-                <br>
-                <span class="small text-muted">({{answer.field.name}})</span>
-                {{#if (not answer.field.active)}}<span class="small text-warning">[inactive]</span>{{/if}}
-              </FormElements::Label>
-              <Input
-                @type="text"
-                @value={{answer.value}}
-                />
-            </div>
+      {{#each this.model.customTextFieldAnswers as |answer|}}
+        <div class="col-sm-6">
+          <div class="form-group">
+            <FormElements::Label>
+              <CustomField::Label @value={{answer.field.label}} />
+              <br>
+              <span class="small text-muted">({{answer.field.name}})</span>
+              {{#if (not answer.field.active)}}<span class="small text-warning">[inactive]</span>{{/if}}
+            </FormElements::Label>
+            <Input
+              @type="text"
+              @value={{answer.value}}
+              />
           </div>
-        {{else}}
+        </div>
+      {{else}}
+        <div class="col">
           <div class="row">
-            <p class="text-muted">No custom fields have been created.</p>
+            <p class="text-muted">No custom inputs have been created.</p>
           </div>
-        {{/each}}
-      </div>
+        </div>
+      {{/each}}
     </BsModal::Body>
     <BsModal::Footer>
       <FormElements::SubmitButton @class="btn btn-success" @isSaving={{this.isActionRunning}} />