Create macro for environment role field and update route so the correct data is passed to Environments.update_env_role to update or delete roles

atst/routes/applications/settings.py

@@ -374,14 +374,21 @@ def remove_member(application_id, application_role_id):
 @user_can(Permissions.EDIT_APPLICATION_MEMBER, message="update application member")
 def update_member(application_id, application_role_id):
     app_role = ApplicationRoles.get_by_id(application_role_id)
-    form = UpdateMemberForm(http_request.form)
+    application = Applications.get(application_id)
+    existing_env_roles_data = filter_env_roles_form_data(
+        app_role, application.environments
+    )
+    form = UpdateMemberForm(
+        formdata=http_request.form, environment_roles=existing_env_roles_data
+    )
 
     if form.validate():
         ApplicationRoles.update_permission_sets(app_role, form.data["permission_sets"])
 
         for env_role in form.environment_roles:
             environment = Environments.get(env_role.environment_id.data)
-            Environments.update_env_role(environment, app_role, env_role.data["role"])
+            new_role = None if env_role.deleted.data else env_role.data["role"]
+            Environments.update_env_role(environment, app_role, new_role)
 
         flash("application_member_updated", user_name=app_role.user_name)
     else:

templates/applications/fragments/member_form_fields.html

@@ -2,6 +2,72 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/phone_input.html" import PhoneInput %}
 
+{% macro EnvRoleInput(field, member_role_id=None) %}
+  {% if field.role.data == "No Access" and not field.deleted.data -%}
+    <optionsinput inline-template
+      v-bind:initial-value="'{{ field.role.data | string }}'"
+      v-bind:name="'{{ field.name | string }}{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
+      v-bind:optional="true"
+      v-bind:watch="true">
+      <div class="usa-input">
+        <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
+          <div class="form-row">
+            <div class="form-col form-col--two-thirds">
+              <legend>
+                <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
+                  {{ field.environment_name.data }}
+                </div>
+                <p class="usa-input__help">
+                  {{ field.role.data }}
+                </p>
+              </legend>
+            </div>
+            <div class="form-col form-col--third">
+              {{ field.role(**{"v-model": "value", "id": "{}-{}".format(field.role.name, member_role_id)}) }}
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </optionsinput>
+  {% elif field.role.data != "No Access" and not field.deleted.data -%}
+    <div class="form-row">
+      <div class="form-col form-col--two-thirds">
+        <legend>
+          <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
+            {{ field.environment_name.data }}
+          </div>
+          <p class="usa-input__help">
+            {{ field.role.data }}
+          </p>
+        </legend>
+      </div>
+      <div class="form-col form-col--third">
+        <checkboxinput
+          name="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
+          inline-template
+          key="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
+          v-bind:initial-checked='{{ field.deleted.data|string|lower }}'
+          v-bind:optional="true"
+          >
+          <div>
+            <div class='usa-input' v-bind:class="[{ 'checked': isChecked }]">
+
+              <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
+                <legend>
+                  {% set id = "{}-{}".format(field.deleted.name, member_role_id) %}
+                  {{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
+                  {{ field.deleted.label(for=id) | safe }}
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+        </checkboxinput>
+      </div>
+    </div>
+  {%- endif %}
+  {{ field.environment_id() }}
+{% endmacro %}
+
 {% macro PermsFields(form, new=False, member_role_id=None) %}
   <h2>{{ "portfolios.applications.members.form.app_perms.title" | translate }}</h2>
   <p class='usa-input__help subtitle'>{{ "portfolios.applications.members.form.app_perms.description" | translate | safe}}</p>
@@ -26,29 +92,7 @@
     <p class='usa-input__help subtitle'>{{ "portfolios.applications.members.form.env_access.description" | translate | safe }}</p>
     <hr>
     {% for environment_data in form.environment_roles %}
-      <optionsinput inline-template
+      {{ EnvRoleInput(environment_data, member_role_id) }}
-        v-bind:initial-value="'{{ environment_data.role.data | string }}'"
-        v-bind:name="'{{ environment_data.name | string }}'"
-        v-bind:optional="true"
-        v-bind:watch="true">
-        <div class="usa-input">
-          <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
-            <div class="form-row">
-              <div class="form-col form-col--two-thirds">
-                <legend>
-                  <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
-                    {{ environment_data.environment_name.data }}
-                  </div>
-                </legend>
-              </div>
-              <div class="form-col form-col--third">
-                {{ environment_data.role(**{"v-model": "value"}) }}
-              </div>
-            </div>
-          </fieldset>
-        </div>
-      </optionsinput>
-      {{ environment_data.environment_id() }}
       <hr>
     {% endfor %}
   </div>