Remove ThemeProps and add new theme state logic (#47864)

## Before

Before this PR we had theme state on the top level in the Layout.tsx, we
had a hook that provided an object with public API for theme (to read or
to set a new value), there were at least two problems
- Complex implementation of useThemeProps (rxjs to listen browser theme,
mixed with logic around setting theme CSS classes)
- Prop drilling, after we created these theme API on the top level, it
was distributed via props

I think I don't need to dive deep in why prop drilling is a bad
practice, but still, with prop drilling and nested components, we were
updating the whole react tree when theme was changed, also passing these
public Theme props required extending your component props with special
type `ThemeProps` and this becomes a mess quickly if you extend
something else (like one component props extended other component props)

## Now

In this PR, we use more standard ways for global state distirubiotion -
Context. In the new `useTheme` hook, we don't do any effects with CSS
classes (consumer on the top level should handle it), so it's safe to
call useTheme on any UI level. Privosly it wasn't safe, and because of
this, we had this problem
https://github.com/sourcegraph/sourcegraph/issues/47501

## Further steps

Ideally we shouldn't have any JS logic about theme besides CSS classes
set on the document element. And all colors should work through CSS
variables *custom-properties, but at the moment, we have at least two
major places where we have to have JS check about theme.
- Brand logo (since we use svg as image, in img src attribute), we
should change URL based on theme (in dark theme brand logo has
difference color value). I'm wondering that we can probably change it
and use svg directly without img tag)
- Monaco editor doesn't support colors through CSS variables, and we
change set of colors in js runtime based on theme value. I don't know
maybe with CodeMirror, we could use just CSS variables and remove this
logic

Author: vovakulikov

client/branded/src/components/panel/TabbedPanelContent.fixtures.ts

