Fix permissions display

styles/components/_portfolio_layout.scss

@@ -554,20 +554,18 @@
     flex-direction: row-reverse;
   }
 
-  .defense-row {
+  .admin-title {
-    .admin-title {
+    padding: 0 0 0.4rem 0;
-      padding: 0 0 0.4rem 0;
+    margin-top: 0;
-      margin-top: 0;
+    font-size: 1.7rem;
-      font-size: 1.7rem;
+    font-weight: 700;
-      font-weight: 700;
+    max-width: 45em;
-      max-width: 45em;
+    position: relative;
-      position: relative;
+    clear: both;
-      clear: both;
+  }
-    }
 
-    .admin-content {
+  .admin-content {
-      margin-bottom: 2rem;
+    margin-bottom: 2rem;
-    }
   }
 }
 

templates/portfolios/admin.html

@@ -11,32 +11,44 @@
     <div class="panel">
       <div class="panel__content">
 
-        {% if user_can(permissions.VIEW_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'>
+              <div class='form-row'>
-              <div class='form-col form-col--half'>
+                <div class='form-col form-col--half'>
-                {{ TextInput(portfolio_form.name, validation="portfolioName") }}
+                  {{ TextInput(portfolio_form.name, validation="portfolioName") }}
-              </div>
+                </div>
-
                 <div class='edit-portfolio-name action-group'>
                   {{ SaveButton(text='Save', additional_classes='usa-button-big') }}
                 </div>
               </div>
-                <div class='defense-row'>
-                  <div>
-                    <div class='admin-title'>{{ "forms.task_order.defense_component_label" | translate }}</div>
-                    {% if portfolio.defense_component %}
-                      <div class='admin-content'>{{ portfolio.defense_component }}</div>
-                    {% else %}
-                      <div class='admin-content'>{{ "fragments.portfolio_admin.none" | translate }}</div>
-                    {% endif %}
-                  </div>
-                </div>
             </form>
           </base-form>
+        {% else %}
+          <div>
+            <div class='admin-title'>
+              {{ "portfolios.admin.portfolio_name" | translate }}
+            </div>
+          </div>
+
+          <div>
+            <div class='admin-content'>
+              {{ portfolio.name }}
+            </div>
+          </div>
         {% endif %}
+
+        <div class='defense-row'>
+          <div>
+            <div class='admin-title'>{{ "forms.task_order.defense_component_label" | translate }}</div>
+            {% if portfolio.defense_component %}
+              <div class='admin-content'>{{ portfolio.defense_component }}</div>
+            {% else %}
+              <div class='admin-content'>{{ "fragments.portfolio_admin.none" | translate }}</div>
+            {% endif %}
+          </div>
+        </div>
       </div>
     </div>
 

translations.yaml

@@ -440,6 +440,7 @@ portfolios:
     portfolio_members_subheading: These members have different levels of access to the portfolio.
     portfolio_members_title: Portfolio members
     settings_info: Learn more about these settings
+    portfolio_name: Portfolio name
   applications:
     add_application_text: Add a new application
     add_environment: Add new environment