Vue binding for environment role selections.

The environment name will be grayed out until something besides the
default "no access" is selected.

Small changes to the application member subforms:
- filter for "None" as a string
- have nested forms inherit from FlaskForm; each nested form adds its
  own validation error flash otherwise if there are validation problems

atst/forms/application_member.py

@@ -1,3 +1,4 @@
+from flask_wtf import FlaskForm
 from wtforms.fields import FormField, FieldList, HiddenField, BooleanField
 
 from .forms import BaseForm
@@ -8,13 +9,18 @@ from atst.domain.permission_sets import PermissionSets
 from atst.utils.localization import translate
 
 
-class EnvironmentForm(BaseForm):
+class EnvironmentForm(FlaskForm):
     environment_id = HiddenField()
     environment_name = HiddenField()
-    role = SelectField(environment_name, choices=ENV_ROLES, default=None)
+    role = SelectField(
+        environment_name,
+        choices=ENV_ROLES,
+        default=None,
+        filters=[lambda x: None if x == "None" else x],
+    )
 
 
-class PermissionsForm(BaseForm):
+class PermissionsForm(FlaskForm):
     perms_env_mgmt = BooleanField(
         translate("portfolios.applications.members.new.manage_envs"), default=False
     )

js/components/options_input.js

@@ -18,6 +18,7 @@ export default {
       showError: showError,
       showValid: !showError && !!this.initialValue,
       validationError: this.initialErrors.join(' '),
+      value: this.initialValue,
     }
   },
 

styles/sections/_application_edit.scss

@@ -85,3 +85,8 @@
 .environment-roles-new__head {
   font-weight: $font-bold;
 }
+
+.environment-name--gray {
+  font-weight: $font-normal;
+  color: $color-gray-medium;
+}

templates/fragments/applications/add_new_application_member.html

@@ -5,7 +5,7 @@
 
 {% set step_one %}
   <div class="modal__form--header">
-    <h1>Invite new portfolio member</h1>
+    <h1>Invite new member</h1>
   </div>
   <div class='form-row'>
     <div class='form-col form-col--half'>
@@ -62,20 +62,24 @@
           </div>
         </div>
         {% for environment_data in member_form.environment_roles %}
-          <div class="usa-input">
-            <fieldset data-ally-disabled="true" class="form-row usa-input__choices">
-              <div class="form-col form-col--quarter">
-                <legend>
-                  <div class="usa-input__title-inline">
-                    {{ environment_data.environment_name.data }}
-                  </div>
-                </legend>
-              </div>
-              <div class="form-col form-col--three-quarters">
-                {{ environment_data.role() }}
-              </div>
-            </fieldset>
-          </div>
+          <optionsinput inline-template
+            v-bind:initial-value="'{{ environment_data.role.data | string }}'"
+          >
+            <div class="usa-input">
+              <fieldset data-ally-disabled="true" class="form-row usa-input__choices">
+                <div class="form-col form-col--quarter">
+                  <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--three-quarters">
+                  {{ environment_data.role(**{"v-model": "value"}) }}
+                </div>
+              </fieldset>
+            </div>
+          </optionsinput>
           {{ environment_data.environment_id() }}
         {% endfor %}
       </div>