Issue(KUI-1383): update heading visibility logic to match admin tool preview

i18n/messages.se.js

@@ -127,7 +127,7 @@ module.exports = {
     },
   },
   sourceInfo: {
-    noInfoYet: 'Ingen information tillagd.',
+    noInfoYet: 'Ingen information tillagd',
     insertedSubSection: 'Avsnittet nedan kommer inte från kursplanen:',
   },
   sectionsLabels: {

public/js/app/components/AllSections.jsx

@@ -3,8 +3,7 @@ import Alert from '../components-shared/Alert'
 
 import i18n from '../../../../i18n'
 import { context, sections } from '../util/fieldsByType'
-import { EMPTY } from '../util/constants'
-import { getAllSectionsAndHeadingsToShow, headingAllowedToBeShownEvenIfNoContent } from '../util/AllSectionsUtils'
+import { getAllSectionsAndHeadingsToShow } from '../util/allSectionsUtils'
 
 import Section from './Section'
 import ContentFromNewSectionEditor from './ContentFromNewSectionEditor'
@@ -14,31 +13,39 @@ function AllSections({ memoData, memoLanguageIndex }) {
     return <Alert color="info">{i18n.messages[memoLanguageIndex].messages.noPublishedMemo}</Alert>
   }
   const { sectionsLabels } = i18n.messages[memoLanguageIndex]
+  const { noInfoYet } = i18n.messages[memoLanguageIndex].sourceInfo
 
   const sectionsAndContent = getAllSectionsAndHeadingsToShow({ sections, context, memoData })
 
-  return sectionsAndContent.map(({ id, headings, hasHeadingOrExtraHeading, extraHeaderTitle }) => {
-    if (!hasHeadingOrExtraHeading) {
-      return <EmptySection key={id} id={id} sectionsLabels={sectionsLabels} memoLanguageIndex={memoLanguageIndex} />
+  return sectionsAndContent.map(({ id, standardHeadingIds, extraHeaderTitle, extraHeadingIndices, isEmptySection }) => {
+    if (isEmptySection) {
+      return <EmptySection key={id} id={id} sectionsLabels={sectionsLabels} noInfoYet={noInfoYet} />
     }
 
     return (
       <SectionWrapper key={id} id={id} sectionsLabels={sectionsLabels}>
-        <Sections headings={headings} id={id} memoData={memoData} memoLanguageIndex={memoLanguageIndex} />
-
-        <ExtraHeaders extraHeaderTitle={extraHeaderTitle} memoData={memoData} />
+        <Sections headings={standardHeadingIds} id={id} memoData={memoData} memoLanguageIndex={memoLanguageIndex} />
+
+        <ExtraHeaders
+          headingIndices={extraHeadingIndices}
+          extraHeaderTitle={extraHeaderTitle}
+          memoData={memoData}
+          memoLanguageIndex={memoLanguageIndex}
+        />
       </SectionWrapper>
     )
   })
 }
 
 export default AllSections
 
-const EmptySection = ({ id, sectionsLabels, memoLanguageIndex }) => (
+const EmptySection = ({ id, sectionsLabels, noInfoYet }) => (
   <SectionWrapper id={id} sectionsLabels={sectionsLabels}>
-    <p>
-      <i>{EMPTY[memoLanguageIndex]}</i>
-    </p>
+    <article>
+      <p>
+        <i>{noInfoYet}</i>
+      </p>
+    </article>
   </SectionWrapper>
 )
 
@@ -51,41 +58,33 @@ const SectionWrapper = ({ id, sectionsLabels, children }) => (
   </section>
 )
 
-const Sections = ({ headings, id, memoData, memoLanguageIndex }) =>
-  headings.map(contentId => {
+const Sections = ({ headings, id, memoData, memoLanguageIndex }) => {
+  return headings.map(contentId => {
     const menuId = id + '-' + contentId
-
-    const { isRequired, type } = context[contentId]
-    let contentHtml = memoData[contentId]
-
-    if (headingAllowedToBeShownEvenIfNoContent(isRequired, type) && !contentHtml) {
-      contentHtml = EMPTY[memoLanguageIndex]
-    }
+    const htmlContent = memoData[contentId]
 
     return (
       <Section
         memoLangIndex={memoLanguageIndex}
         contentId={contentId}
         menuId={menuId}
         key={contentId}
-        visibleInMemo={true}
-        html={contentHtml}
+        htmlContent={htmlContent}
       />
     )
   })
+}
 
-const ExtraHeaders = ({ extraHeaderTitle, memoData }) => {
-  if (!extraHeaderTitle) {
-    return null
-  }
-
-  return memoData[extraHeaderTitle].map(({ title, htmlContent, visibleInMemo, isEmptyNew, uKey }) => (
-    <ContentFromNewSectionEditor
-      key={uKey}
-      title={title}
-      htmlContent={htmlContent}
-      isEmptyNew={isEmptyNew}
-      visibleInMemo={visibleInMemo}
-    />
-  ))
+const ExtraHeaders = ({ headingIndices, extraHeaderTitle, memoData, memoLanguageIndex }) => {
+  return headingIndices.map(index => {
+    const { uKey, title, htmlContent } = memoData[extraHeaderTitle]?.[index]
+    return (
+      <ContentFromNewSectionEditor
+        key={uKey}
+        title={title}
+        htmlContent={htmlContent}
+        memoLanguageIndex={memoLanguageIndex}
+      />
+    )
+  })
 }

public/js/app/components/ContentFromNewSectionEditor.jsx

@@ -1,32 +1,15 @@
 import React from 'react'
 import i18n from '../../../../i18n'
-import { useWebContext } from '../context/WebContext'
 import { ExtraHeaderHead } from './ContentHead'
 import HtmlWrapper from './HtmlWrapper'
 
-function ContentFromNewSectionEditor({ htmlContent = '', title = '', isEmptyNew = false, visibleInMemo }) {
-  const [webContext] = useWebContext()
-  const { userLanguageIndex = 1 } = webContext
-
-  const { sourceInfo } = i18n.messages[userLanguageIndex]
+function ContentFromNewSectionEditor({ htmlContent = '', title = '', memoLanguageIndex = 0 /* en */ }) {
+  const { noInfoYet } = i18n.messages[memoLanguageIndex].sourceInfo
 
   return (
     <article aria-label={title}>
-      {!isEmptyNew && <ExtraHeaderHead header={title} />}
-
-      {!isEmptyNew &&
-        /* is included in memo, preview text without editor */
-        ((visibleInMemo && (
-          <HtmlWrapper html={(htmlContent !== '' && htmlContent) || `<p><i>${sourceInfo.noInfoYet}</i></p>`} />
-        )) ||
-          /* editor has content but is not yet included in pm */
-          (htmlContent !== '' && (
-            <span>
-              <p>
-                <i>{sourceInfo.noInfoYet}</i>
-              </p>
-            </span>
-          )))}
+      <ExtraHeaderHead header={title} />
+      <HtmlWrapper html={htmlContent || `<p><i>${noInfoYet}</i></p>`} />
     </article>
   )
 }

public/js/app/components/Section.jsx

@@ -4,7 +4,7 @@ import { context } from '../util/fieldsByType'
 import { ContentHead, SubSectionHeaderMessage } from './ContentHead'
 import HtmlWrapper from './HtmlWrapper'
 
-const Section = ({ contentId, menuId, visibleInMemo, html, memoLangIndex = 0 /* en */ }) => {
+const Section = ({ contentId, menuId, htmlContent, memoLangIndex = 0 /* en */ }) => {
   const { noInfoYet, insertedSubSection } = i18n.messages[memoLangIndex].sourceInfo
   const fromSyllabus = {
     is: context[contentId].source === '(s)',
@@ -18,7 +18,7 @@ const Section = ({ contentId, menuId, visibleInMemo, html, memoLangIndex = 0 /*
       ) : (
         <ContentHead contentId={contentId} memoLangIndex={memoLangIndex} fromSyllabus={fromSyllabus} />
       )}
-      {visibleInMemo && <HtmlWrapper mode="inline" html={html || `<p><i>${noInfoYet}</i></p>`} />}
+      <HtmlWrapper mode="inline" html={htmlContent || `<p><i>${noInfoYet}</i></p>`} />
     </article>
   )
 }

public/js/app/pages/__tests__/__snapshots__/CourseMemo.test.js.snap

@@ -351,7 +351,11 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
                 </sup>
               </h3>
               <span>
-                Ingen information tillagd
+                <p>
+                  <i>
+                    Ingen information tillagd
+                  </i>
+                </p>
               </span>
             </article>
             <article
@@ -380,7 +384,11 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
                 </sup>
               </h3>
               <span>
-                Ingen information tillagd
+                <p>
+                  <i>
+                    Ingen information tillagd
+                  </i>
+                </p>
               </span>
             </article>
           </section>
@@ -403,7 +411,11 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
                 Kurslitteratur
               </h3>
               <span>
-                Ingen information tillagd
+                <p>
+                  <i>
+                    Ingen information tillagd
+                  </i>
+                </p>
               </span>
             </article>
             <article
@@ -416,7 +428,11 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
                 Stöd för studenter med funktionsnedsättning
               </h3>
               <span>
-                Ingen information tillagd
+                <p>
+                  <i>
+                    Ingen information tillagd
+                  </i>
+                </p>
               </span>
             </article>
           </section>
@@ -455,7 +471,11 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
                 </sup>
               </h3>
               <span>
-                Ingen information tillagd
+                <p>
+                  <i>
+                    Ingen information tillagd
+                  </i>
+                </p>
               </span>
             </article>
             <article
@@ -484,7 +504,11 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
                 </sup>
               </h3>
               <span>
-                Ingen information tillagd
+                <p>
+                  <i>
+                    Ingen information tillagd
+                  </i>
+                </p>
               </span>
             </article>
             <article
@@ -513,7 +537,11 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
                 </sup>
               </h3>
               <span>
-                Ingen information tillagd
+                <p>
+                  <i>
+                    Ingen information tillagd
+                  </i>
+                </p>
               </span>
             </article>
           </section>
@@ -526,11 +554,13 @@ exports[`Page CourseMemo renders a side menu and a page structure 1`] = `
             >
               Ytterligare Information
             </h2>
-            <p>
-              <i>
-                Ingen information tillagd
-              </i>
-            </p>
+            <article>
+              <p>
+                <i>
+                  Ingen information tillagd
+                </i>
+              </p>
+            </article>
           </section>
           <section
             aria-labelledby="print-memo-contacts"