[JN-682] add tabs to site content editor (#610)

broadinstitute · Oct 30, 2023 · 912f623 · 912f623
1 parent 7255f7a
commit 912f623
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 9 deletions.
diff --git a/ui-admin/src/portal/siteContent/SiteContentEditor.test.tsx b/ui-admin/src/portal/siteContent/SiteContentEditor.test.tsx
@@ -52,3 +52,17 @@ test('readOnly hides save button', async () => {
   expect(screen.getByText('Landing page')).toBeInTheDocument()
   expect(screen.queryByText('Save')).not.toBeInTheDocument()
 })
+
+test('clicking on the Preview tab shows full page preview', async () => {
+  const siteContent = mockSiteContent()
+  const { RoutedComponent } = setupRouterTest(
+    <SiteContentEditor siteContent={siteContent} previewApi={emptyApi} readOnly={false}
+      loadSiteContent={jest.fn()} createNewVersion={jest.fn()} portalShortcode="foo"
+      switchToVersion={jest.fn()}
+      portalEnv={mockPortalEnvironment('sandbox')}/>)
+  render(RoutedComponent)
+
+  await userEvent.click(screen.getByText('Preview'))
+  expect(screen.queryByText('Insert section')).not.toBeInTheDocument()
+  expect(screen.queryByText('we are the best')).toBeInTheDocument()
+})
diff --git a/ui-admin/src/portal/siteContent/SiteContentEditor.tsx b/ui-admin/src/portal/siteContent/SiteContentEditor.tsx
@@ -1,14 +1,16 @@
 import React, { useState } from 'react'
-import { NavbarItemInternal, PortalEnvironment } from 'api/api'
+import { HtmlSection, NavbarItemInternal, PortalEnvironment } from 'api/api'
 import Select from 'react-select'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faClockRotateLeft, faImage, faPlus } from '@fortawesome/free-solid-svg-icons'
 import HtmlPageEditView from './HtmlPageEditView'
-import { HtmlPage, LocalSiteContent, ApiProvider, SiteContent, ApiContextT } from '@juniper/ui-core'
+import { HtmlPage, LocalSiteContent, ApiProvider, SiteContent, ApiContextT, HtmlSectionView } from '@juniper/ui-core'
 import { Link } from 'react-router-dom'
 import SiteContentVersionSelector from './SiteContentVersionSelector'
-import { Button } from '../../components/forms/Button'
+import { Button } from 'components/forms/Button'
 import AddPageModal from './AddPageModal'
+import ErrorBoundary from 'util/ErrorBoundary'
+import { Tab, Tabs } from 'react-bootstrap'
 
 type NavbarOption = {label: string, value: string}
 const landingPageOption = { label: 'Landing page', value: 'Landing page' }
@@ -31,6 +33,7 @@ const SiteContentEditor = (props: InitializedSiteContentViewProps) => {
     portalEnv, loadSiteContent, switchToVersion, createNewVersion, readOnly
   } = props
   const selectedLanguage = 'en'
+  const [activeTab, setActiveTab] = useState<string | null>('designer')
   const [selectedNavOpt, setSelectedNavOpt] = useState<NavbarOption>(landingPageOption)
   const [workingContent, setWorkingContent] = useState<SiteContent>(siteContent)
   const [showVersionSelector, setShowVersionSelector] = useState(false)
@@ -160,12 +163,41 @@ const SiteContentEditor = (props: InitializedSiteContentViewProps) => {
         </div>
 
       </div>
-      <div>
-        {pageToRender &&
-          <ApiProvider api={previewApi}>
-            <HtmlPageEditView htmlPage={pageToRender} readOnly={readOnly}
-              updatePage={page => updatePage(page, currentNavBarItem?.text)}/>
-          </ApiProvider>}
+      <div className="d-flex flex-column flex-grow-1 mt-2">
+        <Tabs
+          activeKey={activeTab ?? undefined}
+          className="mb-1"
+          mountOnEnter
+          unmountOnExit
+          onSelect={setActiveTab}
+        >
+          <Tab
+            eventKey="designer"
+            title="Designer"
+          >
+            <ErrorBoundary>
+              <div>
+                {pageToRender &&
+                    <ApiProvider api={previewApi}>
+                      <HtmlPageEditView htmlPage={pageToRender} readOnly={readOnly}
+                        updatePage={page => updatePage(page, currentNavBarItem?.text)}/>
+                    </ApiProvider>}
+              </div>
+            </ErrorBoundary>
+          </Tab>
+          <Tab
+            eventKey="preview"
+            title="Preview"
+          >
+            <ErrorBoundary>
+              <ApiProvider api={previewApi}>
+                { pageToRender.sections.map((section: HtmlSection) =>
+                  <HtmlSectionView section={section} key={section.id}/>)
+                }
+              </ApiProvider>
+            </ErrorBoundary>
+          </Tab>
+        </Tabs>
       </div>
     </div>
     { showVersionSelector &&