Start vue component for edit-environment-role

atst/domain/environments.py

@@ -126,7 +126,7 @@ class Environments(object):
         for env_role in env_roles:
             members_list.append(
                 {
-                    "user_id": env_role.user_id,
+                    "user_id": str(env_role.user_id),
                     "user_name": env_role.user.full_name,
                     "role": role,
                 }

atst/routes/applications/settings.py

@@ -31,7 +31,7 @@ def sort_env_users_by_role(env):
     users_list = []
     no_access_users = env.application.users - env.users
     no_access_list = [
-        {"user_id": user.id, "user_name": user.full_name, "role": "no_access"}
+        {"user_id": str(user.id), "user_name": user.full_name, "role": "no_access"}
         for user in no_access_users
     ]
     users_list.append({"role": "no_access", "members": no_access_list})
@@ -82,6 +82,8 @@ def settings(application_id):
         form=form,
         environments_obj=environments_obj,
         members_form=members_form,
+        active_toggler=http_request.args.get("active_toggler"),
+        active_toggler_section=http_request.args.get("active_toggler_section"),
     )
 
 
@@ -104,6 +106,8 @@ def update_environment(environment_id):
                 application_id=application.id,
                 fragment="application-environments",
                 _anchor="application-environments",
+                active_toggler=environment.id,
+                active_toggler_section="edit",
             )
         )
     else:
@@ -115,6 +119,11 @@ def update_environment(environment_id):
                     name=application.name, description=application.description
                 ),
                 environments_obj=get_environments_obj_for_app(application=application),
+                members_form=AppEnvRolesForm(
+                    data=data_for_app_env_roles_form(application)
+                ),
+                active_toggler=environment.id,
+                active_toggler_section="edit",
             ),
             400,
         )
@@ -182,6 +191,8 @@ def update_env_roles(environment_id):
                 application_id=application.id,
                 fragment="application-environments",
                 _anchor="application-environments",
+                active_toggler=environment.id,
+                active_toggler_section="members",
             )
         )
     else:
@@ -195,6 +206,8 @@ def update_env_roles(environment_id):
                 name=application.name, description=application.description
             ),
             environments_obj=get_environments_obj_for_app(application=application),
+            active_toggler=environment.id,
+            active_toggler_section="edit",
         )
 
 

js/components/forms/edit_environment_role.js

@@ -1,63 +1,88 @@
 import FormMixin from '../../mixins/form'
-import textinput from '../text_input'
-import Selector from '../selector'
 import Modal from '../../mixins/modal'
-import toggler from '../toggler'
 
 export default {
   name: 'edit-environment-role',
 
-  mixins: [FormMixin, Modal],
+  mixins: [FormMixin],
-
-  components: {
-    toggler,
-    Modal,
-    Selector,
-    textinput,
-  },
 
   props: {
-    choices: Array,
+    initialRoles: Array,
-    initialData: String,
-    applicationId: String,
   },
 
   data: function() {
     return {
-      new_role: this.initialData,
+      selectedSection: null,
+      roles: this.sanitizeValues(this.initialRoles),
     }
   },
 
-  mounted: function() {
-    this.$root.$on('revoke-' + this.applicationId, this.revoke)
-  },
-
   methods: {
-    change: function(e) {
+    sanitizeValues: function(roles) {
-      this.new_role = e.target.value
+      roles.forEach(role => {
+        role.members.forEach(member => {
+          if (member.role === null) {
+            member.role = 'no_access'
+          }
+        })
+      })
+      return roles
     },
-    cancel: function() {
-      this.new_role = this.initialData
-    },
-    revoke: function() {
-      this.new_role = ''
-    },
-  },
 
-  computed: {
+    checkNoAccess: function(role) {
-    displayName: function() {
+      return role === 'no_access'
-      const newRole = this.newRole
+    },
-      for (var arr in this.choices) {
+
-        if (this.choices[arr][0] == newRole) {
+    toggleSection: function(sectionName) {
-          return this.choices[arr][1].name
+      if (this.selectedSection === sectionName) {
+        this.selectedSection = null
+      } else {
+        this.selectedSection = sectionName
+      }
+    },
+
+    onInput: function(e) {
+      this.changed = true
+      this.updateRoles(e.target.attributes['user-id'].value, e.target.value)
+      this.showError = false
+      this.showValid = true
+    },
+
+    getUserInfo: function(userId) {
+      for (let role of this.roles) {
+        for (let member of role.members) {
+          if (member.user_id === userId) {
+            return member
+          }
         }
       }
     },
-    label_class: function() {
+
-      return this.newRole === '' ? 'label' : 'label label--success'
+    removeUser: function(userId) {
+      for (let role of this.roles) {
+        role.members = role.members.filter(member => {
+          return member.user_id !== userId
+        })
+        if (!role.members) {
+          role.members = []
+        }
+      }
     },
-    newRole: function() {
+
-      return this.new_role
+    addUser: function(userInfo, newRole) {
+      this.roles.forEach(role => {
+        if (role.role === newRole) {
+          userInfo.role = newRole
+          role.members.push(userInfo)
+        }
+      })
+    },
+
+    updateRoles: function(userId, newRole) {
+      var userInfo = this.getUserInfo(userId)
+      this.removeUser(userId)
+      this.addUser(userInfo, newRole)
+      this.toggleSection()
     },
   },
 }

js/components/toggler.js

@@ -1,3 +1,4 @@
+import editEnvironmentRole from './forms/edit_environment_role'
 import FormMixin from '../mixins/form'
 import optionsinput from './options_input'
 import textinput from './text_input'
@@ -7,7 +8,15 @@ export default {
 
   mixins: [FormMixin],
 
+  props: {
+    initialSelectedSection: {
+      type: String,
+      default: null,
+    },
+  },
+
   components: {
+    editEnvironmentRole,
     optionsinput,
     textinput,
     optionsinput,

styles/sections/_application_edit.scss

@@ -77,7 +77,7 @@
           margin: 0;
 
           li {
-            background-color: white;
+            background-color: $color-white;
             border: none;
           }
         }

templates/fragments/applications/edit_environments.html

@@ -72,8 +72,9 @@
     <ul class="accordion-table__items">
       {% for env in environments_obj %}
         {% set delete_environment_modal_id = "delete_modal_environment{}".format(env['id']) %}
+        {% set edit_form = env['edit_form'] %}
 
-        <toggler inline-template {% if edit_form.errors %}initial-selected-section="edit"{% endif %}>
+        <toggler inline-template {% if active_toggler == (env['id'] | safe) %}initial-selected-section="{{ active_toggler_section }}"{% endif %}>
           <li class="accordion-table__item">
             <div class="accordion-table__item-content row">
               <div class="col col--grow">
@@ -82,15 +83,15 @@
               <div class="col col--grow">
                 <span class="icon-link">
                   {% set edit_environment_button %}
-                  {{ Icon('edit') }}
+                    {{ Icon('edit') }}
                   {% endset %}
 
                   {{
                   ToggleButton(
-                  open_html=edit_environment_button,
+                    open_html=edit_environment_button,
-                  close_html=edit_environment_button,
+                    close_html=edit_environment_button,
-                  section_name="edit"
+                    section_name="edit"
-                  )
+                    )
                   }}
                 </span>
               </div>
@@ -110,41 +111,83 @@
 
                 {{
                 ToggleButton(
-                open_html=open_members_button,
+                  open_html=open_members_button,
-                close_html=close_members_button,
+                  close_html=close_members_button,
-                section_name="members"
+                  section_name="members"
-                )
+                  )
                 }}
               </div>
             </div>
 
             {% call ToggleSection(section_name="members", classes="environment-roles") %}
-                <div class='app-team-settings-link'>Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a></div>
+              {% for env_form in members_form.envs %}
-                <toggler inline-template>
+                {% if env_form.env_id.data == env['id'] %}
+                  <div class='app-team-settings-link'>
+                    Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a>
+                  </div>
                   <form action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}" method="post">
                     {{ members_form.csrf_token }}
-                    {% for env_form in members_form.envs %}
+                    {{ env_form.env_id() }}
-                      {{ env_form.env_id() }}
+                    <edit-environment-role inline-template v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
-                      {% if env_form.env_id.data == env['id'] %}
+                      <div>
-                        {% for role_form in env_form.team_roles %}
+                        <div v-for='(role, roleindex) in roles' class='environment-role'>
-                          {{ RolePanel(role_form) }}
+                          <h4 v-if='checkNoAccess(role.role)'>Unassigned (No Access)</h4>
-                        {% endfor %}
+                          <h4 v-else v-html='role.role'></h4>
-                      {% endif %}
+                          <ul class='environment-role__users'>
-                    {% endfor %}
+                            <div v-if="role.members && !role.members.length" class='environment-role__no-user'>Currently no members are in this role</div>
-                    <div class='action-group'>
+                            <li v-for='(member, memberindex) in role.members' class="environment-role__user" v-bind:class="{'unassigned': checkNoAccess(member.role)}">
-                      {{
+                              <span v-html='member.user_name'>
-                        SaveButton(
+                              </span>
-                          text=("portfolios.applications.update_button_text" | translate)
+                              <span v-on:click="toggleSection(member.user_id)" class="icon-link right">
-                        )
+                                {{ Icon('edit', classes="icon--medium") }}
-                      }}
+                              </span>
+                              <div v-show="selectedSection === member.user_id" class='environment-role__user-field'>
+                                <div class="usa-input">
+                                  <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
+                                    <ul v-for='(role, roleinputindex) in roles' v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'">
+                                      <li>
+                                        <input
+                                          v-bind:checked="member.role === role.role"
+                                          v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'"
+                                          v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex"
+                                          type="radio"
+                                          v-bind:user-id='member.user_id'
+                                          v-bind:value='role.role'>
+                                        <label
+                                          v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
+                                          <span v-if='checkNoAccess(role.role)'>No Access</span>
+                                          <span v-else v-html='role.role'></span>
+                                        </label>
+                                      </li>
+                                    </ul>
+                                  </fieldset>
+                                </div>
+                              </div>
+                              <input
+                                v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
+                                v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
+                                type="hidden"
+                                v-bind:value='member.user_id'>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class='action-group'>
+                          {{
+                            SaveButton(
+                              text=("portfolios.applications.update_button_text" | translate)
+                            )
+                          }}
+                        </div>
+                      </div>
+                    </edit-environment-role>
+                    <div class='action-group-cancel'>
+                      <a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
+                        {{ "common.cancel" | translate }}
+                      </a>
                     </div>
                   </form>
-                </toggler>
+                {% endif %}
-                <div class='action-group-cancel'>
+              {% endfor %}
-                  <a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
-                    {{ "common.cancel" | translate }}
-                  </a>
-                </div>
             {% endcall %}
 
             {% call ToggleSection(section_name="edit") %}

tests/domain/test_environments.py

@@ -157,13 +157,13 @@ def test_get_members_by_role(db):
     )
     assert basic_access_members == [
         {
-            "user_id": env_role_1.user_id,
+            "user_id": str(env_role_1.user_id),
             "user_name": env_role_1.user.full_name,
             "role": CSPRole.BASIC_ACCESS.value,
         }
     ]
     assert {
-        "user_id": rando_env_role.user_id,
+        "user_id": str(rando_env_role.user_id),
         "user_name": rando_env_role.user.full_name,
         "role": CSPRole.BASIC_ACCESS.value,
     } not in basic_access_members
@@ -171,12 +171,12 @@ def test_get_members_by_role(db):
         environment, CSPRole.TECHNICAL_READ.value
     ) == [
         {
-            "user_id": env_role_2.user_id,
+            "user_id": str(env_role_2.user_id),
             "user_name": env_role_2.user.full_name,
             "role": CSPRole.TECHNICAL_READ.value,
         },
         {
-            "user_id": env_role_3.user_id,
+            "user_id": str(env_role_3.user_id),
             "user_name": env_role_3.user.full_name,
             "role": CSPRole.TECHNICAL_READ.value,
         },

tests/routes/applications/test_settings.py

@@ -48,6 +48,8 @@ def test_updating_application_environments_success(client, user_session):
         _external=True,
         fragment="application-environments",
         _anchor="application-environments",
+        active_toggler=environment.id,
+        active_toggler_section="edit",
     )
     assert environment.name == "new name a"
 
@@ -167,7 +169,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                             "role": "no_access",
                             "members": [
                                 {
-                                    "user_id": app_role.user_id,
+                                    "user_id": str(app_role.user_id),
                                     "user_name": app_role.user.full_name,
                                     "role": None,
                                 }
@@ -177,7 +179,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                             "role": CSPRole.BASIC_ACCESS.value,
                             "members": [
                                 {
-                                    "user_id": env_role1.user_id,
+                                    "user_id": str(env_role1.user_id),
                                     "user_name": env_role1.user.full_name,
                                     "role": CSPRole.BASIC_ACCESS.value,
                                 }
@@ -187,7 +189,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                             "role": CSPRole.NETWORK_ADMIN.value,
                             "members": [
                                 {
-                                    "user_id": env_role2.user_id,
+                                    "user_id": str(env_role2.user_id),
                                     "user_name": env_role2.user.full_name,
                                     "role": CSPRole.NETWORK_ADMIN.value,
                                 }