Merge pull request #1288 from dod-ccpo/portfolio-admin-styling

Update styling on portfolio admin page

atst/domain/portfolios/portfolios.py

@@ -107,4 +107,7 @@ class Portfolios(object):
         if "name" in new_data:
             portfolio.name = new_data["name"]
 
+        if "description" in new_data:
+            portfolio.description = new_data["description"]
+
         PortfoliosQuery.add_and_commit(portfolio)

atst/forms/portfolio.py

@@ -23,20 +23,10 @@ class PortfolioForm(BaseForm):
             )
         ],
     )
-
-
-class PortfolioCreationForm(BaseForm):
-    name = StringField(
-        translate("forms.portfolio.name.label"),
-        validators=[
-            Length(
-                min=4,
-                max=100,
-                message=translate("forms.portfolio.name.length_validation_message"),
-            )
-        ],
-    )
     description = TextAreaField(translate("forms.portfolio.description.label"),)
+
+
+class PortfolioCreationForm(PortfolioForm):
     defense_component = SelectMultipleField(
         choices=SERVICE_BRANCHES,
         widget=ListWidget(prefix_label=False),

atst/routes/portfolios/admin.py

@@ -68,7 +68,7 @@ def render_admin_page(portfolio, form=None):
     pagination_opts = Paginator.get_pagination_opts(http_request)
     audit_events = AuditLog.get_portfolio_events(portfolio, pagination_opts)
     members_data = get_members_data(portfolio)
-    portfolio_form = PortfolioForm(data={"name": portfolio.name})
+    portfolio_form = PortfolioForm(obj=portfolio)
     member_perms_form = member_forms.MembersPermissionsForm(
         data={"members_permissions": members_data}
     )

styles/components/_forms.scss

@@ -203,3 +203,7 @@
     display: inline;
   }
 }
+
+.form-container__half {
+  max-width: 46rem;
+}

templates/portfolios/admin.html

@@ -1,43 +1,43 @@
 {% extends "portfolios/base.html" %}
 
 {% from "components/pagination.html" import Pagination %}
-{% from "components/text_input.html" import TextInput %}
 {% from 'components/save_button.html' import SaveButton %}
+{% from 'components/sticky_cta.html' import StickyCTA %}
+{% from "components/text_input.html" import TextInput %}
 
 {% block portfolio_content %}
 
+{{ StickyCTA(text="Settings") }}
+
   <div v-cloak class="portfolio-admin portfolio-content">
 
-    <div class="panel">
+    <!-- max width of this section is 460px -->
-      <div class="panel__content">
+    <section class="form-container__half">
-
+      <h3>Portfolio name and component</h3>
-        {% if user_can(permissions.EDIT_PORTFOLIO_NAME) %}
+      {% if user_can(permissions.EDIT_PORTFOLIO_NAME) %}
-          <base-form inline-template>
+        <base-form inline-template>
-            <form method="POST" action="{{ url_for('portfolios.edit', portfolio_id=portfolio.id) }}" autocomplete="false">
+          <form method="POST" action="{{ url_for('portfolios.edit', portfolio_id=portfolio.id) }}" autocomplete="false">
-              {{ portfolio_form.csrf_token }}
+            {{ portfolio_form.csrf_token }}
-              <div class='form-row'>
+            {{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
-                <div class='form-col form-col--half'>
+            {{ TextInput(portfolio_form.description, paragraph=True) }}
-                  {{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
+            <div class='edit-portfolio-name action-group'>
-                </div>
+              {{ SaveButton(text='Save Changes', additional_classes='usa-button-big') }}
-                <div class='edit-portfolio-name action-group'>
-                  {{ SaveButton(text='Save', additional_classes='usa-button-big') }}
-                </div>
-              </div>
-            </form>
-          </base-form>
-        {% else %}
-          <div>
-            <div class='admin-title'>
-              {{ "portfolios.admin.portfolio_name" | translate }}
             </div>
+          </form>
+        </base-form>
+      {% else %}
+        <div>
+          <div class='admin-title'>
+            {{ "portfolios.admin.portfolio_name" | translate }}
           </div>
+        </div>
 
-          <div>
+        <div>
-            <div class='admin-content'>
+          <div class='admin-content'>
-              {{ portfolio.name }}
+            {{ portfolio.name }}
-            </div>
           </div>
-        {% endif %}
+        </div>
+      {% endif %}
 
         <div class='defense-row'>
           <div>
@@ -54,7 +54,9 @@
           </div>
         </div>
       </div>
-    </div>
+    </section>
+
+    <hr>
 
     {% if user_can(permissions.VIEW_PORTFOLIO_POC) %}
       {% include "portfolios/fragments/primary_point_of_contact.html" %}

tests/routes/portfolios/test_admin.py

@@ -166,16 +166,17 @@ def test_cannot_update_portfolio_ppoc_perms(client, user_session):
     assert ppoc_pf_role.has_permission_set(PermissionSets.PORTFOLIO_POC)
 
 
-def test_update_portfolio_name(client, user_session):
+def test_update_portfolio_name_and_description(client, user_session):
     portfolio = PortfolioFactory.create()
     user_session(portfolio.owner)
     response = client.post(
         url_for("portfolios.edit", portfolio_id=portfolio.id),
-        data={"name": "a cool new name"},
+        data={"name": "a cool new name", "description": "a portfolio for things"},
         follow_redirects=True,
     )
     assert response.status_code == 200
     assert portfolio.name == "a cool new name"
+    assert portfolio.description == "a portfolio for things"
 
 
 def updating_ppoc_successfully(client, old_ppoc, new_ppoc, portfolio):