Adds additional buttons and functionality to app team settings.

"Add to existing environment" table, "delete member", and environment
roles and env role edit buttons added for every user in the team
settings list. Accompanying CSS changes.

styles/components/_accordion_table.scss

@@ -91,6 +91,30 @@
           border-bottom: 1px solid $color-gray-lighter;
         }
       }
+
+      .accordion-table__item__action-group {
+        padding: 1rem 3.2rem;
+        background-color: $color-gray-lightest;
+
+        button,
+        a {
+          margin: 0;
+          font-size: $small-font-size;
+        }
+
+        .icon-link {
+          padding-top: 0.5rem;
+          float: none;
+        }
+
+        > *:first-child {
+          padding-left: 0;
+        }
+
+        > *:last-child {
+          float: right;
+        }
+      }
     }
 
     .accordion-table__item__toggler {
@@ -100,6 +124,10 @@
       color: $color-blue;
       padding: $gap;
 
+      > span {
+        margin-left: auto;
+      }
+
       .icon {
         @include icon-size(12);
 
@@ -147,6 +175,17 @@
       .accordion-table__item__expanded_first {
         float: left;
       }
+
+      .accordion-table__item__expanded-role {
+        .icon-link {
+          padding: 0;
+          vertical-align: text-top;
+
+          .icon {
+            margin: 0 0 0 0.25rem;
+          }
+        }
+      }
     }
   }
 }

styles/components/_portfolio_layout.scss

