From 898898a46fe7ad98fc2abfa117bcb3854d13aab2 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Wed, 27 Jul 2022 16:56:59 +0100
Subject: [PATCH] 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                            |  2 +-
 app/views/pages/show.html.erb                 | 10 +++++
 .../adminFlows/pages/createPage.spec.js       | 38 +++++++++++++++++++
 db/seeds.rb                                   |  2 +-
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 cypress/e2e/seededFlows/adminFlows/pages/createPage.spec.js

diff --git a/app/models/page.rb b/app/models/page.rb
index 9289f8fd3..e8004a468 100644
--- a/app/models/page.rb
+++ b/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
diff --git a/app/views/pages/show.html.erb b/app/views/pages/show.html.erb
index 8d922e3b9..52f122524 100644
--- a/app/views/pages/show.html.erb
+++ b/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>
diff --git a/cypress/e2e/seededFlows/adminFlows/pages/createPage.spec.js b/cypress/e2e/seededFlows/adminFlows/pages/createPage.spec.js
new file mode 100644
index 000000000..8ba3885b4
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/db/seeds.rb b/db/seeds.rb
index a3a6ad271..e32b2bf8d 100644
--- a/db/seeds.rb
+++ b/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