@@ -25,7 +25,6 @@ export const panels: Panel[] = [
 export const panelProps: React.ComponentPropsWithoutRef<typeof TabbedPanelContent> = {
     repoName: 'git://github.com/foo/bar',
     fetchHighlightedFileLineRanges: () => of([]),
-    isLightTheme: true,
     platformContext: {} as any,
     settingsCascade: { subjects: null, final: null },
     telemetryService: NOOP_TELEMETRY_SERVICE,

client/branded/src/components/panel/TabbedPanelContent.tsx

@@ -10,7 +10,6 @@ import { FetchFileParameters } from '@sourcegraph/shared/src/backend/file'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     Button,
     useObservable,
@@ -29,7 +28,7 @@ import { EmptyPanelView } from './views/EmptyPanelView'
 
 import styles from './TabbedPanelContent.module.scss'
 
-interface TabbedPanelContentProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps, ThemeProps {
+interface TabbedPanelContentProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps {
     repoName?: string
     fetchHighlightedFileLineRanges: (parameters: FetchFileParameters, force?: boolean) => Observable<string[][]>
 }

client/branded/src/search-ui/input/CodeMirrorQueryInput.tsx

@@ -28,7 +28,7 @@ import { Filter } from '@sourcegraph/shared/src/search/query/token'
 import { appendContextFilter } from '@sourcegraph/shared/src/search/query/transformer'
 import { fetchStreamSuggestions as defaultFetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
 import { RecentSearch } from '@sourcegraph/shared/src/settings/temporary/recentSearches'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { isInputElement } from '@sourcegraph/shared/src/util/dom'
 
 import { createDefaultSuggestions, singleLine } from './codemirror'
@@ -93,7 +93,6 @@ export const CodeMirrorMonacoFacade: React.FunctionComponent<CodeMirrorQueryInpu
     globbing,
     onEditorCreated,
     interpretComments,
-    isLightTheme,
     className,
     preventNewLine = true,
     placeholder,
@@ -296,7 +295,6 @@ export const CodeMirrorMonacoFacade: React.FunctionComponent<CodeMirrorQueryInpu
     return (
         <>
             <CodeMirrorQueryInput
-                isLightTheme={isLightTheme}
                 onEditorCreated={editorCreated}
                 patternType={patternType}
                 interpretComments={interpretComments}
@@ -313,7 +311,7 @@ export const CodeMirrorMonacoFacade: React.FunctionComponent<CodeMirrorQueryInpu
 
 const EMPTY: any[] = []
 
-interface CodeMirrorQueryInputProps extends ThemeProps, SearchPatternTypeProps {
+interface CodeMirrorQueryInputProps extends SearchPatternTypeProps {
     value: string
     onEditorCreated?: (editor: EditorView) => void
     // Whether comments are parsed and highlighted
@@ -327,12 +325,14 @@ interface CodeMirrorQueryInputProps extends ThemeProps, SearchPatternTypeProps {
  * theming, syntax highlighting and token info.
  */
 export const CodeMirrorQueryInput: React.FunctionComponent<CodeMirrorQueryInputProps> = React.memo(
-    ({ isLightTheme, onEditorCreated, patternType, interpretComments, value, className, extensions = EMPTY }) => {
+    ({ onEditorCreated, patternType, interpretComments, value, className, extensions = EMPTY }) => {
         // This is using state instead of a ref because `useRef` doesn't cause a
         // re-render when the ref is attached, but we need that so that
         // `useCodeMirror` is called again and the editor is actually created.
         // See https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
         const [container, setContainer] = useState<HTMLDivElement | null>(null)
+        const isLightTheme = useIsLightTheme()
+
         const externalExtensions = useMemo(() => new Compartment(), [])
         const themeExtension = useMemo(() => new Compartment(), [])
 

client/branded/src/search-ui/input/QueryInput.ts

@@ -5,16 +5,14 @@ import {
     SearchPatternTypeProps,
 } from '@sourcegraph/shared/src/search'
 import { fetchStreamSuggestions as defaultFetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { IEditor } from './LazyQueryInput'
 
 /**
  * Props that the Monaco and CodeMirror implementation have in common.
  */
 export interface QueryInputProps
-    extends ThemeProps,
-        Pick<CaseSensitivityProps, 'caseSensitive'>,
+    extends Pick<CaseSensitivityProps, 'caseSensitive'>,
         SearchPatternTypeProps,
         Pick<SearchContextProps, 'selectedSearchContextSpec'> {
     isSourcegraphDotCom: boolean // Needed for query suggestions to give different options on dotcom; see SOURCEGRAPH_DOT_COM_REPO_COMPLETION

client/branded/src/search-ui/input/SearchBox.story.tsx

@@ -28,7 +28,6 @@ const defaultProps: SearchBoxProps = {
         final: null,
         subjects: null,
     },
-    isLightTheme: false,
     globbing: false,
     queryState: { query: 'hello repo:test' },
     isSourcegraphDotCom: false,
@@ -57,48 +56,34 @@ export const SearchBoxStory: Story = () => (
             <div>
                 <H2>Default</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox {...defaultProps} isLightTheme={props.isLightTheme} />
+                    <SearchBox {...defaultProps} />
                 </div>
 
                 <H2>Regexp enabled</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox
-                        {...defaultProps}
-                        patternType={SearchPatternType.regexp}
-                        isLightTheme={props.isLightTheme}
-                    />
+                    <SearchBox {...defaultProps} patternType={SearchPatternType.regexp} />
                 </div>
 
                 <H2>Structural enabled</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox
-                        {...defaultProps}
-                        patternType={SearchPatternType.structural}
-                        isLightTheme={props.isLightTheme}
-                    />
+                    <SearchBox {...defaultProps} patternType={SearchPatternType.structural} />
                 </div>
 
                 <H2>Case sensitivity enabled</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox {...defaultProps} caseSensitive={true} isLightTheme={props.isLightTheme} />
+                    <SearchBox {...defaultProps} caseSensitive={true} />
                 </div>
 
                 <H2>With search contexts</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox
-                        {...defaultProps}
-                        showSearchContext={true}
-                        isLightTheme={props.isLightTheme}
-                        selectedSearchContextSpec="global"
-                    />
+                    <SearchBox {...defaultProps} showSearchContext={true} selectedSearchContextSpec="global" />
                 </div>
 
                 <H2>With search contexts, user context selected</H2>
                 <div className="w-100 d-flex my-2">
                     <SearchBox
                         {...defaultProps}
                         showSearchContext={true}
-                        isLightTheme={props.isLightTheme}
                         selectedSearchContextSpec="@username/test-version-1.5"
                     />
                 </div>
@@ -108,7 +93,6 @@ export const SearchBoxStory: Story = () => (
                     <SearchBox
                         {...defaultProps}
                         showSearchContext={true}
-                        isLightTheme={props.isLightTheme}
                         queryState={{ query: 'hello context:global' }}
                         selectedSearchContextSpec="@username"
                     />

client/branded/src/search-ui/input/SearchBox.tsx

@@ -11,7 +11,6 @@ import { fetchStreamSuggestions as defaultFetchStreamSuggestions } from '@source
 import { RecentSearch } from '@sourcegraph/shared/src/settings/temporary/recentSearches'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { IEditor, LazyQueryInput, LazyQueryInputProps } from './LazyQueryInput'
 import { SearchButton } from './SearchButton'
@@ -24,7 +23,6 @@ import styles from './SearchBox.module.scss'
 
 export interface SearchBoxProps
     extends Omit<TogglesProps, 'navbarSearchQuery' | 'submitSearch'>,
-        ThemeProps,
         SearchContextInputProps,
         TelemetryProps,
         PlatformContextProps<'requestGraphQL'>,
@@ -185,7 +183,6 @@ export const SearchBox: FC<SearchBoxProps> = props => {
                         fetchStreamSuggestions={props.fetchStreamSuggestions}
                         globbing={props.globbing}
                         interpretComments={props.interpretComments}
-                        isLightTheme={props.isLightTheme}
                         isSourcegraphDotCom={props.isSourcegraphDotCom}
                         onChange={props.onChange}
                         onCompletionItemSelected={props.onCompletionItemSelected}

client/branded/src/search-ui/results/NoResultsPage.tsx

@@ -7,7 +7,6 @@ import { QueryState, SearchContextProps } from '@sourcegraph/shared/src/search'
 import { NoResultsSectionID as SectionID } from '@sourcegraph/shared/src/settings/temporary/searchSidebar'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, Link, Icon, H3, Text, H2 } from '@sourcegraph/wildcard'
 
 import { QueryExamples } from '../components/QueryExamples'
@@ -44,7 +43,7 @@ const Container: React.FunctionComponent<React.PropsWithChildren<ContainerProps>
     </div>
 )
 
-interface NoResultsPageProps extends ThemeProps, TelemetryProps, Pick<SearchContextProps, 'searchContextsEnabled'> {
+interface NoResultsPageProps extends TelemetryProps, Pick<SearchContextProps, 'searchContextsEnabled'> {
     isSourcegraphDotCom: boolean
     showSearchContext: boolean
     /** Available to web app through JS Context */
@@ -56,7 +55,6 @@ interface NoResultsPageProps extends ThemeProps, TelemetryProps, Pick<SearchCont
 
 export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoResultsPageProps>> = ({
     searchContextsEnabled,
-    isLightTheme,
     telemetryService,
     isSourcegraphDotCom,
     showSearchContext,

client/branded/src/search-ui/results/StreamingSearchResultsList.tsx

@@ -19,7 +19,6 @@ import {
 } from '@sourcegraph/shared/src/search/stream'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { CommitSearchResult } from '../components/CommitSearchResult'
 import { FileContentSearchResult } from '../components/FileContentSearchResult'
@@ -37,8 +36,7 @@ import resultContainerStyles from '../components/ResultContainer.module.scss'
 import styles from './StreamingSearchResultsList.module.scss'
 
 export interface StreamingSearchResultsListProps
-    extends ThemeProps,
-        SettingsCascadeProps,
+    extends SettingsCascadeProps,
         TelemetryProps,
         Pick<SearchContextProps, 'searchContextsEnabled'>,
         PlatformContextProps<'requestGraphQL'> {
@@ -85,7 +83,6 @@ export const StreamingSearchResultsList: React.FunctionComponent<
     fetchHighlightedFileLineRanges,
     settingsCascade,
     telemetryService,
-    isLightTheme,
     isSourcegraphDotCom,
     searchContextsEnabled,
     assetsRoot,
@@ -287,7 +284,6 @@ export const StreamingSearchResultsList: React.FunctionComponent<
                             <NoResultsPage
                                 searchContextsEnabled={searchContextsEnabled}
                                 isSourcegraphDotCom={isSourcegraphDotCom}
-                                isLightTheme={isLightTheme}
                                 telemetryService={telemetryService}
                                 showSearchContext={searchContextsEnabled}
                                 assetsRoot={assetsRoot}

client/browser/src/browser-extension/ThemeWrapper.tsx

@@ -1,14 +1,12 @@
 import { useEffect, useMemo, useState } from 'react'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
-
 /**
  * Wrapper for the browser extension that listens to changes of the OS theme.
  */
 export function ThemeWrapper({
     children,
 }: {
-    children: JSX.Element | null | ((props: ThemeProps) => JSX.Element | null)
+    children: JSX.Element | null | ((props: { isLightTheme: boolean }) => JSX.Element | null)
 }): JSX.Element | null {
     const darkThemeMediaList = useMemo(() => window.matchMedia('(prefers-color-scheme: dark)'), [])
     const [isLightTheme, setIsLightTheme] = useState(!darkThemeMediaList.matches)

client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.tsx

@@ -5,18 +5,18 @@ import classNames from 'classnames'
 
 import { SourcegraphLogo } from '@sourcegraph/branded/src/components/SourcegraphLogo'
 import { PhabricatorIcon } from '@sourcegraph/shared/src/components/icons'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Link, Icon, Code, H1, H2, H3, Text } from '@sourcegraph/wildcard'
 
 import { getPlatformName } from '../../shared/util/context'
 
 import styles from './AfterInstallPageContent.module.scss'
 
-const Video: React.FunctionComponent<
-    React.PropsWithChildren<
-        { name: string } & Pick<VideoHTMLAttributes<HTMLVideoElement>, 'width' | 'height'> & ThemeProps
-    >
-> = ({ name, isLightTheme, width, height }) => {
+interface VideoProps extends Pick<VideoHTMLAttributes<HTMLVideoElement>, 'width' | 'height'> {
+    name: string
+    isLightTheme: boolean
+}
+
+const Video: React.FC<VideoProps> = ({ name, isLightTheme, width, height }) => {
     const suffix = isLightTheme ? 'Light' : 'Dark'
     return (
         <video
@@ -43,7 +43,11 @@ const Video: React.FunctionComponent<
     )
 }
 
-export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = props => {
+interface AfterInstallPageContentProps {
+    isLightTheme: boolean
+}
+
+export const AfterInstallPageContent: React.FC<AfterInstallPageContentProps> = props => {
     // Safari does not support the search shortcut. So don't show the feature.
     const isSafari = getPlatformName() === 'safari-extension'
     const showSearchShortcut = !isSafari