Merge pull request #28497 from overleaf/mj-system-editor-theme-dark-light-split

[web] Split editor theme into two when using system overall theme

GitOrigin-RevId: 1efa5553fdff8a17de634017882feb2ede614cd6

services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx

@@ -5,6 +5,8 @@ import SettingsEditorTheme from '../../../../../../frontend/js/features/editor-l
 import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
+const MOCK_IEEE_BRAND_ID = 123
+
 describe('<SettingsEditorTheme />', function () {
   const editorThemes = [
     { name: 'editortheme-1', dark: false },
@@ -21,23 +23,18 @@ describe('<SettingsEditorTheme />', function () {
   beforeEach(function () {
     window.metaAttributesCache.set('ol-editorThemes', editorThemes)
     window.metaAttributesCache.set('ol-legacyEditorThemes', legacyEditorThemes)
+    window.metaAttributesCache.set('ol-brandVariation', {
+      brand_id: undefined,
+    })
+    window.metaAttributesCache.get('ol-ExposedSettings').ieeeBrandId =
+      MOCK_IEEE_BRAND_ID
   })
 
   afterEach(function () {
     fetchMock.removeRoutes().clearHistory()
   })
 
-  it('shows correct menu', async function () {
-    render(
-      <EditorProviders>
-        <EditorLeftMenuProvider>
-          <SettingsEditorTheme />
-        </EditorLeftMenuProvider>
-      </EditorProviders>
-    )
-
-    const select = screen.getByLabelText('Editor theme')
-
+  function checkSelect(select: HTMLElement) {
     for (const theme of editorThemes) {
       const option = within(select).getByText(theme.name.replace(/_/g, ' '))
       expect(option.getAttribute('value')).to.equal(theme.name)
@@ -49,5 +46,67 @@ describe('<SettingsEditorTheme />', function () {
       )
       expect(option.getAttribute('value')).to.equal(theme.name)
     }
+  }
+
+  describe('with default theme', function () {
+    beforeEach(function () {
+      render(
+        <EditorProviders userSettings={{ overallTheme: '' }}>
+          <EditorLeftMenuProvider>
+            <SettingsEditorTheme />
+          </EditorLeftMenuProvider>
+        </EditorProviders>
+      )
+    })
+
+    it('shows correct menu', async function () {
+      const select = screen.getByLabelText('Editor theme')
+      expect(select).to.exist
+      checkSelect(select)
+    })
+  })
+
+  describe('with system theme', function () {
+    beforeEach(function () {
+      render(
+        <EditorProviders userSettings={{ overallTheme: 'system' }}>
+          <EditorLeftMenuProvider>
+            <SettingsEditorTheme />
+          </EditorLeftMenuProvider>
+        </EditorProviders>
+      )
+    })
+
+    it('shows correct menu', async function () {
+      const select = screen.queryByLabelText('Editor theme')
+      expect(select).to.not.exist
+      const lightSelect = screen.getByLabelText('Light editor theme')
+      expect(lightSelect).to.exist
+      checkSelect(lightSelect)
+      const darkSelect = screen.getByLabelText('Dark editor theme')
+      expect(darkSelect).to.exist
+      checkSelect(darkSelect)
+    })
+  })
+
+  describe('with IEEE branding', function () {
+    beforeEach(function () {
+      window.metaAttributesCache.set('ol-brandVariation', {
+        brand_id: MOCK_IEEE_BRAND_ID,
+      })
+      render(
+        <EditorProviders userSettings={{ overallTheme: 'system' }}>
+          <EditorLeftMenuProvider>
+            <SettingsEditorTheme />
+          </EditorLeftMenuProvider>
+        </EditorProviders>
+      )
+    })
+
+    it('ignores the system theme and shows single selection', async function () {
+      const select = screen.getByLabelText('Editor theme')
+      expect(select).to.exist
+      checkSelect(select)
+    })
   })
 })

services/web/test/frontend/features/settings-modal/settings/editor-theme-setting.test.tsx

@@ -6,6 +6,8 @@ import { EditorProviders } from '../../../helpers/editor-providers'
 import EditorThemeSetting from '@/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting'
 import userEvent from '@testing-library/user-event'
 
+const MOCK_IEEE_BRAND_ID = 123
+
 describe('<EditorThemeSetting />', function () {
   const editorThemes = [
     { name: 'editortheme-1', dark: false },
@@ -21,21 +23,18 @@ describe('<EditorThemeSetting />', function () {
   beforeEach(function () {
     window.metaAttributesCache.set('ol-editorThemes', editorThemes)
     window.metaAttributesCache.set('ol-legacyEditorThemes', legacyEditorThemes)
+    window.metaAttributesCache.set('ol-brandVariation', {
+      brand_id: undefined,
+    })
+    window.metaAttributesCache.get('ol-ExposedSettings').ieeeBrandId =
+      MOCK_IEEE_BRAND_ID
   })
 
   afterEach(function () {
     fetchMock.removeRoutes().clearHistory()
   })
 
-  it('each option is shown and can be selected', async function () {
-    render(
-      <EditorProviders>
-        <SettingsModalProvider>
-          <EditorThemeSetting />
-        </SettingsModalProvider>
-      </EditorProviders>
-    )
-
+  async function checkSelect(select: HTMLElement, settingName: string) {
     const saveSettingsMock = fetchMock.post(
       `express:/user/settings`,
       {
@@ -43,16 +42,13 @@ describe('<EditorThemeSetting />', function () {
       },
       { delay: 0 }
     )
-
-    const select = screen.getByLabelText('Editor theme')
-
     for (const theme of editorThemes) {
       const option = within(select).getByText(theme.name.replace(/_/g, ' '))
       expect(option.getAttribute('value')).to.equal(theme.name)
       await userEvent.selectOptions(select, [option])
       expect(
         saveSettingsMock.callHistory.called(`/user/settings`, {
-          body: { editorTheme: theme.name },
+          body: { [settingName]: theme.name },
         })
       ).to.be.true
     }
@@ -65,9 +61,71 @@ describe('<EditorThemeSetting />', function () {
       await userEvent.selectOptions(select, [option])
       expect(
         saveSettingsMock.callHistory.called(`/user/settings`, {
-          body: { editorTheme: theme.name },
+          body: { [settingName]: theme.name },
         })
       ).to.be.true
     }
+  }
+
+  describe('with default theme', function () {
+    beforeEach(function () {
+      render(
+        <EditorProviders userSettings={{ overallTheme: '' }}>
+          <SettingsModalProvider>
+            <EditorThemeSetting />
+          </SettingsModalProvider>
+        </EditorProviders>
+      )
+    })
+
+    it('each option is shown and can be selected', async function () {
+      const select = screen.getByLabelText('Editor theme')
+      expect(select).to.exist
+      await checkSelect(select, 'editorTheme')
+    })
+  })
+
+  describe('with system theme', function () {
+    beforeEach(function () {
+      render(
+        <EditorProviders userSettings={{ overallTheme: 'system' }}>
+          <SettingsModalProvider>
+            <EditorThemeSetting />
+          </SettingsModalProvider>
+        </EditorProviders>
+      )
+    })
+
+    it('splits the setting into two', async function () {
+      const select = screen.queryByLabelText('Editor theme')
+      expect(select).to.not.exist
+      const lightModeSelect = screen.getByLabelText('Light editor theme')
+      expect(lightModeSelect).to.exist
+      await checkSelect(lightModeSelect, 'editorLightTheme')
+      const darkModeSelect = screen.getByLabelText('Dark editor theme')
+      expect(darkModeSelect).to.exist
+      await checkSelect(darkModeSelect, 'editorDarkTheme')
+    })
+  })
+
+  describe('with IEEE branding', function () {
+    beforeEach(function () {
+      window.metaAttributesCache.set('ol-brandVariation', {
+        brand_id: MOCK_IEEE_BRAND_ID,
+      })
+      render(
+        <EditorProviders userSettings={{ overallTheme: 'system' }}>
+          <SettingsModalProvider>
+            <EditorThemeSetting />
+          </SettingsModalProvider>
+        </EditorProviders>
+      )
+    })
+
+    it('ignores the system theme and shows single selection', async function () {
+      const select = screen.getByLabelText('Editor theme')
+      expect(select).to.exist
+      await checkSelect(select, 'editorTheme')
+    })
   })
 })

services/web/test/frontend/shared/hooks/use-active-editor-theme.spec.tsx

@@ -0,0 +1,78 @@
+import { useActiveEditorTheme } from '@/shared/hooks/use-active-editor-theme'
+import { EditorProviders } from '../../helpers/editor-providers'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+
+const MOCK_IEEE_BRAND_ID = 123
+
+const TestComponent = ({ overallTheme }: { overallTheme: string }) => {
+  return (
+    <SplitTestProvider>
+      <EditorProviders
+        userSettings={{
+          overallTheme,
+          editorTheme: 'default-theme',
+          editorLightTheme: 'light-theme',
+          editorDarkTheme: 'dark-theme',
+        }}
+      >
+        <TestComponentInner />
+      </EditorProviders>
+    </SplitTestProvider>
+  )
+}
+
+const TestComponentInner = () => {
+  const editorTheme = useActiveEditorTheme()
+  return <div data-testid="editor-theme">{editorTheme}</div>
+}
+
+describe('useActiveEditorTheme', function () {
+  describe('when overall theme is specific mode', function () {
+    it('Uses editorTheme when in dark mode', function () {
+      cy.mount(<TestComponent overallTheme="" />)
+      cy.findByTestId('editor-theme').should('have.text', 'default-theme')
+    })
+
+    it('Uses editorTheme when in light mode', function () {
+      cy.mount(<TestComponent overallTheme="light-" />)
+      cy.findByTestId('editor-theme').should('have.text', 'default-theme')
+    })
+  })
+
+  describe('when overall theme is system', function () {
+    function stubMediaQuery(prefersDark: boolean, isIEEE = false) {
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-brandVariation', {
+          brand_id: isIEEE ? MOCK_IEEE_BRAND_ID : undefined,
+        })
+        win.metaAttributesCache.get('ol-ExposedSettings').ieeeBrandId =
+          MOCK_IEEE_BRAND_ID
+        cy.stub(win, 'matchMedia')
+          .withArgs('(prefers-color-scheme: dark)')
+          .returns({
+            matches: prefersDark,
+            addEventListener: () => {},
+            removeEventListener: () => {},
+          } as any)
+      })
+    }
+
+    it('uses editorDarkTheme when in dark mode', function () {
+      stubMediaQuery(true)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('editor-theme').should('have.text', 'dark-theme')
+    })
+
+    it('uses editorLightTheme when in light mode', function () {
+      stubMediaQuery(false)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('editor-theme').should('have.text', 'light-theme')
+    })
+
+    it('uses editorTheme when in IEEE document', function () {
+      stubMediaQuery(false, true)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('editor-theme').should('have.text', 'default-theme')
+    })
+  })
+})

services/web/test/frontend/shared/hooks/use-active-overall-theme.spec.tsx

@@ -0,0 +1,81 @@
+import { EditorProviders } from '../../helpers/editor-providers'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
+
+const MOCK_IEEE_BRAND_ID = 123
+
+const TestComponent = ({ overallTheme }: { overallTheme: string }) => {
+  return (
+    <SplitTestProvider>
+      <EditorProviders
+        userSettings={{
+          overallTheme,
+        }}
+      >
+        <TestComponentInner />
+      </EditorProviders>
+    </SplitTestProvider>
+  )
+}
+
+const TestComponentInner = () => {
+  const overallTheme = useActiveOverallTheme()
+  return <div data-testid="overall-theme">{overallTheme}</div>
+}
+
+describe('useActiveOverallTheme', function () {
+  beforeEach(function () {
+    cy.window().then(win => {
+      win.metaAttributesCache.set('ol-brandVariation', { brand_id: undefined })
+      win.metaAttributesCache.get('ol-ExposedSettings').ieeeBrandId =
+        MOCK_IEEE_BRAND_ID
+    })
+  })
+
+  it('Is dark in default mode', function () {
+    cy.mount(<TestComponent overallTheme="" />)
+    cy.findByTestId('overall-theme').should('have.text', 'dark')
+  })
+
+  it('Is light when in light mode', function () {
+    cy.mount(<TestComponent overallTheme="light-" />)
+    cy.findByTestId('overall-theme').should('have.text', 'light')
+  })
+
+  describe('when overall theme is system', function () {
+    function stubMediaQuery(prefersDark: boolean) {
+      cy.window().then(win => {
+        cy.stub(win, 'matchMedia')
+          .withArgs('(prefers-color-scheme: dark)')
+          .returns({
+            matches: prefersDark,
+            addEventListener: () => {},
+            removeEventListener: () => {},
+          } as any)
+      })
+    }
+
+    it('is dark when browser prefers dark', function () {
+      stubMediaQuery(true)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('overall-theme').should('have.text', 'dark')
+    })
+
+    it('is light when browser prefers light', function () {
+      stubMediaQuery(false)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('overall-theme').should('have.text', 'light')
+    })
+
+    it('uses dark when in IEEE document', function () {
+      stubMediaQuery(false)
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-brandVariation', {
+          brand_id: MOCK_IEEE_BRAND_ID,
+        })
+      })
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('overall-theme').should('have.text', 'dark')
+    })
+  })
+})