Project: Admin mode border styling (#3668)

Add the admin mode border styling to all project pages, except for beta projects. Beta projects always show a teal border.
zooniverse · Sep 21, 2022 · 8469d77 · 8469d77
1 parent 169fed2
commit 8469d77
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 6 deletions.
diff --git a/packages/app-project/src/hooks/useAdminMode.js b/packages/app-project/src/hooks/useAdminMode.js
@@ -5,7 +5,7 @@ const localStorage = isBrowser ? window.localStorage : null
 
 export default function useAdminMode() {
   const adminFlag = localStorage?.getItem('adminFlag')
-  const [adminState, setAdminState] = useState(adminFlag)
+  const [adminState, setAdminState] = useState(!!adminFlag)
   const adminMode = adminFlag && adminState
 
   function toggleAdmin() {

diff --git a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.js b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.js
@@ -20,6 +20,8 @@ import ProjectStatistics from '@shared/components/ProjectStatistics'
 import ZooniverseTalk from './components/ZooniverseTalk'
 import { Media } from '@shared/components/Media'
 
+export const adminBorderImage = 'repeating-linear-gradient(45deg, #000, #000 25px, #ff0 25px, #ff0 50px) 5'
+
 const FullHeightBox = styled(Box)`
   min-height: 98vh;
 `
@@ -36,8 +38,21 @@ function ProjectHomePage ({
   const router = useRouter()
   const locale = router?.locale
 
+  const adminBorder = { size: 'medium' }
+  const betaBorder = { color: 'brand', size: 'medium' }
+  const pageStyle = {}
+  if (adminMode) {
+    pageStyle.borderImage = adminBorderImage
+  }
+  let border = adminMode ? adminBorder : false
+  border = inBeta ? betaBorder : border
+
   return (
-    <Box data-testid='project-home-page' border={(inBeta) ? { color: 'brand', size: 'medium' } : false}>
+    <Box
+      data-testid='project-home-page'
+      border={border}
+      style={pageStyle}
+    >
       <Media at='default'>
         <ZooHeaderWrapper />
         <ProjectHeader adminMode={adminMode} />

diff --git a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js
@@ -7,7 +7,7 @@ import { applySnapshot } from 'mobx-state-tree'
 import { RouterContext } from 'next/dist/shared/lib/router-context'
 
 import initStore from '@stores'
-import ProjectHomePage from './ProjectHomePage.js'
+import ProjectHomePage, { adminBorderImage } from './ProjectHomePage.js'
 
 describe('Component > ProjectHomePage', function () {
   this.timeout(5000)
@@ -124,7 +124,6 @@ describe('Component > ProjectHomePage', function () {
       adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
     })
 
-    // TODO: add a border to pages in admin mode.
     it('should not have a border', function () {
       expect(homePage).to.be.ok()
       const { border } = window.getComputedStyle(homePage)
@@ -133,6 +132,51 @@ describe('Component > ProjectHomePage', function () {
 
     it('should show the admin toggle in the footer', function () {
       expect(adminToggle).to.be.ok()
+      expect(adminToggle.checked).to.be.false()
+    })
+  })
+
+  describe('in admin mode', function () {
+    before(function () {
+      const snapshot = {
+        project: {
+          configuration: {
+            languages: ['en']
+          },
+          slug: 'Foo/Bar',
+          strings: {
+            display_name: 'Foobar'
+          },
+          links: {
+            active_workflows: ['1']
+          }
+        },
+        user: {
+          id: '1',
+          admin: true,
+          login: 'zooVolunteer'
+        }
+      }
+      window.localStorage.setItem('adminFlag', true)
+      render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
+      homePage = screen.getByTestId('project-home-page')
+      const zooFooter = within(homePage).getByRole('contentinfo')
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+    })
+
+    after(function () {
+      window.localStorage.removeItem('adminFlag')
+    })
+
+    it('should have a striped border', function () {
+      expect(homePage).to.be.ok()
+      const borderImage = window.getComputedStyle(homePage)['border-image']
+      expect(borderImage).to.equal(adminBorderImage)
+    })
+
+    it('should show the admin toggle in the footer', function () {
+      expect(adminToggle).to.be.ok()
+      expect(adminToggle.checked).to.be.true()
     })
   })
 })
diff --git a/packages/app-project/src/shared/components/StandardLayout/StandardLayout.js b/packages/app-project/src/shared/components/StandardLayout/StandardLayout.js
@@ -11,6 +11,8 @@ import {
   ZooHeaderWrapper
 } from '@components'
 
+export const adminBorderImage = 'repeating-linear-gradient(45deg, #000, #000 25px, #ff0 25px, #ff0 50px) 5'
+
 function StandardLayout ({
   children,
   inBeta,
@@ -19,8 +21,17 @@ function StandardLayout ({
   const router = useRouter()
   const locale = router?.locale
 
+  const adminBorder = { size: 'medium' }
+  const betaBorder = { color: 'brand', size: 'medium' }
+  const pageStyle = {}
+  if (adminMode) {
+    pageStyle.borderImage = adminBorderImage
+  }
+  let border = adminMode ? adminBorder : false
+  border = inBeta ? betaBorder : border
+
   return (
-    <Box border={(inBeta) ? { color: 'brand', size: 'medium' } : false}>
+    <Box data-testid='project-page' border={border} style={pageStyle}>
       <ZooHeaderWrapper />
       <ProjectHeader adminMode={adminMode} />
       <Announcements />

diff --git a/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js b/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js
@@ -6,10 +6,11 @@ import { Provider } from 'mobx-react'
 import { applySnapshot } from 'mobx-state-tree'
 
 import initStore from '@stores'
-import StandardLayout from './StandardLayout.js'
+import StandardLayout, { adminBorderImage } from './StandardLayout.js'
 
 describe('Component > StandardLayout', function () {
   let adminToggle
+  let projectPage
   let zooHeader
   let zooFooter
 
@@ -90,6 +91,52 @@ describe('Component > StandardLayout', function () {
 
     it('should show the admin toggle', function () {
       expect(adminToggle).to.be.ok()
+      expect(adminToggle.checked).to.be.false()
+    })
+  })
+
+  describe('in admin mode', function () {
+    before(function () {
+      const snapshot = {
+        project: {
+          configuration: {
+            languages: ['en']
+          },
+          slug: 'Foo/Bar',
+          strings: {
+            display_name: 'Foobar'
+          },
+          links: {
+            active_workflows: ['1']
+          }
+        },
+        user: {
+          id: '1',
+          admin: true,
+          login: 'zooVolunteer'
+        }
+      }
+      window.localStorage.setItem('adminFlag', true)
+      render(<StandardLayout />, { wrapper: withStore(snapshot)})
+      projectPage = screen.getByTestId('project-page')
+      zooHeader = screen.getByRole('banner')
+      zooFooter = screen.getByRole('contentinfo')
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+    })
+
+    after(function () {
+      window.localStorage.removeItem('adminFlag')
+    })
+
+    it('should have a striped border', function () {
+      expect(projectPage).to.be.ok()
+      const borderImage = window.getComputedStyle(projectPage)['border-image']
+      expect(borderImage).to.equal(adminBorderImage)
+    })
+
+    it('should show the admin toggle in the footer', function () {
+      expect(adminToggle).to.be.ok()
+      expect(adminToggle.checked).to.be.true()
     })
   })
 })