@@ -1,7 +1,6 @@
 .portfolio-panel-container {
   @include media($large-screen) {
     @include grid-row;
-
     min-height: 500px;
   }
 
@@ -38,7 +37,6 @@
     &.icon-link--disabled {
       color: $color-gray-dark;
       opacity: 1;
-
       .icon {
         @include icon-color($color-gray-dark);
       }
@@ -53,7 +51,6 @@
     .icon-link {
       color: $color-gray-medium;
       pointer-events: none;
-
       &.icon-link--disabled {
         opacity: 1;
       }
@@ -63,7 +60,6 @@
 
 .portfolio-header {
   flex-direction: column;
-
   @include media($small-screen) {
     flex-direction: row;
   }
@@ -103,10 +99,8 @@
 
     .icon-link {
       padding: 0.8rem 1.2rem;
-
       &.active {
         color: $color-gray;
-
         .icon {
           @include icon-color($color-gray);
         }
@@ -150,7 +144,6 @@
 
   .unfunded {
     color: $color-red;
-
     .icon {
       @include icon-color($color-red);
     }
@@ -166,7 +159,7 @@
 }
 
 .portfolio-content {
-  margin: (6 * $gap) $gap 0 $gap;
+  margin: 6 * $gap $gap 0 $gap;
 
   .panel {
     @include shadow-panel;
@@ -175,7 +168,6 @@
   .member-list {
     .panel {
       @include shadow-panel;
-
       padding-bottom: 0;
     }
 
@@ -191,7 +183,7 @@
         }
 
         tr:first-child {
-          padding: 0 (2 * $gap) 0 (5 * $gap);
+          padding: 0 2 * $gap 0 5 * $gap;
         }
 
         td {
@@ -203,14 +195,14 @@
 
       th {
         background-color: $color-gray-lightest;
-        padding: $gap (2 * $gap);
+        padding: $gap 2 * $gap;
         border-top: none;
         border-bottom: none;
         color: $color-gray;
       }
 
       td:first-child {
-        padding: (2 * $gap) (2 * $gap) (2 * $gap) (5 * $gap);
+        padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap;
       }
 
       tbody {
@@ -218,7 +210,7 @@
           border-bottom: 1px solid $color-gray-lightest;
           font-size: 1.6rem;
           border-top: 0;
-          padding: (3 * $gap) (2 * $gap);
+          padding: 3 * $gap 2 * $gap;
 
           .usa-button-disabled {
             color: $color-gray-medium;
@@ -318,6 +310,11 @@
     .alert {
       margin: 4rem;
     }
+
+    .member-list__subhead {
+      font-weight: $font-normal;
+      font-size: $base-font-size;
+    }
   }
 
   .application-content {
@@ -333,7 +330,6 @@
       .block-list__footer {
         border-bottom: none;
       }
-
       .application-edit__env-list-item {
         label {
           color: $color-black;
@@ -373,7 +369,6 @@
     .portfolio-applications__header--actions {
       color: $color-blue;
       font-size: $small-font-size;
-
       .icon {
         @include icon-color($color-blue);
         @include icon-size(14);
@@ -384,7 +379,6 @@
   .application-list {
     .toggle-link {
       background-color: $color-blue-light;
-
       .icon {
         margin: $gap / 2;
       }
@@ -402,7 +396,6 @@
       .application-list-item__environment__csp_link {
         font-size: $small-font-size;
         font-weight: normal;
-
         &:hover {
           background-color: $color-aqua-light;
         }
@@ -420,7 +413,6 @@
 
   .subheading {
     @include subheading;
-
     margin-top: 6 * $gap;
     margin-bottom: 2 * $gap;
   }
@@ -431,6 +423,7 @@
 
   .pending-task-order {
     background-color: $color-gold-lightest;
+
     align-items: center;
     margin: 0;
     margin-bottom: 2 * $gap;
@@ -462,7 +455,6 @@
 
     .icon--tiny {
       @include icon-size(10);
-
       margin-left: 1rem;
     }
   }
@@ -487,7 +479,7 @@
 
     th {
       background-color: $color-gray-lightest;
-      padding: $gap (2 * $gap);
+      padding: $gap 2 * $gap;
       border-top: none;
       border-bottom: none;
       color: $color-gray;
@@ -566,7 +558,6 @@
 
   .panel {
     @include shadow-panel;
-
     margin-bottom: 4 * $gap;
   }
 }
@@ -586,7 +577,6 @@
         input {
           max-width: 30em;
         }
-
         .icon-validation {
           left: 30em;
         }
@@ -615,3 +605,7 @@
     }
   }
 }
+
+.member-list__name {
+  margin-top: 1rem;
+}

templates/fragments/applications/edit_team.html

@@ -11,7 +11,11 @@
   <toggler inline-template>
     <li class="accordion-table__item">
       <div class="accordion-table__item-content row">
-        <div class="col col--grow">{{ member_form.user_name.data }}</div>
+        <div class="col col--grow">
+          <div class="member-list__name">
+            {{ member_form.user_name.data }}
+          </div>
+        </div>
         <div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
         <div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
         <div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
@@ -26,30 +30,47 @@
 
           {{
             ToggleButton(
-              open_html=open_html,
-              close_html=close_html,
-              section_name="environments"
-            )
+            open_html=open_html,
+            close_html=close_html,
+            section_name="environments"
+          )
           }}
         </div>
-      </div>
-      {% call ToggleSection(section_name="environments") %}
+        {% call ToggleSection(section_name="environments") %}
         <ul>
           {% for environment_form in environment_roles_form %}
-            <li class="accordion-table__item__expanded">
+          <li class="accordion-table__item__expanded row">
+            <div class="col col--grow">
               {{ environment_form.environment_name.data }}
-            </li>
+            </div>
+            <div class="accordion-table__item__expanded-role col col--grow">
+              <div class="right">
+                <span>
+                  {{ environment_form.role.data }}
+                </span>
+                <div class="icon-link">
+                  {{ Icon("edit") }}
+                </div>
+              </div>
+            </div>
+          </li>
           {% endfor %}
-          {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
-            <li class="accordion-table__item__expanded action-group">
-              <span class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
-                {{ "portfolios.applications.remove_member.button" | translate }}
-              </span>
-            </li>
-          {% endif %}
         </ul>
-      {% endcall %}
-    {{ member_form.user_id() }}
+        <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 }}
+          </button>
+        </div>
+        {% endcall %}
+        {{ member_form.user_id() }}
     </li>
   </toggler>
 {% endfor %}

templates/portfolios/applications/team.html

@@ -52,62 +52,60 @@
             {% if g.matchesPath("application-members") %}
               {% include "fragments/flash.html" %}
             {% endif %}
-            <header>
-              <div class="responsive-table-wrapper__header">
-                <div class="responsive-table-wrapper__title row">
-                  <div class="h3">
-                    {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
+              <header>
+                <div class="responsive-table-wrapper__header">
+                  <div class="responsive-table-wrapper__title row">
+                    <div class="h3">
+                      {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
+                      <p class="member-list__subhead">Members ({{ team_form.members | length }})</p>
+                    </div>
                   </div>
-                  <a class="icon-link">
-                    {{ Icon('info') }}
-                    {{ "portfolios.admin.settings_info" | translate }}
-                  </a>
                 </div>
               </header>
 
-            <div class="accordion-table accordion-table-list">
-              <div class="accordion-table__head row">
-                <div class="col col--grow">
-                  {{ "common.name" | translate }}
+              <div class="accordion-table accordion-table-list">
+                <div class="accordion-table__head row">
+                  <div class="col col--grow">
+                    {{ "common.name" | translate }}
+                  </div>
+                  <div class="col col--grow">
+                    {{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
+                  </div>
+                  <div class="col col--grow">
+                    {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
+                  </div>
+                  <div class="col col--grow">
+                    {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
+                  </div>
+                  <div class="col col--grow">
+                    &nbsp;
+                  </div>
                 </div>
-                <div class="col col--grow">
-                  {{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
-                </div>
-                <div class="col col--grow">
-                  {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
-                </div>
-                <div class="col col--grow">
-                  {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
-                </div>
-                <div class="col col--grow">
-                  &nbsp;
+                <ul class="accordion-table__items">
+                  {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
+                    {% include "fragments/applications/edit_team.html" %}
+                  {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
+                    {% include "fragments/applications/read_only_team.html" %}
+                  {% endif %}
+                </ul>
+              </div>
+
+              <div class="panel__footer">
+                <div class="action-group save">
+                  {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
+                    {{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
+                  {% endif %}
+
+                  {% set new_member_modal_name = "add-app-mem" %}
+                  {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
+                    <a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
+                      {{ "portfolios.admin.add_new_member" | translate }}
+                      {{ Icon("plus") }}
+                    </a>
+                  {% endif %}
                 </div>
               </div>
-              <ul class="accordion-table__items">
-                {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
-                  {% include "fragments/applications/edit_team.html" %}
-                {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
-                  {% include "fragments/applications/read_only_team.html" %}
-                {% endif %}
-              </ul>
             </div>
-
-            <div class="panel__footer">
-              <div class="action-group save">
-                {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
-                  {{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
-                {% endif %}
-
-                {% set new_member_modal_name = "add-app-mem" %}
-                {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
-                  <a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
-                    {{ "portfolios.admin.add_new_member" | translate }}
-                    {{ Icon("plus") }}
-                  </a>
-                {% endif %}
-              </div>
-            </div>
-          </div>
         </form>
       </base-form>
 

translations.yaml

@@ -468,6 +468,7 @@ portfolios:
       subheading: Team Settings
       title: '{application_name} Team Settings'
       user: User
+      add_to_environment: Add to existing environment
     team_text: Team
     update_button_text: Save
     members: