Merge pull request #627 from dod-ccpo/portfolio-admin-reskin

Portfolio admin reskin

atst/routes/portfolios/index.py

@@ -22,11 +22,20 @@ def portfolios():
         return render_template("portfolios/blank_slate.html")
 
 
-@portfolios_bp.route("/portfolios/<portfolio_id>/edit")
+@portfolios_bp.route("/portfolios/<portfolio_id>/admin")
 def portfolio(portfolio_id):
     portfolio = Portfolios.get_for_update_information(g.current_user, portfolio_id)
     form = PortfolioForm(data={"name": portfolio.name})
-    return render_template("portfolios/edit.html", form=form, portfolio=portfolio)
+    pagination_opts = Paginator.get_pagination_opts(http_request)
+    audit_events = AuditLog.get_portfolio_events(
+        g.current_user, portfolio, pagination_opts
+    )
+    return render_template(
+        "portfolios/admin.html",
+        form=form,
+        portfolio=portfolio,
+        audit_events=audit_events,
+    )
 
 
 @portfolios_bp.route("/portfolios/<portfolio_id>/edit", methods=["POST"])

styles/components/_portfolio_layout.scss

@@ -163,6 +163,18 @@
       }
     }
   }
+
+  .activity-log {
+    border-top: 3px solid $color-blue;
+
+    .subheading {
+      border-top: 0;
+      border-bottom: 1px solid $color-gray-lightest;
+      padding: 1.6rem 1.6rem;
+      font-weight: $font-bold;
+    }
+  }
+
 }
 
 .portfolio-applications {
@@ -360,3 +372,21 @@
     border-bottom: none;
   }
 }
+
+.portfolio-admin {
+  .edit-portfolio-name.action-group {
+    margin-top: 2rem;
+  }
+
+  .form-row {
+    margin-bottom: 0;
+
+    .form-col {
+      .usa-input {
+        input {
+          max-width: 45em;
+        }
+      }
+    }
+  }
+}

styles/elements/_accordians.scss

@@ -25,6 +25,10 @@
   border-top: 3px solid $color-blue;
   border-bottom: none;
   box-shadow: 0 2px 4px 0 rgba(216,218,222,0.58);
+
+  &.row {
+    background: $color-white;
+  }
 }
 
 .accordian__title {

styles/elements/_block_lists.scss

@@ -1,5 +1,7 @@
 @mixin block-list {
   @include panel-margin;
+  @include shadow-panel
+  padding: 0;
 
   ul, dl {
     list-style: none;
@@ -15,6 +17,9 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  background-color: $color-gray-lightest;
+  padding: $gap 2 * $gap;
+  color: $color-gray;
 
   .icon-tooltip {
     margin: -$gap;
@@ -59,7 +64,7 @@
   margin: 0;
   padding: $gap * 2;
   border-top: 0;
-  border-bottom: 1px dashed $color-gray-light;
+  border-bottom: 1px solid $color-gray-lightest;
 
   @at-root li#{&} {
     &:last-child {

styles/sections/_application_list.scss

@@ -23,4 +23,8 @@
       }
     }
   }
+
+  header.accordian__header {
+    padding: 1.6rem;
+  }
 }

templates/fragments/audit_events_log.html

@@ -1,10 +1,7 @@
 {% from "components/pagination.html" import Pagination %}
 
-<section class="block-list">
-  <header class="block-list__header">
-    <h1 class="block-list__title">{{ "audit_log.header_title" | translate }}</h1>
-  </header>
-
+<section class="block-list activity-log">
+  <div class='subheading'>{{ "portfolios.admin.activity_log_title" | translate }}</div>
   <ul>
     {% for event in audit_events %}
       <li class="block-list__item">

templates/portfolios/admin.html

@@ -0,0 +1,33 @@
+{% extends "portfolios/base.html" %}
+
+{% from "components/pagination.html" import Pagination %}
+{% from "components/icon.html" import Icon %}
+{% from "components/text_input.html" import TextInput %}
+
+{% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
+
+{% block portfolio_content %}
+
+  {% include "fragments/flash.html" %}
+
+  <div v-cloak class="portfolio-admin portfolio-content">
+
+
+    <form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
+      {{ form.csrf_token }}
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.name, validation="portfolioName") }}
+        </div>
+
+        <div class='edit-portfolio-name action-group'>
+          <button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Save</button>
+        </div>
+      </div>
+    </form>
+
+    {% include "fragments/audit_events_log.html" %}
+
+    {{ Pagination(audit_events, 'portfolios.portfolio_activity', portfolio_id=portfolio_id) }}
+  </div>
+{% endblock %}

templates/portfolios/edit.html

@@ -1,38 +0,0 @@
-{% extends "portfolios/base.html" %}
-
-{% from "components/icon.html" import Icon %}
-{% from "components/text_input.html" import TextInput %}
-
-{% set secondary_breadcrumb = "navigation.portfolio_navigation.breadcrumbs.admin" | translate %}
-
-{% block portfolio_content %}
-
-{% include "fragments/flash.html" %}
-
-<form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
-  {{ form.csrf_token }}
-
-  <div class="panel">
-
-    <div class="panel__heading">
-      <h1>Portfolio Settings</h1>
-    </div>
-
-    <div class="panel__content">
-      {{ TextInput(form.name, validation="portfolioName") }}
-    </div>
-  </div>
-
-
-  <div class='action-group'>
-    <button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Save</button>
-    <a href='{{ url_for("portfolios.portfolio_applications", portfolio_id=portfolio.id) }}' class='action-group__action icon-link'>
-      {{ Icon('x') }}
-      <span>Cancel</span>
-    </a>
-  </div>
-
-
-</form>
-
-{% endblock %}

translations.yaml

@@ -303,6 +303,7 @@ navigation:
     applications: Applications
     portfolio_funding: Funding
     portfolio_settings: Portfolio Settings
+    portfolio_admin: Portfolio Administration
     breadcrumbs:
       admin: Admin
       funding: Funding
@@ -500,6 +501,8 @@ portfolios:
     team_management:
       title: '{application_name} Team Management'
       subheading: Team Management
+  admin:
+    activity_log_title: Activity Log
 testing:
   example_string: Hello World
   example_with_variables: 'Hello, {name}!'