Merge pull request #1130 from dod-ccpo/app-settings-styling_part-4

App settings styling - team table

templates/applications/fragments/environments.html

@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/label.html" import Label %}
 {% from 'components/save_button.html' import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
@@ -6,9 +7,7 @@
 {% macro EnvironmentManagementTemplate(
   application,
   environments_obj,
-  new_env_form,
-  user_can_create_environment
-) %}
+  new_env_form) %}
 
   <h3>{{ "portfolios.applications.settings.environments" | translate }}</h3>
   <section class="panel" id="application-environments">
@@ -53,7 +52,7 @@
                       }}
                       <br>
                       {% if env['pending'] -%}
-                        <span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
+                        {{ Label('exchange', 'Changes Pending', classes='label--below')}}
                       {% else %}
                         <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
                           <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
@@ -94,7 +93,7 @@
         </div>
       </div>
     {%- endif %}
-    {% if user_can_create_environment -%}
+    {% if user_can(permissions.CREATE_ENVIRONMENT) -%}
       {% include "applications/fragments/add_new_environment.html" %}
     {%- endif %}
   </section>

templates/applications/fragments/members.html

@@ -1,5 +1,6 @@
 {% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
+{% from "components/label.html" import Label %}
 {% import "applications/fragments/new_member_modal_content.html" as member_steps %}
 {% import "applications/fragments/member_form_fields.html" as member_fields %}
 {% from "components/modal.html" import Modal %}
@@ -12,9 +13,9 @@
   new_member_form,
   action) %}
 
-  <div class="subheading"  id="application-members">
+  <h3  id="application-members">
     {{ 'portfolios.applications.settings.team_members' | translate }}
-  </div>
+  </h3>
 
   {% if g.matchesPath("application-members") %}
       {% include "fragments/flash.html" %}
@@ -23,33 +24,11 @@
   <div class="panel">
   {% if not application.members %}
     <div class='empty-state panel__content'>
