feat(KUI-1274): replace client side React breadcrumbs with handlebar helper

i18n/messages.en.js

@@ -35,14 +35,6 @@ module.exports = {
     back_to_top_label: 'To page top',
   },
   bankIdAlertText: `Please note that <a href="https://www.kth.se/en/studies/freestanding-courses/applying-to-a-course-if-you-are-not-in-sweden-1.1275545" class="external-link" target="_blank" rel="noopener noreferrer">Students not located in Sweden may have problems attending a course at KTH.</a> <br/> You could meet obstacles if you're required to pay fees or if you do not have a Swedish Mobile BankID. `,
-  breadCrumbLabels: {
-    breadcrumbs: 'Breadcrumbs',
-    university: 'KTH',
-    student: 'Student at KTH',
-    directory: 'Course and programme directory',
-    aboutCourse: 'About course',
-    aboutCourseMemos: 'About course memo',
-  },
   courseLabels: {
     label_course_description: 'Introduction to course',
     label_course_information: 'Course information, including syllabus',

i18n/messages.se.js

@@ -37,14 +37,6 @@ module.exports = {
   },
   bankIdAlertText:
     'Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.',
-  breadCrumbLabels: {
-    breadcrumbs: 'Brödsmulor',
-    university: 'KTH',
-    student: 'Student på KTH',
-    directory: 'Kurs- och programkatalogen',
-    aboutCourse: 'Om kursen',
-    aboutCourseMemos: 'Om kurs-PM',
-  },
   courseLabels: {
     label_course_description: 'Introducerande beskrivning av kursen',
     label_course_information: 'Kursinformation inklusive kursplan',

public/css/kursinfo-web.scss

@@ -38,7 +38,12 @@ $red: #e01f28;
 }
 
 .container.articleNavigation {
-  padding: 15px 15px 0 !important;
+  padding: 0 15px 0 30px !important;
+
+  #breadcrumbs .breadcrumb {
+    padding-top: 15px;
+    padding-bottom: 24px;
+  }
 }
 
 @media (max-width: 991.98px) {
@@ -47,11 +52,6 @@ $red: #e01f28;
   }
 }
 
-.breadcrumb {
-  background-color: transparent;
-  padding: 0.75rem 1rem;
-}
-
 .course-header {
   margin-bottom: 16px;
 }

public/js/app/pages/CoursePage.jsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-danger */
 import React, { useEffect } from 'react'
 
-import { Row, Col, Alert, Breadcrumb, BreadcrumbItem } from 'reactstrap'
+import { Row, Col, Alert } from 'reactstrap'
 
 import i18n from '../../../../i18n'
 import { INFORM_IF_IMPORTANT_INFO_IS_MISSING, FORSKARUTB_URL, SYLLABUS_URL } from '../util/constants'
-import { breadcrumbLinks, aboutCourseLink } from '../util/links'
+import { aboutCourseLink } from '../util/links'
 
 import RoundInformationOneCol from '../components/RoundInformationOneCol'
 import CourseTitle from '../components/CourseTitle'
@@ -19,24 +19,6 @@ import BankIdAlert from '../components/BankIdAlert'
 
 const aboutCourseStr = (translate, courseCode = '') => `${translate.site_name} ${courseCode}`
 
-const Breadcrumbs = ({ translation, language, courseCode }) => (
-  <Breadcrumb lang={language} aria-label={translation.breadCrumbLabels.breadcrumbs} className="secondaryMenu">
-    <BreadcrumbItem>
-      <a href={`${breadcrumbLinks.university[language]}`}>{translation.breadCrumbLabels.university}</a>
-    </BreadcrumbItem>
-    <BreadcrumbItem>
-      <a href={`${breadcrumbLinks.student[language]}`}>{translation.breadCrumbLabels.student}</a>
-    </BreadcrumbItem>
-    <BreadcrumbItem>
-      <a href={`${breadcrumbLinks.directory[language]}`}>{translation.breadCrumbLabels.directory}</a>
-    </BreadcrumbItem>
-    <BreadcrumbItem>
-      <a
-        href={`${aboutCourseLink(courseCode, language)}`}
-      >{`${translation.breadCrumbLabels.aboutCourse} ${courseCode}`}</a>
-    </BreadcrumbItem>
-  </Breadcrumb>
-)
 function CoursePage() {
   const [context, setWebContext] = useWebContext()
   // const context = React.useMemo(() => webContext, [webContext])
@@ -129,9 +111,6 @@ function CoursePage() {
 
   return (
     <div key="kursinfo-container" className="col" id="kursinfo-main-page">
-      <Row>
-        <Breadcrumbs translation={translation} language={language} courseCode={courseCode} />
-      </Row>
       <Row id="pageContainer" key="pageContainer">
         <SideMenu courseCode={courseCode} labels={translation.courseLabels.sideMenu} language={language} />
         <main className="col" id="mainContent">

public/js/app/util/links.js

@@ -1,18 +1,8 @@
-const breadcrumbLinks = {
-  university: { en: '/en', sv: '/' },
-  student: { en: '/en/student', sv: '/student' },
-  directory: {
-    en: '/student/kurser/kurser-inom-program?l=en',
-    sv: '/student/kurser/kurser-inom-program',
-  },
-}
-
 function aboutCourseLink(courseCode, language) {
   const languageParameter = language === 'en' ? '?l=en' : ''
   return `/student/kurser/kurs/${courseCode}${languageParameter}`
 }
 
 module.exports = {
-  breadcrumbLinks,
   aboutCourseLink,
 }

server/controllers/courseCtrl.js

@@ -12,6 +12,7 @@ const browserConfig = require('../configuration').browser
 const serverConfig = require('../configuration').server
 const paths = require('../server').getPaths()
 const api = require('../api')
+const { createBreadcrumbs } = require('../utils/breadcrumbUtil')
 const { getServerSideFunctions } = require('../utils/serverSideRendering')
 const { createServerSideContext } = require('../ssr-context/createServerSideContext')
 
@@ -615,6 +616,8 @@ async function getIndex(req, res, next) {
       context: webContext,
     })
 
+    const breadcrumbsList = createBreadcrumbs(lang, courseCode)
+
     res.render('course/index', {
       compressedData,
       instrumentationKey: serverConfig?.appInsights?.instrumentationKey,
@@ -626,6 +629,7 @@ async function getIndex(req, res, next) {
           ? 'KTH kursinformation för ' + courseCode.toUpperCase()
           : 'KTH course information ' + courseCode.toUpperCase(),
       klaroAnalyticsConsentCookie,
+      breadcrumbsList,
     })
   } catch (err) {
     const excludedStatusCodes = [403, 404]

server/utils/breadcrumbUtil.js

@@ -0,0 +1,37 @@
+// Logic is based on old Breadcrumb component in kth-reactstrap: https://github.com/KTH/kth-reactstrap/blob/master/src/components/utbildningsinfo/Breadcrumbs.js
+// Be aware that this entire file is replicated in multiple apps, so changes here should probably be synced to the other apps.
+// See https://confluence.sys.kth.se/confluence/x/6wYJDQ for more information.
+const baseItems = {
+  university: {
+    en: { url: '/en', label: 'KTH' },
+    sv: { url: '/', label: 'KTH' },
+  },
+  student: {
+    en: { url: '/en/student', label: 'Student at KTH' },
+    sv: { url: '/student', label: 'Student på KTH' },
+  },
+  directory: {
+    en: { url: '/student/kurser/kurser-inom-program?l=en', label: 'Course and programme directory' },
+    sv: { url: '/student/kurser/kurser-inom-program', label: 'Kurs- och programkatalogen' },
+  },
+}
+
+function createAboutCourseItem(language, courseCode) {
+  const label = language === 'en' ? 'About course' : 'Om kursen'
+  return {
+    label: `${label} ${courseCode}`,
+    url: `/student/kurser/kurs/${courseCode.toUpperCase()}?l=${language}`,
+  }
+}
+
+function createBreadcrumbs(language, courseCode) {
+  const items = [baseItems.university[language], baseItems.student[language], baseItems.directory[language]]
+  if (courseCode) {
+    items.push(createAboutCourseItem(language, courseCode))
+  }
+  return items
+}
+
+module.exports = {
+  createBreadcrumbs,
+}

server/views/helpers/index.js

@@ -1,6 +1,7 @@
 'use strict'
 
 const registerHeaderContentHelper = require('@kth/kth-node-web-common/lib/handlebars/helpers/headerContent')
+const { registerBreadcrumbHelper } = require('@kth/kth-node-web-common/lib/handlebars/helpers/breadcrumbs')
 const log = require('@kth/log')
 const config = require('../../configuration').server
 const packageFile = require('../../../package.json')
@@ -32,6 +33,7 @@ registerHeaderContentHelper({
  * packaged helpers in https://github.com/KTH/kth-node-web-common/tree/master/lib/handlebars/helpers
  * Those only need to be required. Docs embedded in source.
  */
+registerBreadcrumbHelper()
 require('@kth/kth-node-web-common/lib/handlebars/helpers/contentedit')
 
 const i18n = require('../../../i18n')

server/views/partials/kthHeader.handlebars

@@ -34,5 +34,11 @@
   </div>
   <div id='gradientBorder'></div>
 
+  <div class='container articleNavigation'>
+    <div class='row justify-content-between'>
+      {{breadcrumbs breadcrumbsList lang}}
+    </div>
+  </div>
+
 </header>
 <!--indexOn: all-->