From 171898c75362bfe13c3f10b76877c5ec1ee01a1c Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 09:58:47 -0400
Subject: [PATCH 01/10] WIP: use lists for application environment table

---
 styles/components/_accordion_table.scss       | 115 ++++++++++--------
 styles/elements/_tables.scss                  |   2 +-
 templates/components/toggle_list.html         |  27 ++++
 .../fragments/applications/environments.html  |  21 ++++
 4 files changed, 113 insertions(+), 52 deletions(-)
 create mode 100644 templates/components/toggle_list.html

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 53153470..33cf2111 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -1,65 +1,78 @@
 .accordion-table {
 
-  table {
-    thead th {
-      text-transform: uppercase;
-      border-bottom: 1px solid $color-gray-lightest;
-      border-top: none;
+  &.accordion-table-list {
+    display: table;
+    width: 100%;
+  }
+
+  .accordion-table__head {
+    padding: 0.8rem 1.6rem;
+    font-weight: 700;
+    color: $color-gray;
+    text-transform: uppercase;
+    background-color: $color-gray-lightest;
+    border-bottom: 1px solid $color-gray-lightest;
+    border-top: none;
+  }
+
+  thead th {
+    text-transform: uppercase;
+    border-bottom: 1px solid $color-gray-lightest;
+    border-top: none;
+  }
+
+  th, td {
+    white-space: nowrap;
+
+    button {
+      margin: 0;
     }
+  }
 
-    th, td {
-      white-space: nowrap;
+  .accordion-table__items {
+    .accordion-table__item__toggler {
+      @include icon-link-color($color-blue, $color-gray-lightest);
+      float: right;
+      margin-left: -$gap;
+      color: $color-blue;
 
-      button {
-        margin: 0;
+      .icon {
+        @include icon-size(12);
+        margin-right: $gap;
+      }
+
+      .open-indicator {
+        position: absolute;
+        bottom: 0;
+        left: 5 * $gap;
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+
+        border-bottom: 10px solid $color-blue-light;
       }
     }
 
-    .accordion-table__items {
-      .accordion-table__item__toggler {
-        @include icon-link-color($color-blue, $color-gray-lightest);
-        float: right;
-        margin-left: -$gap;
-        color: $color-blue;
+    th, td, tr {
+      border-bottom: 1px dashed $color-gray-lightest;
+    }
 
-        .icon {
-          @include icon-size(12);
-          margin-right: $gap;
+    th[scope=rowgroup] {
+      position: relative;
+    }
+
+    .accordion-table__item__expanded {
+      margin-left: 2 * $gap;
+
+      th, td {
+        .icon-link {
+          font-weight: $font-normal;
+          font-size: $base-font-size;
         }
 
-        .open-indicator {
-          position: absolute;
-          bottom: 0;
-          left: 5 * $gap;
-          width: 0;
-          height: 0;
-          border-left: 10px solid transparent;
-          border-right: 10px solid transparent;
-
-          border-bottom: 10px solid $color-blue-light;
-        }
-      }
-
-      th, td, tr {
-        border-bottom: 1px dashed $color-gray-lightest;
-      }
-
-      th[scope=rowgroup] {
-        position: relative;
-      }
-
-      .accordion-table__item__expanded {
-        margin-left: 2 * $gap;
-
-        th, td {
-          .icon-link {
-            font-weight: $font-normal;
-            font-size: $base-font-size;
-          }
-
-          border-bottom: 1px dashed $color-white;
-          background-color: $color-gray-lightest;
-        }
+        border-bottom: 1px dashed $color-white;
+        background-color: $color-gray-lightest;
       }
     }
   }
diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss
index 7b8da846..61bb1f9d 100644
--- a/styles/elements/_tables.scss
+++ b/styles/elements/_tables.scss
@@ -4,7 +4,7 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
  */
 
- table {
+table {
   @include panel-margin;
   min-width: 100%;
 
diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html
new file mode 100644
index 00000000..9f1d71a2
--- /dev/null
+++ b/templates/components/toggle_list.html
@@ -0,0 +1,27 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro ToggleList(item_name, item_type, length) %}
+  <li is="toggler">
+    <template slot-scope="props">
+      <span v-on:click="props.toggle">{{ item_name }}</span>
+
+      <template v-if="props.isVisible">
+        <span
+          v-on:click="props.toggle"
+          class='icon-link icon-link--large accordion-table__item__toggler' >
+          Hide {{ item_type }} ({{ length }}){{ Icon('caret_up') }}
+        </span>
+      </template>
+      <template v-else>
+        <span
+          v-on:click="props.toggle"
+          class='icon-link icon-link--large accordion-table__item__toggler'>
+          Show {{ item_type }} ({{ length }}){{ Icon('caret_down') }}
+        </span>
+      </template>
+      <div v-show="props.isVisible">
+        {{ caller() }}
+      </div>
+    </template>
+  </li>
+{% endmacro %}
diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html
index 6300cd51..1ecf6a3f 100644
--- a/templates/fragments/applications/environments.html
+++ b/templates/fragments/applications/environments.html
@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/toggle_list.html" import ToggleList %}
 
 <div class="application-list-item">
   <header>
@@ -13,6 +14,25 @@
     </div>
   </header>
 
+  <div class="accordion-table accordion-table-list">
+    <div class="accordion-table__head">
+      <span>{{ "portfolios.applications.environments.name" | translate }}</span>
+      <span class="right">{{ "portfolios.applications.environments.members" | translate }}</span>
+    </div>
+
+    <ul class='accordion-table__items'>
+      {% for name, members_list in environments_obj.items() %}
+        {% call ToggleList(item_name=name, item_type="Members", length=(members_list|length)) %}
+          {% for member in members_list %}
+            <li>
+              {{ member }}
+            </li>
+          {% endfor %}
+        {% endcall %}
+      {% endfor %}
+    </ul>
+  </div>
+
   <environments-table
     v-cloak
     v-bind:environments='{{ environments_obj }}'
@@ -24,6 +44,7 @@
       </thead>
 
       <tbody v-for='(members_list, name) in environments' class='accordion-table__items'>
+
         <tr>
           <th scope='rowgroup' v-on:click="toggle($event, name)" v-html='name'></th>
 

From 8efd54f14600a573f2cdb609435308e7076b043c Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 10:12:55 -0400
Subject: [PATCH 02/10] Padding for accordion

---
 styles/components/_accordion_table.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 33cf2111..1933032c 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -1,3 +1,5 @@
+$accordion-padding: 0.8rem 1.6rem;
+
 .accordion-table {
 
   &.accordion-table-list {
@@ -6,7 +8,7 @@
   }
 
   .accordion-table__head {
-    padding: 0.8rem 1.6rem;
+    padding: $accordion-padding;
     font-weight: 700;
     color: $color-gray;
     text-transform: uppercase;
@@ -30,6 +32,10 @@
   }
 
   .accordion-table__items {
+    li {
+      padding: $accordion-padding;
+    }
+
     .accordion-table__item__toggler {
       @include icon-link-color($color-blue, $color-gray-lightest);
       float: right;

From 0efd0b8f8f98e6a481af9f3077f73e6b4c2f2a23 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 10:18:05 -0400
Subject: [PATCH 03/10] float-right members column title

---
 styles/components/_accordion_table.scss            | 4 ++++
 templates/fragments/applications/environments.html | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 1933032c..03263995 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -1,5 +1,9 @@
 $accordion-padding: 0.8rem 1.6rem;
 
+.float-right {
+  float: right;
+}
+
 .accordion-table {
 
   &.accordion-table-list {
diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html
index 1ecf6a3f..65e44920 100644
--- a/templates/fragments/applications/environments.html
+++ b/templates/fragments/applications/environments.html
@@ -17,7 +17,7 @@
   <div class="accordion-table accordion-table-list">
     <div class="accordion-table__head">
       <span>{{ "portfolios.applications.environments.name" | translate }}</span>
-      <span class="right">{{ "portfolios.applications.environments.members" | translate }}</span>
+      <span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
     </div>
 
     <ul class='accordion-table__items'>

From b1dd769e1be0156d54c35f6b92eae91236b8df04 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 10:42:23 -0400
Subject: [PATCH 04/10] Use $gap

---
 styles/components/_accordion_table.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 03263995..cbbb60d9 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -1,5 +1,3 @@
-$accordion-padding: 0.8rem 1.6rem;
-
 .float-right {
   float: right;
 }
@@ -12,7 +10,7 @@ $accordion-padding: 0.8rem 1.6rem;
   }
 
   .accordion-table__head {
-    padding: $accordion-padding;
+    padding: $gap $gap*2;
     font-weight: 700;
     color: $color-gray;
     text-transform: uppercase;
@@ -36,8 +34,13 @@ $accordion-padding: 0.8rem 1.6rem;
   }
 
   .accordion-table__items {
+    margin: 0;
+
     li {
-      padding: $accordion-padding;
+      padding: $gap*2;
+
+      border-bottom: 1px dashed $color-gray-lightest;
+      margin: 0;
     }
 
     .accordion-table__item__toggler {

From 3ab84ba6f45da96a91c36f286def1630bde1e739 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 13:05:44 -0400
Subject: [PATCH 05/10] improvements to nested list

---
 styles/components/_accordion_table.scss       | 26 ++++++++--
 templates/components/toggle_list.html         | 38 ++++++++-------
 .../fragments/applications/environments.html  | 48 +++----------------
 3 files changed, 48 insertions(+), 64 deletions(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index cbbb60d9..bdd0140f 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -33,21 +33,39 @@
     }
   }
 
+  .accordion-table__item-content {
+    padding-top: $gap*3;
+    padding-right: $gap;
+    padding-bottom: $gap*3;
+    padding-left: $gap*3;
+  }
+
   .accordion-table__items {
     margin: 0;
 
     li {
-      padding: $gap*2;
 
-      border-bottom: 1px dashed $color-gray-lightest;
+      list-style-type: none;
+
+      border-bottom: 1px solid $color-gray-lightest;
       margin: 0;
+
+      ul {
+        margin-top: 0;
+        margin-bottom: 0;
+        background-color: $color-gray-lightest;
+
+        li {
+          border-bottom: 1px solid $color-gray-lighter;
+        }
+      }
     }
 
     .accordion-table__item__toggler {
       @include icon-link-color($color-blue, $color-gray-lightest);
       float: right;
-      margin-left: -$gap;
       color: $color-blue;
+      padding: 0;
 
       .icon {
         @include icon-size(12);
@@ -76,8 +94,6 @@
     }
 
     .accordion-table__item__expanded {
-      margin-left: 2 * $gap;
-
       th, td {
         .icon-link {
           font-weight: $font-normal;
diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html
index 9f1d71a2..c324ec9d 100644
--- a/templates/components/toggle_list.html
+++ b/templates/components/toggle_list.html
@@ -1,24 +1,26 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro ToggleList(item_name, item_type, length) %}
-  <li is="toggler">
-    <template slot-scope="props">
-      <span v-on:click="props.toggle">{{ item_name }}</span>
+{% macro ToggleItem(action, item_type, length, icon) %}
+  <span
+    v-on:click="props.toggle"
+    class="icon-link icon-link--large accordion-table__item__toggler">
+    {{ action }} {{ item_type }} ({{ length }}){{ Icon(icon) }}
+  </span>
+{% endmacro %}
 
-      <template v-if="props.isVisible">
-        <span
-          v-on:click="props.toggle"
-          class='icon-link icon-link--large accordion-table__item__toggler' >
-          Hide {{ item_type }} ({{ length }}){{ Icon('caret_up') }}
-        </span>
-      </template>
-      <template v-else>
-        <span
-          v-on:click="props.toggle"
-          class='icon-link icon-link--large accordion-table__item__toggler'>
-          Show {{ item_type }} ({{ length }}){{ Icon('caret_down') }}
-        </span>
-      </template>
+{% macro ToggleList(item_name, item_type, length) %}
+  <li is="toggler" class="accordion-table__item">
+    <template slot-scope="props">
+      <div class="accordion-table__item-content">
+        <span v-on:click="props.toggle">{{ item_name }}</span>
+
+        <template v-if="props.isVisible">
+          {{ ToggleItem("Hide", item_type, length, "caret_up") }}
+        </template>
+        <template v-else>
+          {{ ToggleItem("Show", item_type, length, "caret_down") }}
+        </template>
+      </div>
       <div v-show="props.isVisible">
         {{ caller() }}
       </div>
diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html
index 65e44920..8ae3083a 100644
--- a/templates/fragments/applications/environments.html
+++ b/templates/fragments/applications/environments.html
@@ -20,52 +20,18 @@
       <span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
     </div>
 
-    <ul class='accordion-table__items'>
+    <ul class="accordion-table__items">
       {% for name, members_list in environments_obj.items() %}
         {% call ToggleList(item_name=name, item_type="Members", length=(members_list|length)) %}
-          {% for member in members_list %}
-            <li>
-              {{ member }}
+          <ul>
+            {% for member in members_list %}
+            <li class="accordion-table__item__expanded">
+              <div class="accordion-table__item-content">{{ member }}</div>
             </li>
-          {% endfor %}
+            {% endfor %}
+          </ul>
         {% endcall %}
       {% endfor %}
     </ul>
   </div>
-
-  <environments-table
-    v-cloak
-    v-bind:environments='{{ environments_obj }}'
-    inline-template>
-    <table>
-      <thead>
-        <th scope='col'>{{ "portfolios.applications.environments.name" | translate }}</th>
-        <th scope='col' class='table-cell--align-right'>{{ "portfolios.applications.environments.members" | translate }}</th>
-      </thead>
-
-      <tbody v-for='(members_list, name) in environments' class='accordion-table__items'>
-
-        <tr>
-          <th scope='rowgroup' v-on:click="toggle($event, name)" v-html='name'></th>
-
-          <template v-if="environmentsState[name].isVisible">
-            <td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Hide Members (<span v-html='members_list.length'></span>){{ Icon('caret_up') }}</td>
-          </template>
-          <template v-else>
-            <td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Show Members (<span v-html='members_list.length'></span>){{ Icon('caret_down') }}</td>
-          </template>
-        </tr>
-
-        <tr scope='rowgroup' v-for='member in members_list' v-show='environmentsState[name].isVisible' class='accordion-table__item__expanded'>
-          <td>
-            <div>
-              <span v-html='member'></span>
-            </div>
-          </td>
-          <td class='table-cell--expand'></td>
-        </tr>
-      </tbody>
-
-    </table>
-  </environments-table>
 </div>

From 4514cca021bf8fa3fbe37d809b2bc6721e2574d8 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 16:00:17 -0400
Subject: [PATCH 06/10] Use translation strings

---
 templates/components/toggle_list.html | 18 ++++++++++++++++--
 translations.yaml                     |  2 ++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html
index c324ec9d..8bce7dc1 100644
--- a/templates/components/toggle_list.html
+++ b/templates/components/toggle_list.html
@@ -15,10 +15,24 @@
         <span v-on:click="props.toggle">{{ item_name }}</span>
 
         <template v-if="props.isVisible">
-          {{ ToggleItem("Hide", item_type, length, "caret_up") }}
+          {{
+            ToggleItem(
+              ("common.hide" | translate),
+              item_type,
+              length,
+              "caret_up",
+            )
+          }}
         </template>
         <template v-else>
-          {{ ToggleItem("Show", item_type, length, "caret_down") }}
+          {{
+            ToggleItem(
+              ("common.show" | translate),
+              item_type,
+              length,
+              "caret_down",
+            )
+          }}
         </template>
       </div>
       <div v-show="props.isVisible">
diff --git a/translations.yaml b/translations.yaml
index 4b47c464..dd77f3ab 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -29,6 +29,8 @@ flash:
   new_ppoc_title: Primary point of contact updated
   new_ppoc_message: You have successfully added {ppoc_name} as the primary point of contact. You are no longer the PPoC.
 common:
+  hide: Hide
+  show: Show
   back: Back
   cancel: Cancel
   confirm: Confirm

From 5bf8022a51eedb459396fbcee771c5b5ad1f57b3 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Mon, 15 Apr 2019 13:41:09 -0400
Subject: [PATCH 07/10] Fix specs

---
 atst/routes/portfolios/applications.py | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/atst/routes/portfolios/applications.py b/atst/routes/portfolios/applications.py
index 20603b3c..62eb5000 100644
--- a/atst/routes/portfolios/applications.py
+++ b/atst/routes/portfolios/applications.py
@@ -57,6 +57,15 @@ def create_application(portfolio_id):
         )
 
 
+def environments_obj(application):
+    environments_obj = {}
+
+    for env in application.environments:
+        environments_obj[env.name] = [user.full_name for user in env.users]
+
+    return environments_obj
+
+
 @portfolios_bp.route("/portfolios/<portfolio_id>/applications/<application_id>/edit")
 @user_can(Permissions.EDIT_APPLICATION, message="view application edit form")
 def edit_application(portfolio_id, application_id):
@@ -64,16 +73,12 @@ def edit_application(portfolio_id, application_id):
     application = Applications.get(application_id)
     form = ApplicationForm(name=application.name, description=application.description)
 
-    environments_obj = {}
-    for env in application.environments:
-        environments_obj[env.name] = [user.full_name for user in env.users]
-
     return render_template(
         "portfolios/applications/edit.html",
         portfolio=portfolio,
         application=application,
         form=form,
-        environments_obj=environments_obj,
+        environments_obj=environments_obj(application=application),
     )
 
 
@@ -98,6 +103,7 @@ def update_application(portfolio_id, application_id):
             portfolio=portfolio,
             application=application,
             form=form,
+            environments_obj=environments_obj(application=application),
         )
 
 

From 96a9078e0d186e06723921b3486f694e281ca658 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Mon, 15 Apr 2019 13:45:53 -0400
Subject: [PATCH 08/10] Fix toggler padding

---
 styles/components/_accordion_table.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index bdd0140f..51ebc293 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -65,7 +65,8 @@
       @include icon-link-color($color-blue, $color-gray-lightest);
       float: right;
       color: $color-blue;
-      padding: 0;
+      padding: $gap;
+      margin: -$gap 0;
 
       .icon {
         @include icon-size(12);

From ed9ac05942f1ab492138e251cf349710cd341852 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Mon, 15 Apr 2019 14:50:58 -0400
Subject: [PATCH 09/10] ul padding-left

---
 styles/components/_accordion_table.scss  | 3 +++
 styles/components/_portfolio_layout.scss | 3 ---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 51ebc293..69694322 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -3,6 +3,9 @@
 }
 
 .accordion-table {
+  ul {
+    padding-left: 0;
+  }
 
   &.accordion-table-list {
     display: table;
diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index 906e14a6..90272575 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -336,9 +336,6 @@
     }
 
     .application-list-item {
-      ul {
-        padding-left: 0;
-      }
       .block-list__footer {
         border-bottom: none;
       }

From 9c89a8e7a59839e797a71d8f95f655887cbe92ac Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Tue, 16 Apr 2019 09:41:48 -0400
Subject: [PATCH 10/10] Rename get_environments_obj_for_app method

---
 atst/routes/portfolios/applications.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/atst/routes/portfolios/applications.py b/atst/routes/portfolios/applications.py
index 62eb5000..b07838d1 100644
--- a/atst/routes/portfolios/applications.py
+++ b/atst/routes/portfolios/applications.py
@@ -57,7 +57,7 @@ def create_application(portfolio_id):
         )
 
 
-def environments_obj(application):
+def get_environments_obj_for_app(application):
     environments_obj = {}
 
     for env in application.environments:
@@ -78,7 +78,7 @@ def edit_application(portfolio_id, application_id):
         portfolio=portfolio,
         application=application,
         form=form,
-        environments_obj=environments_obj(application=application),
+        environments_obj=get_environments_obj_for_app(application=application),
     )
 
 
@@ -103,7 +103,7 @@ def update_application(portfolio_id, application_id):
             portfolio=portfolio,
             application=application,
             form=form,
-            environments_obj=environments_obj(application=application),
+            environments_obj=get_environments_obj_for_app(application=application),
         )