Add a new template to custom pages (#18212)

* add nav bar included page template

* add a test, add random seeds with new template

app/models/page.rb

@@ -1,5 +1,5 @@
 class Page < ApplicationRecord
-  TEMPLATE_OPTIONS = %w[contained full_within_layout json].freeze
+  TEMPLATE_OPTIONS = %w[contained full_within_layout nav_bar_included json].freeze
 
   TERMS_SLUG = "terms".freeze
   CODE_OF_CONDUCT_SLUG = "code-of-conduct".freeze

app/views/pages/show.html.erb

@@ -24,6 +24,16 @@
       <div class="crayons-card text-styles text-padding">
         <h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0"><%= @page.title %></h1>
 
+        <%= @page.processed_html.html_safe %>
+      </div>
+    </div>
+  <% elsif @page.template == "nav_bar_included" %>
+    <div class="crayons-layout crayons-layout--2-cols">
+      <div class="hidden m:block">
+        <%= render "articles/sidebar" %>
+      </div>
+      <div class="crayons-card text-styles text-padding">
+        <h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0"><%= @page.title %></h1>
         <%= @page.processed_html.html_safe %>
       </div>
     </div>

cypress/e2e/seededFlows/adminFlows/pages/createPage.spec.js

@@ -0,0 +1,38 @@
+describe('Create a new page from the admin portal', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/adminUser.json').as('user');
+    cy.get('@user').then((user) => {
+      cy.loginAndVisit(user, '/admin/customization/pages');
+    });
+  });
+
+  it('Creates a page with the nav_bar_included template', () => {
+    cy.findByRole('link', { name: 'New page' }).click();
+
+    cy.findByRole('textbox', { name: 'Title' }).type('New page with nav bar');
+    cy.findByRole('textbox', { name: 'Slug' }).type('test-nav-bar');
+    cy.findByRole('textbox', { name: 'Description' }).type('Testing');
+
+    cy.findByRole('combobox', {
+      name: "Template Determines the way page's body will be embedded in the layout",
+    }).select('nav_bar_included');
+
+    cy.findByRole('textbox', { name: 'Body markdown' }).type('## Hello world');
+    cy.findByRole('button', { name: 'Create Page' }).click();
+
+    cy.findByText('Page has been successfully created.').should('exist');
+    cy.findByRole('link', { name: 'New page with nav bar' }).click();
+
+    // Check nav bar elements are displayed alongside the entered body markdown
+    cy.findByRole('link', { name: 'Nav link 0' });
+    cy.findByRole('link', { name: 'Reading List' });
+    cy.findByRole('heading', { name: 'Hello world', level: 2 });
+
+    // Check that the nav bar collapses in mobile screen size
+    cy.viewport('iphone-x');
+    cy.findByRole('link', { name: 'Nav link 0' }).should('not.exist');
+    cy.findAllByRole('button', { name: 'Navigation menu' }).first().click();
+    cy.findByRole('link', { name: 'Nav link 0' }).should('exist');
+  });
+});

db/seeds.rb

@@ -569,7 +569,7 @@ seeder.create_if_none(Page) do
       body_markdown: Faker::Markdown.random,
       slug: Faker::Internet.slug,
       description: Faker::Books::Dune.quote,
-      template: %w[contained full_within_layout].sample,
+      template: %w[contained full_within_layout nav_bar_included].sample,
     )
   end
 end