-      <p class='empty-state__message'>{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}</p>
-
-      {{ Icon('avatar') }}
-
-      {% if not user_can(permissions.CREATE_APPLICATION_MEMBER) %}
-        <p class='empty-state__sub-message'>{{ ("portfolios.applications.team_settings.blank_slate.sub_message" | translate) }}</p>
-      {% endif %}
-
-      {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
-        {% set new_member_modal_name = "add-app-mem" %}
-        <a class="usa-button usa-button-big" v-on:click="openModal('{{ new_member_modal_name }}')">
-          {{ "portfolios.applications.team_settings.blank_slate.action_label" | translate }}
-        </a>
-        {{ MultiStepModalForm(
-            name=new_member_modal_name,
-            form=new_member_form,
-            form_action=url_for(action, application_id=application.id),
-            steps=[
-              member_steps.MemberStepOne(new_member_form),
-              member_steps.MemberStepTwo(new_member_form, application)
-            ],
-          ) }}
-      {% endif %}
+      <p class='empty-state__message'>
+        {{ ("portfolios.applications.members.blank_slate" | translate) }}
+      </p>
     </div>
-
   {% else %}
-    {% set new_member_modal_name = "add-app-mem" %}
 
     {% for member in members %}
       {%- if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
@@ -114,10 +93,9 @@
         <table class="atat-table">
           <thead>
             <tr>
-              <th>Member</th>
+              <th>Name</th>
               <th>Application Permissions</th>
               <th>Environment Access</th>
-              <th></th>
             </tr>
           </thead>
           <tbody>
@@ -131,7 +109,7 @@
                   </a>
                   <br>
                   {% if member.role_status == 'pending' %}
-                    <span class='label label--purple'>INVITE PENDING</span>
+                    {{ Label('envelope', 'invite pending', 'success', classes='label--below') }}
                   {% endif %}
 
                 </td>
@@ -142,44 +120,47 @@
                   {% endfor %}
                 </td>
                 <td>
-                  {% for env in member.environment_roles %}
-                    {{ env.environment_name }}{% if not env == member.environment_roles[-1]%},{% endif %}
-                  {% endfor %}
-                </td>
-                <td>
-                  {% if member.role_status == 'pending' -%}
-                    {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
-                    {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
-                    <a v-on:click='openModal("{{ resend_invite_modal }}")'>Resend Invite</a><br>
-                    {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
-                      <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
-                    {%- endif %}
-                  {%- endif %}
+                  <div class="form-row">
+                    <div class="form-col form-col--two-thirds">
+                      {% for env in member.environment_roles %}
+                        {{ env.environment_name }}<br>
+                      {% endfor %}
+                    </div>
+                    <div class="form-col form-col--one-third">
+                      {% if member.role_status == 'pending' -%}
+                        {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
+                        {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
+                        <a v-on:click='openModal("{{ resend_invite_modal }}")'>Resend Invite</a><br>
+                        {% if user_can_delete_app_member -%}
+                          <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
+                        {%- endif %}
+                      {%- endif %}
+                    </div>
+                  </div>
                 </td>
               </tr>
             {% endfor %}
           </tbody>
         </table>
-        {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
-          <a class="usa-button usa-button-secondary add-new-button" v-on:click="openModal('{{ new_member_modal_name }}')">
-            {{ "portfolios.applications.add_member" | translate }}
-          </a>
-        {% endif %}
       </div>
-
-      {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
-        {{ MultiStepModalForm(
-            name=new_member_modal_name,
-            form=new_member_form,
-            form_action=url_for(action, application_id=application.id),
-            steps=[
-              member_steps.MemberStepOne(new_member_form),
-              member_steps.MemberStepTwo(new_member_form, application)
-            ],
-          ) }}
-      {% endif %}
     </section>
   {% endif %}
+  {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
+    {% set new_member_modal_name = "add-app-mem" %}
+    <a class="usa-button usa-button-secondary add-new-button" v-on:click="openModal('{{ new_member_modal_name }}')">
+      {{ "portfolios.applications.add_member" | translate }}
+    </a>
+
+    {{ MultiStepModalForm(
+        name=new_member_modal_name,
+        form=new_member_form,
+        form_action=url_for(action, application_id=application.id),
+        steps=[
+          member_steps.MemberStepOne(new_member_form),
+          member_steps.MemberStepTwo(new_member_form, application)
+        ],
+      ) }}
+  {% endif %}
   </div>
 
 {% endmacro %}

templates/applications/new/step_3.html

@@ -2,7 +2,7 @@
 {% extends "applications/base.html" %}
 
 
-{% from "fragments/members.html" import MemberManagementTemplate with context %}
+{% from "applications/fragments/members.html" import MemberManagementTemplate with context %}
 {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
 
 {% block portfolio_header %}
@@ -16,16 +16,16 @@
     {{ ('portfolios.applications.new.step_3_description' | translate) }}
   </p>
   <hr class="panel__break">
-  
+
   {{ MemberManagementTemplate(
-    application, 
+    application,
     members,
     new_member_form,
     "applications.update_new_application_step_3") }}
-    
+
 
   <span class="action-group-footer">
-    <a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">  
+    <a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">
       Return to Application Settings
     </a>
     <a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_2', application_id=application.id) }}">
@@ -35,6 +35,5 @@
       Cancel
     </a>
   </span>
-  
-{% endblock %}
 
+{% endblock %}

templates/applications/settings.html

@@ -2,8 +2,8 @@
 
 {% from "components/alert.html" import Alert %}
 {% from "components/delete_confirmation.html" import DeleteConfirmation %}
-{% from "fragments/environments.html" import EnvironmentManagementTemplate %}
-{% from "fragments/members.html" import MemberManagementTemplate with context %}
+{% from "applications/fragments/environments.html" import EnvironmentManagementTemplate with context %}
+{% from "applications/fragments/members.html" import MemberManagementTemplate with context %}
 {% from "components/modal.html" import Modal %}
 {% from "components/pagination.html" import Pagination %}
 {% from "components/save_button.html" import SaveButton %}
@@ -27,8 +27,7 @@
       </form>
     </base-form>
   {% else %}
-    <!-- TODO: use new spacing styling to add in bottom margin here -->
-    <div class="">
+    <div>
       <p>
         {{ "fragments.edit_application_form.explain" | translate }}
       </p>
@@ -57,9 +56,7 @@
   {{ EnvironmentManagementTemplate(
     application,
     environments_obj,
-    new_env_form,
-    user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT)
-  ) }}
+    new_env_form) }}
 
   {% if user_can(permissions.DELETE_APPLICATION) %}
     {% set env_count = application.environments | length %}

templates/components/label.html

@@ -0,0 +1,8 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro Label(icon_name, text, type=None, classes="") -%}
+
+  <span class='label {% if type %}label--{{ type }}{% endif %} {{ classes }}'>
+    {{ Icon(icon_name) }} {{ text }}
+  </span>
+{%- endmacro %}

templates/components/selector.html

@@ -1,98 +0,0 @@
-{% from "components/icon.html" import Icon %}
-
-{# expects a wtforms SelectField instance #}
-{% macro Selector(field, default_label='Select an option') -%}
-
-<selector
-  v-bind:choices='{{ field.choices | tojson }}'
-  default-label='{{ default_label }}'
-  {% if field.data %}initial-choice='{{ field.data }}'{% endif %}
-  {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
-  inline-template>
-
-  <fieldset data-ally-disabled="true" v-bind:class="['selector usa-input', { 'usa-input--error': initialErrors }]">
-    <v-popover v-bind:container='false' ref='popover' v-on:show='onShow'>
-      <legend>
-        <div class="usa-input__title">{{ field.label | striptags }}</div>
-
-        {% if field.description %}
-          <p class='usa-input__help'>
-            {{ field.description | safe }}
-          </p>
-        {% endif %}
-
-        <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-      </legend>
-
-      <button
-        class='selector__button'
-        type='button'
-        v-html='label'
-        v-on:keydown.down.prevent.stop='handleButtonArrowDown'
-        v-on:keydown.up.prevent.stop='handleButtonArrowDown'
-        v-tooltip='{ container:false }'>
-      </button>
-
-      <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-
-      <input type='hidden' name='{{ field.name }}' v-bind:value='value'/>
-
-      <template v-if='showError'>
-        <span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
-      </template>
-
-      <template slot='popover'>
-        <div class='block-list'>
-          <ul>
-            <li v-for='(choice, index) in choices' class='block-list__item block-list__item--selectable'>
-              <template v-if='choice[0] !== ""'>
-
-                <selector-input
-                  name="{{ field.name }}"
-                  ref='choices'
-                  v-bind:value='choice[0]'
-                  v-bind:label='choice[1].name'
-                  v-bind:description='choice[1].description'
-                  v-bind:selected='value === choice[0]'
-                  v-bind:handle-change='change'
-                  v-bind:handle-enter='enter'
-                  v-bind:handle-esc='esc'
-                  inline-template>
-
-                  <div>
-                    <input
-                      ref='input'
-                      tabindex='0'
-                      type='radio'
-                      v-bind:name='name'
-                      v-bind:id='id'
-                      v-bind:value='value'
-                      v-bind:checked='selected'
-                      v-bind:autofocus='selected'
-                      v-on:change='onChange'
-                      v-on:keydown.enter.prevent.stop='onEnter'
-                      v-on:keydown.esc.prevent.stop='onEsc'/>
-
-                    <label v-bind:for='id'>
-                      <template v-if='description'>
-                        <dl>
-                          <dt v-html='label'></dt>
-                          <dd v-html='description'></dd>
-                        </dl>
-                      </template>
-                      <span v-else v-html='label'>
-                    </label>
-                  </div>
-
-                </selector-input>
-
-              </template>
-            </li>
-          </ul>
-        </div>
-      </template>
-    </v-popover>
-  </fieldset>
-</selector>
-
-{%- endmacro %}

templates/portfolios/fragments/change_ppoc.html

@@ -1,5 +1,4 @@
 {% from "components/icon.html" import Icon %}
-{% from "components/selector.html" import Selector %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
 {% from "components/alert.html" import Alert %}

templates/portfolios/fragments/members_edit.html

@@ -30,10 +30,9 @@
       <a v-on:click="openModal('{{ modal_id }}')" class='usa-button {{ archive_button_class }}'>
         {{ "portfolios.members.archive_button" | translate }}
       </a>
+      {% if not ppoc %}
+        {{ subform.member_id() }}
+      {% endif %}
     </td>
-
-    {% if not ppoc %}
-      {{ subform.member_id() }}
-    {% endif %}
   </tr>
 {% endfor %}