[KibanaReact] Use settings service in useUiSetting hook

examples/expressions_explorer/public/app.tsx

@@ -23,6 +23,7 @@ import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { Start as InspectorStart } from '@kbn/inspector-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
+import { SettingsStart } from '@kbn/core-ui-settings-browser';
 import { RunExpressionsExample } from './run_expressions';
 import { RenderExpressionsExample } from './render_expressions';
 import { ActionsExpressionsExample } from './actions_and_expressions';
@@ -33,10 +34,14 @@ interface Props {
   inspector: InspectorStart;
   actions: UiActionsStart;
   uiSettings: IUiSettingsClient;
+  settings: SettingsStart;
 }
 
-const ExpressionsExplorer = ({ expressions, inspector, actions, uiSettings }: Props) => {
-  const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ uiSettings });
+const ExpressionsExplorer = ({ expressions, inspector, actions, uiSettings, settings }: Props) => {
+  const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
+    uiSettings,
+    settings,
+  });
   return (
     <KibanaReactContextProvider>
       <EuiPage>

examples/expressions_explorer/public/plugin.tsx

@@ -57,6 +57,7 @@ export class ExpressionsExplorerPlugin implements Plugin<void, void, SetupDeps,
             inspector: depsStart.inspector,
             actions: depsStart.uiActions,
             uiSettings: core.uiSettings,
+            settings: core.settings,
           },
           params
         );

examples/expressions_explorer/tsconfig.json

@@ -21,5 +21,6 @@
     "@kbn/developer-examples-plugin",
     "@kbn/i18n",
     "@kbn/i18n-react",
+    "@kbn/core-ui-settings-browser",
   ]
 }

src/plugins/data_view_field_editor/public/open_editor.tsx

@@ -72,11 +72,12 @@ export const getFieldEditorOpener =
     apiService,
   }: Dependencies) =>
   (options: OpenFieldEditorOptions): CloseEditor => {
-    const { uiSettings, overlays, docLinks, notifications } = core;
+    const { uiSettings, overlays, docLinks, notifications, settings } = core;
     const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
       uiSettings,
       docLinks,
       http: core.http,
+      settings,
     });
 
     let overlayRef: OverlayRef | null = null;

src/plugins/data_view_management/public/management_app/mount_management_section.tsx

