Form components for changing user environment role

atst/forms/team.py

@@ -1,14 +1,24 @@
 from flask_wtf import FlaskForm
-from wtforms.fields import FormField, FieldList, HiddenField, StringField
+from wtforms.fields import FormField, FieldList, HiddenField, RadioField, StringField
 from wtforms.validators import Required
 
-from .application_member import EnvironmentForm
+from .application_member import EnvironmentForm as BaseEnvironmentForm
+from .data import ENV_ROLES
 from .forms import BaseForm
 from atst.forms.fields import SelectField
 from atst.domain.permission_sets import PermissionSets
 from atst.utils.localization import translate
 
 
+class EnvironmentForm(BaseEnvironmentForm):
+    role = RadioField(
+        "Role",
+        choices=ENV_ROLES,
+        default=None,
+        filters=[lambda x: None if x == "None" else x],
+    )
+
+
 class PermissionsForm(FlaskForm):
     perms_team_mgmt = SelectField(
         translate("portfolios.applications.members.new.manage_team"),

js/components/toggler.js

@@ -20,6 +20,7 @@ export default {
     optionsinput,
     textinput,
     optionsinput,
+    toggler: this,
   },
 
   data: function() {

styles/components/_portfolio_layout.scss

@@ -609,3 +609,40 @@
 .member-list__name {
   margin-top: 1rem;
 }
+
+.member-list__role-select {
+  overflow: auto;
+  margin: 1.6rem -3.2rem -1.6rem -3.2rem;
+  padding: 2rem 3.2rem 2rem 5rem;
+  background: $color-gray-cool-light;
+  border-top: 1px solid $color-gray-lighter;
+
+  > label {
+    font-weight: $font-bold;
+    margin: 0;
+  }
+
+  > label:first-child + ul.member-list____role-select__radio {
+    display: flex;
+    background: $color-gray-cool-light;
+
+    li {
+      border-bottom: none;
+
+      label {
+        margin-top: 1rem;
+        margin-left: 2rem;
+      }
+    }
+
+    li:first-child > label {
+      margin-left: 0;
+    }
+  }
+
+  button {
+    font-size: $small-font-size;
+    float: right;
+    margin-right: 0;
+  }
+}

styles/core/_variables.scss

@@ -73,7 +73,7 @@ $color-gray-lightest: #f1f1f1;
 
 $color-gray-warm-dark: #494440;
 $color-gray-warm-light: #e4e2e0;
-$color-gray-cool-light: #dce4ef;
+$color-gray-cool-light: #eff2f7;
 
 $color-gold-dark: #cd841b;
 $color-gold: #fdb81e;

templates/components/modal.html

@@ -12,7 +12,7 @@
                 <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
                   {{ Icon('x') }}
                   <span>
-                    {{ "components.modal.close" | translate }}
+                    {{ "common.close" | translate }}
                   </span>
                 </button>
               {% endif %}

templates/fragments/applications/edit_team.html

@@ -37,40 +37,57 @@
           }}
         </div>
         {% call ToggleSection(section_name="environments") %}
-        <ul>
+          <ul>
-          {% for environment_form in environment_roles_form %}
+            {% for environment_form in environment_roles_form %}
-          <li class="accordion-table__item__expanded row">
+              <li class="accordion-table__item__expanded">
-            <div class="col col--grow">
+                <toggler inline-template>
-              {{ environment_form.environment_name.data }}
+                  <div>
-            </div>
+                    <div class="row">
-            <div class="accordion-table__item__expanded-role col col--grow">
+                      <div class="col col--grow">
-              <div class="right">
+                        {{ environment_form.environment_name.data }}
-                <span>
+                      </div>
-                  {{ environment_form.role.data }}
+                      <div class="accordion-table__item__expanded-role col col--grow">
-                </span>
+                        <div class="right">
-                <div class="icon-link">
+                          <span>
-                  {{ Icon("edit") }}
+                            {{ environment_form.role.data }}
-                </div>
+                          </span>
-              </div>
+                          <div class="icon-link" v-on:click="toggleSection('edit-env-role')">
-            </div>
+                            {{ Icon("edit") }}
-          </li>
+                          </div>
-          {% endfor %}
+                        </div>
-        </ul>
+                      </div>
-        <div class="accordion-table__item__action-group">
+                    </div>
-          <a class="icon-link">
+                    <div class="member-list__role-select" v-show="selectedSection === 'edit-env-role'">
-            {{ "portfolios.applications.team_settings.add_to_environment" | translate }}
+                      {{ environment_form.role.label }}
-            {{ Icon("plus") }}
+                      {{ environment_form.role(class="member-list____role-select__radio") }}
-          </a>
+                      <button
-          <button
+                        class="usa-button"
-            id="delete-application"
+                        type="button"
-            type="button"
+                        v-on:click="toggleSection('edit-env-role')"
-            class='usa-button button-danger'
+                        >
+                        {{ "common.close" | translate }}
+                      </button>
+                    </div>
+                  </div>
+                </toggler>
+              </li>
+            {% endfor %}
+          </ul>
+          <div class="accordion-table__item__action-group">
+            <a class="icon-link">
+              {{ "portfolios.applications.team_settings.add_to_environment" | translate }}
+              {{ Icon("plus") }}
+            </a>
+            <button
+              id="delete-application"
+              type="button"
+              class='usa-button button-danger'
             >
-            {{ "portfolios.members.archive_button" | translate }}
+              {{ "portfolios.members.archive_button" | translate }}
-          </button>
+            </button>
-        </div>
+          </div>
         {% endcall %}
         {{ member_form.user_id() }}
-    </li>
+      </li>
   </toggler>
 {% endfor %}

translations.yaml

@@ -20,6 +20,7 @@ base_public:
 common:
   back: Back
   cancel: Cancel
+  close: Close
   confirm: Confirm
   continue: Continue
   delete: Delete
@@ -46,7 +47,6 @@ common:
   name: Name
 components:
   modal:
-    close: Close
     destructive_message: You will no longer be able to access this {resource}
     destructive_title: Warning! This action is permanent
   usa_header: