Add useSetting hook

client/shared/src/settings/settings.ts → client/shared/src/settings/settings.tsx

@@ -1,3 +1,5 @@
+import { createContext, useContext, useMemo } from 'react'
+
 import { cloneDeep, isFunction } from 'lodash'
 
 import { createAggregateError, ErrorLike, isErrorLike, parseJSONCOrError } from '@sourcegraph/common'
@@ -220,6 +222,7 @@ export function merge(base: any, add: any, custom?: CustomMergeFunctions): void
  * @todo Display the errors to the user in another component.
  *
  * @template S the settings type
+ * @deprecated Use useSettings() instead.
  */
 export function isSettingsValid<S extends Settings>(
     settingsCascade: SettingsCascadeOrError<S>
@@ -234,7 +237,47 @@ export function isSettingsValid<S extends Settings>(
 
 /**
  * React partial props for components needing the settings cascade.
+ *
+ * @deprecated Use useSettings() or useSettingsCascade() instead.
  */
 export interface SettingsCascadeProps<S extends Settings = Settings> {
     settingsCascade: SettingsCascadeOrError<S>
 }
+
+interface SettingsContextData<S extends Settings = Settings> {
+    settingsCascade: SettingsCascadeOrError<S> | null
+}
+const SettingsContext = createContext<SettingsContextData>({
+    settingsCascade: null,
+})
+
+interface SettingsProviderProps {
+    settingsCascade: SettingsCascadeOrError
+}
+
+export const SettingsProvider: React.FC<React.PropsWithChildren<SettingsProviderProps>> = props => {
+    const { children, settingsCascade } = props
+    const context = useMemo(() => ({ settingsCascade }), [settingsCascade])
+    return <SettingsContext.Provider value={context}>{children}</SettingsContext.Provider>
+}
+
+/**
+ * Access the underlying settings cascade directly.
+ *
+ * @deprecated Use useSettings() instead.
+ */
+export const useSettingsCascade = (): SettingsCascadeOrError => {
+    const { settingsCascade } = useContext(SettingsContext)
+    if (!settingsCascade) {
+        throw new Error('useSettingsCascade must be used within a SettingsProvider')
+    }
+    return settingsCascade
+}
+
+/**
+ * A React hooks that returns the resolved settings cascade.
+ */
+export const useSettings = (): Settings | null => {
+    const settingsCascade = useSettingsCascade()
+    return isSettingsValid(settingsCascade) ? settingsCascade.final : null
+}

client/web/src/LegacySourcegraphWebApp.tsx

@@ -37,7 +37,11 @@ import {
 import { FilterType } from '@sourcegraph/shared/src/search/query/filters'
 import { filterExists } from '@sourcegraph/shared/src/search/query/validate'
 import { aggregateStreamingSearch } from '@sourcegraph/shared/src/search/stream'
-import { EMPTY_SETTINGS_CASCADE, SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
+import {
+    EMPTY_SETTINGS_CASCADE,
+    SettingsCascadeProps,
+    SettingsProvider,
+} from '@sourcegraph/shared/src/settings/settings'
 import { TemporarySettingsProvider } from '@sourcegraph/shared/src/settings/temporary/TemporarySettingsProvider'
 import { TemporarySettingsStorage } from '@sourcegraph/shared/src/settings/temporary/TemporarySettingsStorage'
 import { globbingEnabledFromSettings } from '@sourcegraph/shared/src/util/globbing'
@@ -345,6 +349,7 @@ export class LegacySourcegraphWebApp extends React.Component<
                     /* eslint-disable react/no-children-prop, react/jsx-key */
                     <ApolloProvider client={graphqlClient} children={undefined} />,
                     <WildcardThemeContext.Provider value={WILDCARD_THEME} />,
+                    <SettingsProvider settingsCascade={this.state.settingsCascade} />,
                     <ErrorBoundary location={null} />,
                     <TraceSpanProvider name={SharedSpanName.AppMount} />,
                     <FeatureFlagsProvider />,

client/web/src/SourcegraphWebApp.tsx

@@ -35,6 +35,7 @@ import {
     EMPTY_SETTINGS_CASCADE,
     Settings,
     SettingsCascadeOrError,
+    SettingsProvider,
     SettingsSubjectCommonFields,
 } from '@sourcegraph/shared/src/settings/settings'
 import { TemporarySettingsProvider } from '@sourcegraph/shared/src/settings/temporary/TemporarySettingsProvider'
@@ -420,6 +421,7 @@ export const SourcegraphWebApp: React.FC<SourcegraphWebAppProps> = props => {
                 /* eslint-disable react/no-children-prop, react/jsx-key */
                 <ApolloProvider client={graphqlClient} children={undefined} />,
                 <WildcardThemeContext.Provider value={WILDCARD_THEME} />,
+                <SettingsProvider settingsCascade={settingsCascade} />,
                 <ErrorBoundary location={null} />,
                 <TraceSpanProvider name={SharedSpanName.AppMount} />,
                 <FeatureFlagsProvider />,