[Guided onboarding] Address dark mode issues (elastic#162136)

Guided onboarding plugin should no longer rely on calling uiSettings to determine which theme Kibana is displayed with Fixes: elastic#159200
kqualters-elastic · Jul 18, 2023 · 2e27e81 · 2e27e81
1 parent 2662400
commit 2e27e81
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.test.tsx b/src/plugins/guided_onboarding/public/components/guide_panel.test.tsx
@@ -8,6 +8,8 @@
 
 import { act } from 'react-dom/test-utils';
 import React from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { CoreTheme } from '@kbn/core/public';
 
 import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
 import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks';
@@ -31,15 +33,10 @@ import {
   mockPluginStateInProgress,
 } from '../services/api.mocks';
 import { GuidePanel } from './guide_panel';
-import { IUiSettingsClient } from '@kbn/core/public';
 
 const applicationMock = applicationServiceMock.createStartContract();
 const notificationsMock = notificationServiceMock.createStartContract();
 
-const uiSettingsMock = {
-  get: jest.fn(),
-} as unknown as IUiSettingsClient;
-
 const mockGetResponse = (path: string, pluginState: PluginState) => {
   if (path === `${API_BASE_PATH}/configs/${testGuideId}`) {
     return Promise.resolve({
@@ -60,13 +57,14 @@ const setupComponentWithPluginStateMock = async (
 };
 
 const setupGuidePanelComponent = async (api: GuidedOnboardingApi) => {
+  const coreTheme$ = new BehaviorSubject<CoreTheme>({ darkMode: true });
   let testBed: TestBed;
   const GuidePanelComponent = () => (
     <GuidePanel
       application={applicationMock}
       api={api}
       notifications={notificationsMock}
-      uiSettings={uiSettingsMock}
+      theme$={coreTheme$}
     />
   );
   await act(async () => {

diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.tsx b/src/plugins/guided_onboarding/public/components/guide_panel.tsx
@@ -7,11 +7,14 @@
  */
 
 import React, { useState, useEffect, useCallback } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import type { Observable } from 'rxjs';
+
 import { useEuiTheme } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
-import { ApplicationStart, NotificationsStart, IUiSettingsClient } from '@kbn/core/public';
+import { ApplicationStart, CoreTheme, NotificationsStart } from '@kbn/core/public';
 import type { GuideState, GuideStep as GuideStepStatus } from '@kbn/guided-onboarding';
 
 import type { GuideId, GuideConfig, StepConfig } from '@kbn/guided-onboarding';
@@ -30,7 +33,7 @@ interface GuidePanelProps {
   api: GuidedOnboardingApi;
   application: ApplicationStart;
   notifications: NotificationsStart;
-  uiSettings: IUiSettingsClient;
+  theme$: Observable<CoreTheme>;
 }
 
 const getProgress = (state?: GuideState): number => {
@@ -45,16 +48,16 @@ const getProgress = (state?: GuideState): number => {
   return 0;
 };
 
-export const GuidePanel = ({ api, application, notifications, uiSettings }: GuidePanelProps) => {
+export const GuidePanel = ({ api, application, notifications, theme$ }: GuidePanelProps) => {
   const euiThemeContext = useEuiTheme();
   const euiTheme = euiThemeContext.euiTheme;
   const [isGuideOpen, setIsGuideOpen] = useState(false);
   const [isQuitGuideModalOpen, setIsQuitGuideModalOpen] = useState(false);
   const [pluginState, setPluginState] = useState<PluginState | undefined>(undefined);
   const [guideConfig, setGuideConfig] = useState<GuideConfig | undefined>(undefined);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { darkMode: isDarkTheme } = useObservable(theme$, { darkMode: false });
 
-  const isDarkTheme = uiSettings.get('theme:darkMode');
   const styles = getGuidePanelStyles({ euiThemeContext, isDarkTheme });
 
   const toggleGuide = () => {

diff --git a/src/plugins/guided_onboarding/public/plugin.tsx b/src/plugins/guided_onboarding/public/plugin.tsx
@@ -17,7 +17,6 @@ import {
   CoreTheme,
   ApplicationStart,
   NotificationsStart,
-  IUiSettingsClient,
 } from '@kbn/core/public';
 
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
@@ -43,7 +42,7 @@ export class GuidedOnboardingPlugin
     core: CoreStart,
     { cloud }: AppPluginStartDependencies
   ): GuidedOnboardingPluginStart {
-    const { chrome, http, theme, application, notifications, uiSettings } = core;
+    const { chrome, http, theme, application, notifications } = core;
 
     // Guided onboarding UI is only available on cloud and if the access to the Kibana feature is granted
     const isEnabled = !!(cloud?.isCloudEnabled && application.capabilities[PLUGIN_FEATURE].enabled);
@@ -60,7 +59,6 @@ export class GuidedOnboardingPlugin
             api: apiService,
             application,
             notifications,
-            uiSettings,
           }),
       });
     }
@@ -79,14 +77,12 @@ export class GuidedOnboardingPlugin
     api,
     application,
     notifications,
-    uiSettings,
   }: {
     targetDomElement: HTMLElement;
     theme$: Rx.Observable<CoreTheme>;
     api: ApiService;
     application: ApplicationStart;
     notifications: NotificationsStart;
-    uiSettings: IUiSettingsClient;
   }) {
     ReactDOM.render(
       <KibanaThemeProvider theme$={theme$}>
@@ -95,7 +91,7 @@ export class GuidedOnboardingPlugin
             api={api}
             application={application}
             notifications={notifications}
-            uiSettings={uiSettings}
+            theme$={theme$}
           />
         </I18nProvider>
       </KibanaThemeProvider>,