Merge pull request #787 from dod-ccpo/read-only-env-table

Read Only Version of Application Environments Table

styles/components/_accordion_table.scss

@@ -39,8 +39,8 @@
   .accordion-table__item-content {
     padding-top: $gap*2;
     padding-right: $gap;
-    padding-bottom: $gap*2;
     padding-left: $gap*2;
+    padding-bottom: $gap*3;
   }
 
   .accordion-table__items {
@@ -49,10 +49,15 @@
     li {
 
       list-style-type: none;
-
+      font-weight: $font-bold;
       border-bottom: 1px solid $color-gray-lightest;
       margin: 0;
 
+      .icon-link--large {
+        padding-top: $gap*.5;
+        padding-bottom: $gap*.5;
+      }
+
       ul {
         margin-top: 0;
         margin-bottom: 0;
@@ -111,8 +116,9 @@
         font-weight: bold;
       }
 
+      font-size: $small-font-size;
       background-color: $color-gray-lightest;
-      padding: $gap $gap * 5 $gap * 4 $gap * 5;
+      padding: $gap*2.5 $gap*7 $gap*5 $gap*7;
     }
   }
 }

templates/fragments/applications/edit_environments.html

@@ -17,7 +17,6 @@
   <div class="accordion-table accordion-table-list">
     <div class="accordion-table__head">
       <span>{{ "portfolios.applications.environments.name" | translate }}</span>
-      <span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
     </div>
 
     <ul class="accordion-table__items">
@@ -42,25 +41,25 @@
                 }}
               </span>
               <span class="icon-link icon-link--large accordion-table__item__toggler">
-                {% set open_environments_button %}
-                  {{ "common.show" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_down') }}
+                {% set open_members_button %}
+                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_down') }}
                 {% endset %}
 
-                {% set close_environments_button %}
-                  {{ "common.hide" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_up') }}
+                {% set close_members_button %}
+                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_up') }}
                 {% endset %}
 
                 {{
                   ToggleButton(
-                    open_html=open_environments_button,
-                    close_html=close_environments_button,
-                    section_name="environments"
+                    open_html=open_members_button,
+                    close_html=close_members_button,
+                    section_name="members"
                   )
                 }}
               </span>
             </div>
 
-            {% call ToggleSection(section_name="environments") %}
+            {% call ToggleSection(section_name="members") %}
               <ul>
                 {% for member in members_list %}
                 <li class="accordion-table__item__expanded">

templates/fragments/applications/read_only_environments.html

@@ -0,0 +1,76 @@
+{% from "components/icon.html" import Icon %}
+{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
+
+<div class="application-list-item">
+  <header>
+    <div class="responsive-table-wrapper__header">
+      <div class='responsive-table-wrapper__title'>
+        <div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
+      </div>
+    </div>
+  </header>
+
+  <div class="accordion-table accordion-table-list">
+    <div class="accordion-table__head">
+      <span>{{ "portfolios.applications.environments.name" | translate }}</span>
+    </div>
+
+    <ul class="accordion-table__items">
+      {% for name, members_list in environments_obj.items() %}
+        <toggler inline-template>
+          <li class="accordion-table__item">
+            <div class="accordion-table__item-content">
+              <span>
+                {{ name }}
+              </span>
+
+              <span class="icon-link icon-link--large accordion-table__item__toggler">
+                {% set open_members_button %}
+                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_down') }}
+                {% endset %}
+
+                {% set close_members_button %}
+                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_up') }}
+                {% endset %}
+
+                {{
+                  ToggleButton(
+                    open_html=open_members_button,
+                    close_html=close_members_button,
+                    section_name="members"
+                  )
+                }}
+              </span>
+            </div>
+
+            {% call ToggleSection(section_name="members") %}
+              <ul>
+                {% for member in members_list %}
+                <li class="accordion-table__item__expanded">
+                  <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
+                </li>
+                {% endfor %}
+              </ul>
+            {% endcall %}
+
+            {% call ToggleSection(section_name="edit") %}
+              <ul>
+                <li class="accordion-table__item__expanded">
+                  <div>
+                    <form>
+                      <div class="form-row">
+                        <div class="form-col form-col--half">
+                          Row here
+                        </div>
+                      </div>
+                    </form>
+                  </div>
+                </li>
+              </ul>
+            {% endcall %}
+          </li>
+        </toggler>
+      {% endfor %}
+    </ul>
+  </div>
+</div>

templates/portfolios/applications/settings.html

@@ -78,16 +78,21 @@
   </form>
 
     <div class="accordion-table responsive-table-wrapper panel">
-        {% include "fragments/applications/environments.html" %}
-      <div class="panel__footer">
-        <div class="action-group">
-          <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.update_button_text' | translate }}</button>
-          <a class='icon-link'>
-            {{ "portfolios.applications.add_environment" | translate }}
-            {{ Icon('plus-circle-solid') }}
-          </a>
-        </div>
-      </div>
+        {% if user_can(permissions.EDIT_APPLICATION) %}
+          {% include "fragments/applications/edit_environments.html" %}
+          <div class="panel__footer">
+            <div class="action-group">
+              <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.update_button_text' | translate }}</button>
+              <a class='icon-link'>
+                {{ "portfolios.applications.add_environment" | translate }}
+                {{ Icon('plus-circle-solid') }}
+              </a>
+            </div>
+          </div>
+        {% elif user_can(permissions.VIEW_ENVIRONMENT) %}
+          {% include "fragments/applications/read_only_environments.html" %}
+        {% endif %}
+
     </div>
   {% if user_can(permissions.DELETE_APPLICATION) %}
     {% call Modal(name="delete-application") %}

translations.yaml

@@ -25,6 +25,7 @@ common:
   edit: Edit
   hide: Hide
   manage: manage
+  members: Members
   officer_helpers:
     underscore_to_friendly:
       contracting_officer: Contracting Officer
@@ -365,7 +366,6 @@ navigation:
       funding: Funding
       reports: Reports
     budget_report: Budget Report
-    members: Members
     portfolio_admin: Portfolio Administration
     portfolio_funding: Funding
     portfolio_settings: Portfolio Settings
@@ -402,7 +402,6 @@ portfolios:
       button: Delete application
       header: Are you sure you want to delete this application?
     environments:
-      members: Members
       name: Name
     environments_description: Each environment created within an application is logically separated from one another for easier management and security.
     environments_heading: Application environments