Render all table elements; unstyled

templates/fragments/applications/environments.html

@@ -1,19 +1,32 @@
+{% from "components/icon.html" import Icon %}
+
 <div class="application-list-item">
   <header>
-    <h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
-    <p>
-      {{ 'portfolios.applications.environments_description' | translate }}
-    </p>
+    <div class='left'>
+      <div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
+    </div>
+    <a class='icon-link'>
+      {{ Icon('info') }}
+      {{ "portfolios.admin.settings_info" | translate }}
+    </a>
   </header>
 
-  <ul>
+  <table>
+    <thead>
+      <tr>
+          <td>{{ "portfolios.applications.environments.name" | translate }}</td>
+          <td>{{ "portfolios.applications.environments.members" | translate }}</td>
+      </tr>
+    </thead>
+
+    <tbody>
         {% for environment in application.environments %}
-      <li class="application-edit__env-list-item">
-        <div class="usa-input input--disabled">
-          <label>Environment Name</label>
-          <input type="text" disabled value="{{ environment.name }}" readonly />
-        </div>
-      </li>
+          <tr>
+            <td>{{ environment.name }}</td>
+            <td>Show Members({{ environment.num_users }}){{ Icon('caret_down') }}</td>
+          </tr>
         {% endfor %}
-  </ul>
+    </tbody>
+  </table>
+
 </div>

templates/portfolios/applications/edit.html

@@ -1,6 +1,7 @@
 {% extends "portfolios/applications/base.html" %}
 
 {% from "components/text_input.html" import TextInput %}
+{% from "components/icon.html" import Icon %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
 
@@ -26,6 +27,10 @@
         {% include "fragments/applications/environments.html" %}
       </div>
       <div class="action-group">
+        <a class='icon-link'>
+          {{ "portfolios.applications.add_environment" | translate }}
+          {{ Icon('plus-circle-solid') }}
+        </a>
         <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.update_button_text' | translate }}</button>
       </div>
     </div>

translations.yaml

@@ -587,6 +587,10 @@ portfolios:
     team_management:
       title: '{application_name} Team Management'
       subheading: Team Management
+    environments:
+      name: Name
+      members: Members
+    add_environment: Add New Environment
   admin:
     portfolio_members_title: Portfolio members
     portfolio_members_subheading: These members have different levels of access to the portfolio.