Add "Applications" header on applications page

styles/components/_portfolio_layout.scss

@@ -89,6 +89,30 @@
   margin-top: 6 * $gap;
 }
 
+.portfolio-applications {
+  .portfolio-applications__header {
+    margin-bottom: 4 * $gap;
+
+    .portfolio-applications__header--title {
+      color: $color-gray-dark;
+      padding: $gap 0;
+      text-transform: uppercase;
+      opacity: 0.54;
+      font-size: $small-font-size;
+      font-weight: bold;
+    }
+
+    .portfolio-applications__header--actions {
+      color: $color-blue;
+      font-size: $small-font-size;
+      .icon {
+        @include icon-color($color-blue);
+        @include icon-size(14);
+      }
+    }
+  }
+}
+
 .portfolio-funding {
   .portfolio-funding__header {
     padding: 0;

templates/portfolios/applications/index.html

@@ -3,11 +3,24 @@
 
 {% extends "portfolios/base.html" %}
 
+{% set can_create_applications = user_can(permissions.ADD_APPLICATION_IN_PORTFOLIO) %}
+
 {% block portfolio_content %}
 
-{% if not portfolio.applications %}
+<div class='portfolio-applications'>
+  <div class='portfolio-applications__header row'>
+    <div class='portfolio-applications__header--title col col--grow'>Applications</div>
+    <div class='portfolio-applications__header--actions col'>
+      {% if can_create_applications %}
+        <a class='icon-link' href='{{ url_for('portfolios.new_application', portfolio_id=portfolio.id) }}'>
+          Add A New Application
+          {{ Icon("plus", classes="sidenav__link-icon") }}
+        </a>
+      {% endif %}
+    </div>
+  </div>
 
-  {% set can_create_applications = user_can(permissions.ADD_APPLICATION_IN_PORTFOLIO) %}
+  {% if not portfolio.applications %}
 
     {{ EmptyState(
       'This portfolio doesn’t have any applications yet.',
@@ -17,7 +30,7 @@
       sub_message=None if can_create_applications else 'Please contact your JEDI Cloud portfolio administrator to set up a new application.'
     ) }}
 
-{% else %}
+  {% else %}
 
     {% for application in portfolio.applications %}
       <div v-cloak class='block-list application-list-item'>
@@ -48,7 +61,8 @@
       </div>
     {% endfor %}
 
-{% endif %}
+  {% endif %}
+
+</div>
 
 {% endblock %}
-