Merge pull request #1480 from GSA/1464-switch-to-the-new-withnav_template

Switch to the new withnav_template

app/templates/base.html

@@ -47,7 +47,7 @@
       {% endblock %}
         {% block content %}
           {% block flash_messages %}
-            {% include 'flash_messages.html' %}
+            {% include 'new/components/flash_messages.html' %}
           {% endblock %}
           {% block maincolumn_content %}
               <div class="grid-row">

app/templates/new/layouts/withnav_template.html

@@ -1,57 +0,0 @@
-{% extends "/new/base.html" %}
-
-{% block per_page_title %}
-  {% block service_page_title %}{% endblock %}{% if current_service.name %} – {{ current_service.name }}{% endif %}
-  {% block org_page_title %}{% endblock %}{% if current_org.name %} – {{ current_org.name }}{% endif %}
-{% endblock %}
-
-{% block main %}
-  <div class="grid-container">
-    {% block serviceNavigation %}
-      {% if current_org.name %}
-      {% else %}
-          {% include "new/components/service_navigation.html" %}
-      {% endif %}
-    {% endblock %}
-    {#
-      The withnav_template can serve as a replacement for both settings_template and org_template.html.
-
-      The file service_navigation.html is included only in withnav_template. It's not used in settings_template. That is one out of the two differences between settings template and withnav template. As a result, when other templates extend settings_template, they include the serviceNavigation block but keep it empty. The settings_template.html is specifically used for these pages in the app: manage-users.html, service-settings.html, and user-profile.html.
-
-      In addition, serviceNavigation should be empty on templates that previously extended org_template. For templates that previously extended org_template.html, there's an addition of the orgNavBreadcrumb block.
-      {% block orgNavBreadcrumb %}
-        {% include "/new/components/org_nav_breadcrumb.html" %}
-      {% endblock %}
-    #}
-    {% if current_org.name %}
-      {% block orgNavBreadcrumb %}{% include "/new/components/org_nav_breadcrumb.html" %}{% endblock %}
-    {% endif %}
-    <div class="grid-row margin-top-5">
-      <div class="tablet:grid-col-3">
-        {% block sideNavigation %}
-          {% if org_navigation_links %}
-            {% include "/new/components/org_nav.html" %}
-          {% else %}
-            {% include "/new/components/main_nav.html" %}
-          {% endif %}
-          {#
-          Include settings_nav.html for child templates that previously extended settings_template.
-
-          Include "org_nav.html" for child templates that previously extended org_template html
-          #}
-        {% endblock %}
-      </div>
-      <div class="tablet:grid-col-9 tablet:padding-left-4">
-        {% block beforeContent %}
-          {% block backLink %}{% endblock %}
-        {% endblock %}
-        <main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
-        {% block content %}
-          {% include 'flash_messages.html' %}
-          {% block maincolumn_content %}{% endblock %}
-        {% endblock %}
-        </main>
-      </div>
-    </div>
-  </div>
-{% endblock %}

app/templates/old/main_nav.html

@@ -1,3 +1,4 @@
+{# This template is an old version #}
 {% if help %}
   {% include 'partials/tour.html' %}
 {% else %}

app/templates/old/org_nav.html

@@ -1,3 +1,4 @@
+{# This template is an old version #}
 <nav class="navigation">
   <ul>
     <li><a class="usa-link{{ org_navigation.is_selected('dashboard') }}" href="{{ url_for('.organization_dashboard', org_id=current_org.id) }}">Usage</a></li>

app/templates/old/service_navigation.html

@@ -1,3 +1,4 @@
+{# This template is an old version #}
 {% macro navigation_service_name(service) %}
   <div class="font-body-2xl text-bold">
     {{ service.name }}

app/templates/old/settings_nav.html

@@ -1,3 +1,4 @@
+{# This template is an old version #}
 {% if help %}
 {% include 'partials/tour.html' %}
 {% else %}

app/templates/old/settings_template.html

@@ -1,4 +1,5 @@
-{% extends "base.html" %}
+{# This template is an old version #}
+{% extends "admin_template.html" %}
 
 {% block per_page_title %}
   {% block service_page_title %}{% endblock %} – {{ current_service.name }}

app/templates/old/withnav_template.html

@@ -0,0 +1,36 @@
+{# This template is an old version #}
+{% extends "admin_template.html" %}
+
+{% block per_page_title %}
+  {% block service_page_title %}{% endblock %} – {{ current_service.name }}
+{% endblock %}
+
+{% block main %}
+  <div class="grid-container">
+    {% include "service_navigation.html" %}
+    <div class="grid-row margin-top-5">
+      {% if help %}
+        <div class="tablet:grid-col-3">
+      {% else %}
+        <div class="tablet:grid-col-3">
+      {% endif %}
+          {% include "main_nav.html" %}
+        </div>
+      {% if help %}
+        <div class="grid-col-8">
+      {% else %}
+        <div class="tablet:grid-col-9 tablet:padding-left-4">
+      {% endif %}
+        {% block beforeContent %}
+          {% block backLink %}{% endblock %}
+        {% endblock %}
+        <main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
+        {% block content %}
+          {% include 'flash_messages.html' %}
+          {% block maincolumn_content %}{% endblock %}
+        {% endblock %}
+        </main>
+      </div>
+    </div>
+  </div>
+{% endblock %}

app/templates/views/manage-users.html

@@ -1,4 +1,4 @@
-{% extends "settings_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/tick-cross.html" import tick_cross %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/components/button/macro.njk" import usaButton %}
@@ -7,6 +7,12 @@
   Team members
 {% endblock %}
 
+{% block serviceNavigation %}{% endblock %}
+
+{% block sideNavigation %}
+  {% include "/new/components/settings_nav.html" %}
+{% endblock %}
+
 {% block maincolumn_content %}
 
   <div class="button-flex-header">

app/templates/views/organizations/organization/billing.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/page-header.html" import page_header %}
 
 {% block org_page_title %}

app/templates/views/organizations/organization/index.html

@@ -2,7 +2,7 @@
 {% from "components/big-number.html" import big_number %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/pill.html" import pill %}
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block org_page_title %}
   Usage

app/templates/views/organizations/organization/settings/edit-domains.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/list-entry.html" import list_entry %}

app/templates/views/organizations/organization/settings/edit-name.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}

app/templates/views/organizations/organization/settings/edit-organization-billing-details.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}

app/templates/views/organizations/organization/settings/edit-organization-notes.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}

app/templates/views/organizations/organization/settings/edit-type.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/form.html" import form_wrapper %}

app/templates/views/organizations/organization/settings/index.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/table.html" import mapping_table, optional_text_field, row, text_field, edit_field with context %}
 
 {% block org_page_title %}

app/templates/views/organizations/organization/trial-mode-services.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/live-search.html" import live_search %}
 
 {% block org_page_title %}

app/templates/views/organizations/organization/users/index.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, row, field, hidden_field_heading %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/live-search.html" import live_search %}

app/templates/views/organizations/organization/users/invite-org-user.html

@@ -1,4 +1,4 @@
-{% extends "org_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}

app/templates/views/platform-admin/_base_template.html

@@ -45,7 +45,7 @@
       {% block backLink %}{% endblock %}
         <main id="main-content" role="main">
           {% block content %}
-            {% include 'flash_messages.html' %}
+            {% include 'new/components/flash_messages.html' %}
             {% block platform_admin_content %}{% endblock %}
           {% endblock %}
         </main>

app/templates/views/service-settings.html

@@ -1,4 +1,4 @@
-{% extends "settings_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/table.html" import mapping_table, row, settings_row, text_field, optional_text_field, edit_field, field, boolean_field with context %}
 
@@ -6,6 +6,12 @@
   Settings
 {% endblock %}
 
+{% block serviceNavigation %}{% endblock %}
+
+{% block sideNavigation %}
+  {% include "/new/components/settings_nav.html" %}
+{% endblock %}
+
 {% block maincolumn_content %}
 
     <h1 class="font-body-lg">Settings</h1>

app/templates/views/user-profile.html

@@ -1,4 +1,4 @@
-{% extends "settings_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, row, field %}
 {% from "components/table.html" import mapping_table, row, text_field, optional_text_field, edit_field, field, boolean_field with context %}
 
@@ -6,6 +6,12 @@
   User profile
 {% endblock %}
 
+{% block serviceNavigation %}{% endblock %}
+
+{% block sideNavigation %}
+  {% include "/new/components/settings_nav.html" %}
+{% endblock %}
+
 {% block maincolumn_content %}
 
   <h1 class="font-body-2xl margin-bottom-3">User profile</h1>

app/templates/withnav_template.html

@@ -1,31 +1,56 @@
 {% extends "base.html" %}
 
 {% block per_page_title %}
-  {% block service_page_title %}{% endblock %} – {{ current_service.name }}
+  {% if current_org.name %}
+    {% block org_page_title %}{% endblock %} – {{ current_org.name }}
+  {% else %}
+    {% block service_page_title %}{% endblock %} – {{ current_service.name }}
+  {% endif %}
 {% endblock %}
 
 {% block main %}
   <div class="grid-container">
-    {% include "service_navigation.html" %}
+    {% block serviceNavigation %}
+      {% if current_org.name %}
+      {% else %}
+          {% include "new/components/service_nav.html" %}
+      {% endif %}
+    {% endblock %}
+    {#
+      The withnav_template can serve as a replacement for both settings_template and org_template.html.
+
+      The file service_navigation.html is included only in withnav_template. It's not used in settings_template. That is one out of the two differences between settings template and withnav template. As a result, when other templates extend settings_template, they include the serviceNavigation block but keep it empty. The settings_template.html is specifically used for these pages in the app: manage-users.html, service-settings.html, and user-profile.html.
+
+      In addition, serviceNavigation should be empty on templates that previously extended org_template. For templates that previously extended org_template.html, there's an addition of the orgNavBreadcrumb block.
+      {% block orgNavBreadcrumb %}
+        {% include "/new/components/org_nav_breadcrumb.html" %}
+      {% endblock %}
+    #}
+    {% if current_org.name %}
+      {% block orgNavBreadcrumb %}{% include "/new/components/org_nav_breadcrumb.html" %}{% endblock %}
+    {% endif %}
     <div class="grid-row margin-top-5">
-      {% if help %}
+      <div class="tablet:grid-col-3">
-        <div class="tablet:grid-col-3">
+        {% block sideNavigation %}
-      {% else %}
+          {% if current_org.name %}
-        <div class="tablet:grid-col-3">
+            {% include "/new/components/org_nav.html" %}
-      {% endif %}
+          {% else %}
-          {% include "main_nav.html" %}
+            {% include "/new/components/main_nav.html" %}
-        </div>
+          {% endif %}
-      {% if help %}
+          {#
-        <div class="grid-col-8">
+          Include settings_nav.html for child templates that previously extended settings_template.
-      {% else %}
+
-        <div class="tablet:grid-col-9 tablet:padding-left-4">
+          Include "org_nav.html" for child templates that previously extended org_template html
-      {% endif %}
+          #}
+        {% endblock %}
+      </div>
+      <div class="tablet:grid-col-9 tablet:padding-left-4">
         {% block beforeContent %}
           {% block backLink %}{% endblock %}
         {% endblock %}
         <main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
         {% block content %}
-          {% include 'flash_messages.html' %}
+          {% include 'new/components/flash_messages.html' %}
           {% block maincolumn_content %}{% endblock %}
         {% endblock %}
         </main>