@@ -40,7 +40,7 @@ export async function mountManagementSection(
   params: ManagementAppMountParams
 ) {
   const [
-    { application, chrome, uiSettings, notifications, overlays, http, docLinks, theme },
+    { application, chrome, uiSettings, settings, notifications, overlays, http, docLinks, theme },
     {
       data,
       dataViewFieldEditor,
@@ -63,6 +63,7 @@ export async function mountManagementSection(
     application,
     chrome,
     uiSettings,
+    settings,
     notifications,
     overlays,
     unifiedSearch,

src/plugins/data_view_management/public/mocks.ts

@@ -57,7 +57,7 @@ const docLinks = {
 const createIndexPatternManagmentContext = (): {
   [key in keyof IndexPatternManagmentContext]: any;
 } => {
-  const { application, chrome, uiSettings, notifications, overlays, theme } =
+  const { application, chrome, uiSettings, notifications, overlays, theme, settings } =
     coreMock.createStart();
   const { http } = coreMock.createSetup();
   const data = dataPluginMock.createStartContract();
@@ -70,6 +70,7 @@ const createIndexPatternManagmentContext = (): {
     application,
     chrome,
     uiSettings,
+    settings,
     notifications,
     overlays,
     http,

src/plugins/data_view_management/public/types.ts

@@ -26,12 +26,14 @@ import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
+import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import { IndexPatternManagementStart } from '.';
 
 export interface IndexPatternManagmentContext {
   application: ApplicationStart;
   chrome: ChromeStart;
   uiSettings: IUiSettingsClient;
+  settings: SettingsStart;
   notifications: NotificationsStart;
   overlays: OverlayStart;
   http: HttpSetup;

src/plugins/data_view_management/tsconfig.json

@@ -33,6 +33,7 @@
     "@kbn/utility-types-jest",
     "@kbn/config-schema",
     "@kbn/shared-ux-router",
+    "@kbn/core-ui-settings-browser",
   ],
   "exclude": [
     "target/**/*",

src/plugins/discover/public/build_services.ts

@@ -47,6 +47,7 @@ import type { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plug
 import type { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
 import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import type { LensPublicStart } from '@kbn/lens-plugin/public';
+import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import { getHistory } from './kibana_services';
 import { DiscoverStartPlugins } from './plugin';
 import { DiscoverContextAppLocator } from './application/context/services/locator';
@@ -83,6 +84,7 @@ export interface DiscoverServices {
   toastNotifications: ToastsStart;
   notifications: NotificationsStart;
   uiSettings: IUiSettingsClient;
+  settings: SettingsStart;
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
   dataViewFieldEditor: IndexPatternFieldEditorStart;
   dataViewEditor: DataViewEditorStart;
@@ -137,6 +139,7 @@ export const buildServices = memoize(function (
     toastNotifications: core.notifications.toasts,
     notifications: core.notifications,
     uiSettings: core.uiSettings,
+    settings: core.settings,
     storage,
     trackUiMetric: usageCollection?.reportUiCounter.bind(usageCollection, 'discover'),
     dataViewFieldEditor: plugins.dataViewFieldEditor,

src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx

@@ -17,6 +17,11 @@ import { buildDataTableRecord } from '../../utils/build_data_record';
 import { EsHitRecord } from '../../types';
 
 const mockServices = {
+  settings: {
+    client: {
+      get: (key: string) => key === 'discover:maxDocFieldsDisplayed' && 200,
+    },
+  },
   uiSettings: {
     get: (key: string) => key === 'discover:maxDocFieldsDisplayed' && 200,
   },

src/plugins/inspector/public/plugin.tsx

@@ -105,6 +105,7 @@ export class InspectorPublicPlugin implements Plugin<Setup, Start> {
               http: core.http,
               uiSettings: core.uiSettings,
               share: startDeps.share,
+              settings: core.settings,
             }}
           />,
           { theme$: core.theme.theme$ }

src/plugins/inspector/public/ui/inspector_panel.test.tsx

@@ -15,6 +15,8 @@ import type { ApplicationStart, HttpSetup, IUiSettingsClient } from '@kbn/core/p
 import { SharePluginStart } from '@kbn/share-plugin/public';
 import { sharePluginMock } from '@kbn/share-plugin/public/mocks';
 import { applicationServiceMock } from '@kbn/core/public/mocks';
+import { settingsServiceMock } from '@kbn/core-ui-settings-browser-mocks';
+import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 
 describe('InspectorPanel', () => {
   let adapters: Adapters;
@@ -24,11 +26,13 @@ describe('InspectorPanel', () => {
     http: {},
     share: sharePluginMock.createStartContract(),
     uiSettings: {},
+    settings: settingsServiceMock.createStartContract(),
   } as unknown as {
     application: ApplicationStart;
     http: HttpSetup;
     share: SharePluginStart;
     uiSettings: IUiSettingsClient;
+    settings: SettingsStart;
   };
 
   beforeEach(() => {

src/plugins/inspector/public/ui/inspector_panel.tsx

@@ -21,6 +21,7 @@ import {
 import { ApplicationStart, HttpStart, IUiSettingsClient } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { SharePluginStart } from '@kbn/share-plugin/public';
+import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import { InspectorViewDescription } from '../types';
 import { Adapters } from '../../common';
 import { InspectorViewChooser } from './inspector_view_chooser';
@@ -46,6 +47,7 @@ interface InspectorPanelProps {
     http: HttpStart;
     uiSettings: IUiSettingsClient;
     share: SharePluginStart;
+    settings: SettingsStart;
   };
 }
 

src/plugins/inspector/tsconfig.json

@@ -12,6 +12,8 @@
     "@kbn/test-jest-helpers",
     "@kbn/i18n-react",
     "@kbn/monaco",
+    "@kbn/core-ui-settings-browser-mocks",
+    "@kbn/core-ui-settings-browser",
   ],
   "exclude": [
     "target/**/*",

src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx

@@ -22,8 +22,8 @@ useObservableSpy.mockImplementation((observable, def) => def);
 
 const mock = (): [KibanaServices, Subject<any>] => {
   const core = coreMock.createStart();
-  const get = core.uiSettings.get;
-  const get$ = core.uiSettings.get$;
+  const get = core.settings.client.get;
+  const get$ = core.settings.client.get$;
   const subject = new Subject();
 
   get.mockImplementation(() => 'bar');
@@ -73,8 +73,8 @@ describe('useUiSetting', () => {
 
     const strong = container!.querySelector('strong');
     expect(strong!.textContent).toBe('bar');
-    expect(core.uiSettings!.get).toHaveBeenCalledTimes(1);
-    expect((core.uiSettings!.get as any).mock.calls[0][0]).toBe('foo');
+    expect(core.settings!.client.get).toHaveBeenCalledTimes(1);
+    expect((core.settings!.client.get as any).mock.calls[0][0]).toBe('foo');
   });
 
   test('calls uiSettings.get() method with correct key and default value', async () => {
@@ -88,9 +88,10 @@ describe('useUiSetting', () => {
       container
     );
 
-    expect(core.uiSettings!.get).toHaveBeenCalledTimes(1);
-    expect((core.uiSettings!.get as any).mock.calls[0][0]).toBe('foo');
-    expect((core.uiSettings!.get as any).mock.calls[0][1]).toBe('DEFAULT');
+    expect(core.uiSettings!.get).toHaveBeenCalledTimes(0);
+    expect(core.settings!.client.get).toHaveBeenCalledTimes(1);
+    expect((core.settings!.client.get as any).mock.calls[0][0]).toBe('foo');
+    expect((core.settings!.client.get as any).mock.calls[0][1]).toBe('DEFAULT');
   });
 });
 
@@ -183,8 +184,8 @@ describe('useUiSetting$', () => {
 
     const strong = container!.querySelector('strong');
     expect(strong!.textContent).toBe('bar');
-    expect(core.uiSettings!.get).toHaveBeenCalledTimes(1);
-    expect((core.uiSettings!.get as any).mock.calls[0][0]).toBe('foo');
+    expect(core.settings!.client.get).toHaveBeenCalledTimes(1);
+    expect((core.settings!.client.get as any).mock.calls[0][0]).toBe('foo');
   });
 
   test('calls Core with correct arguments', async () => {
@@ -198,7 +199,7 @@ describe('useUiSetting$', () => {
       container
     );
 
-    expect(core.uiSettings!.get).toHaveBeenCalledWith('non_existing', 'DEFAULT');
+    expect(core.settings!.client.get).toHaveBeenCalledWith('non_existing', 'DEFAULT');
   });
 
   test('subscribes to observable using useObservable', async () => {
@@ -235,7 +236,7 @@ describe('useUiSetting$', () => {
       Simulate.click(container!.querySelector('button')!, {});
     });
 
-    expect(core.uiSettings!.set).toHaveBeenCalledTimes(1);
-    expect(core.uiSettings!.set).toHaveBeenCalledWith('a', 'c');
+    expect(core.settings!.client.set).toHaveBeenCalledTimes(1);
+    expect(core.settings!.client.set).toHaveBeenCalledWith('a', 'c');
   });
 });

src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts

@@ -20,13 +20,15 @@ import { useKibana } from '../context';
  * ```
  */
 export const useUiSetting = <T>(key: string, defaultValue?: T): T => {
-  const { services } = useKibana();
+  const {
+    services: { settings },
+  } = useKibana();
 
-  if (typeof services.uiSettings !== 'object') {
+  if (!settings) {
     throw new TypeError('uiSettings service not available in kibana-react context.');
   }
 
-  return services.uiSettings.get(key, defaultValue);
+  return settings.client.get(key, defaultValue);
 };
 
 /**
@@ -39,13 +41,15 @@ export const useUiSetting = <T>(key: string, defaultValue?: T): T => {
  * ```
  */
 export const useGlobalUiSetting = <T>(key: string, defaultValue?: T): T => {
-  const { services } = useKibana();
+  const {
+    services: { settings },
+  } = useKibana();
 
-  if (typeof services.settings !== 'object') {
+  if (!settings) {
     throw new TypeError('uiSettings service not available in kibana-react context.');
   }
 
-  return services.settings.globalClient.get(key, defaultValue);
+  return settings.globalClient.get(key, defaultValue);
 };
 
 type Setter<T> = (newValue: T) => Promise<boolean>;
@@ -64,18 +68,20 @@ type Setter<T> = (newValue: T) => Promise<boolean>;
  * ```
  */
 export const useUiSetting$ = <T>(key: string, defaultValue?: T): [T, Setter<T>] => {
-  const { services } = useKibana();
+  const {
+    services: { settings },
+  } = useKibana();
 
-  if (typeof services.uiSettings !== 'object') {
+  if (!settings) {
     throw new TypeError('uiSettings service not available in kibana-react context.');
   }
 
   const observable$ = useMemo(
-    () => services.uiSettings!.get$(key, defaultValue),
-    [key, defaultValue, services.uiSettings]
+    () => settings!.client.get$(key, defaultValue),
+    [key, defaultValue, settings]
   );
-  const value = useObservable<T>(observable$, services.uiSettings!.get(key, defaultValue));
-  const set = useCallback((newValue: T) => services.uiSettings!.set(key, newValue), [key]);
+  const value = useObservable<T>(observable$, settings!.client.get(key, defaultValue));
+  const set = useCallback((newValue: T) => settings!.client.set(key, newValue), [key]);
 
   return [value, set];
 };
@@ -94,24 +100,20 @@ export const useUiSetting$ = <T>(key: string, defaultValue?: T): [T, Setter<T>]
  * ```
  */
 export const useGlobalUiSetting$ = <T>(key: string, defaultValue?: T): [T, Setter<T>] => {
-  const { services } = useKibana();
+  const {
+    services: { settings },
+  } = useKibana();
 
-  if (typeof services.settings !== 'object') {
+  if (!settings) {
     throw new TypeError('uiSettings service not available in kibana-react context.');
   }
 
   const observable$ = useMemo(
-    () => services.settings!.globalClient.get$(key, defaultValue),
-    [key, defaultValue, services.settings!.globalClient]
-  );
-  const value = useObservable<T>(
-    observable$,
-    services.settings!.globalClient.get(key, defaultValue)
-  );
-  const set = useCallback(
-    (newValue: T) => services.settings!.globalClient.set(key, newValue),
-    [key]
+    () => settings!.globalClient.get$(key, defaultValue),
+    [key, defaultValue, settings!.globalClient]
   );
+  const value = useObservable<T>(observable$, settings!.globalClient.get(key, defaultValue));
+  const set = useCallback((newValue: T) => settings!.globalClient.set(key, newValue), [key]);
 
   return [value, set];
 };