implement POC

elastic · Dec 11, 2023 · 243d36c · 243d36c
1 parent 0057e6b
commit 243d36c
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 55 deletions.
diff --git a/packages/core/injected-metadata/core-injected-metadata-browser-internal/src/types.ts b/packages/core/injected-metadata/core-injected-metadata-browser-internal/src/types.ts
@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { ThemeVersion } from '@kbn/ui-shared-deps-npm';
 import {
   InjectedMetadata,
   InjectedMetadataClusterInfo,
   InjectedMetadataExternalUrlPolicy,
   InjectedMetadataPlugin,
+  InjectedMetadataTheme,
 } from '@kbn/core-injected-metadata-common-internal';
 import type { CustomBranding } from '@kbn/core-custom-branding-common';
 
@@ -39,10 +39,7 @@ export interface InternalInjectedMetadataSetup {
   getExternalUrlConfig: () => {
     policy: InjectedMetadataExternalUrlPolicy[];
   };
-  getTheme: () => {
-    darkMode: boolean;
-    version: ThemeVersion;
-  };
+  getTheme: () => InjectedMetadataTheme;
   getElasticsearchInfo: () => InjectedMetadataClusterInfo;
   /**
    * An array of frontend plugins in topological order.

diff --git a/packages/core/injected-metadata/core-injected-metadata-common-internal/index.ts b/packages/core/injected-metadata/core-injected-metadata-common-internal/index.ts
@@ -10,5 +10,6 @@ export type {
   InjectedMetadata,
   InjectedMetadataClusterInfo,
   InjectedMetadataExternalUrlPolicy,
+  InjectedMetadataTheme,
   InjectedMetadataPlugin,
 } from './src/types';
diff --git a/packages/core/injected-metadata/core-injected-metadata-common-internal/src/types.ts b/packages/core/injected-metadata/core-injected-metadata-common-internal/src/types.ts
@@ -10,6 +10,7 @@ import type { PluginName, DiscoveredPlugin } from '@kbn/core-base-common';
 import type { ThemeVersion } from '@kbn/ui-shared-deps-npm';
 import type { EnvironmentMode, PackageInfo } from '@kbn/config';
 import type { CustomBranding } from '@kbn/core-custom-branding-common';
+import type { DarkModeValue } from '@kbn/core-ui-settings-common';
 
 /** @internal */
 export interface InjectedMetadataClusterInfo {
@@ -35,6 +36,16 @@ export interface InjectedMetadataExternalUrlPolicy {
   protocol?: string;
 }
 
+/** @internal */
+export interface InjectedMetadataTheme {
+  darkMode: DarkModeValue;
+  version: ThemeVersion;
+  stylesheetPaths: {
+    default: string[];
+    dark: string[];
+  };
+}
+
 /** @internal */
 export interface InjectedMetadata {
   version: string;
@@ -53,10 +64,7 @@ export interface InjectedMetadata {
   i18n: {
     translationsUrl: string;
   };
-  theme: {
-    darkMode: boolean;
-    version: ThemeVersion;
-  };
+  theme: InjectedMetadataTheme;
   csp: {
     warnLegacyBrowsers: boolean;
   };

diff --git a/packages/core/rendering/core-rendering-server-internal/src/render_utils.test.ts b/packages/core/rendering/core-rendering-server-internal/src/render_utils.test.ts
@@ -6,14 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { getStylesheetPaths } from './render_utils';
+import { getDarkModeStylesheetPaths } from './render_utils';
 
 describe('getStylesheetPaths', () => {
   describe('when darkMode is `true`', () => {
     describe('when themeVersion is `v8`', () => {
       it('returns the correct list', () => {
         expect(
-          getStylesheetPaths({
+          getDarkModeStylesheetPaths({
             darkMode: true,
             themeVersion: 'v8',
             baseHref: '/base-path',
@@ -33,7 +33,7 @@ describe('getStylesheetPaths', () => {
     describe('when themeVersion is `v8`', () => {
       it('returns the correct list', () => {
         expect(
-          getStylesheetPaths({
+          getDarkModeStylesheetPaths({
             darkMode: false,
             themeVersion: 'v8',
             baseHref: '/base-path',

diff --git a/packages/core/rendering/core-rendering-server-internal/src/render_utils.ts b/packages/core/rendering/core-rendering-server-internal/src/render_utils.ts
@@ -25,33 +25,42 @@ export const getSettingValue = <T>(
 export const getBundlesHref = (baseHref: string, buildNr: string): string =>
   `${baseHref}/${buildNr}/bundles`;
 
-export const getStylesheetPaths = ({
-  themeVersion,
-  darkMode,
+export const getCommonStylesheetPaths = ({
   baseHref,
   buildNum,
 }: {
-  themeVersion: UiSharedDepsNpm.ThemeVersion;
-  darkMode: boolean;
   buildNum: number;
   baseHref: string;
 }) => {
   const bundlesHref = getBundlesHref(baseHref, String(buildNum));
-  return [
-    ...(darkMode
-      ? [
-          `${bundlesHref}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.darkCssDistFilename(
-            themeVersion
-          )}`,
-          `${bundlesHref}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
-          `${baseHref}/ui/legacy_dark_theme.min.css`,
-        ]
-      : [
-          `${bundlesHref}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename(
-            themeVersion
-          )}`,
-          `${bundlesHref}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
-          `${baseHref}/ui/legacy_light_theme.min.css`,
-        ]),
-  ];
+  return [`${bundlesHref}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`];
 };
+
+export const getDarkModeStylesheetPaths =
+  ({
+    themeVersion,
+    baseHref,
+    buildNum,
+  }: {
+    themeVersion: UiSharedDepsNpm.ThemeVersion;
+    buildNum: number;
+    baseHref: string;
+  }) =>
+  ({ darkMode }: { darkMode: boolean }) => {
+    const bundlesHref = getBundlesHref(baseHref, String(buildNum));
+    return [
+      ...(darkMode
+        ? [
+            `${bundlesHref}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.darkCssDistFilename(
+              themeVersion
+            )}`,
+            `${baseHref}/ui/legacy_dark_theme.min.css`,
+          ]
+        : [
+            `${bundlesHref}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename(
+              themeVersion
+            )}`,
+            `${baseHref}/ui/legacy_light_theme.min.css`,
+          ]),
+    ];
+  };
diff --git a/packages/core/rendering/core-rendering-server-internal/src/rendering_service.tsx b/packages/core/rendering/core-rendering-server-internal/src/rendering_service.tsx
@@ -18,7 +18,7 @@ import type { KibanaRequest, HttpAuth } from '@kbn/core-http-server';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-server';
 import type { UiPlugins } from '@kbn/core-plugins-base-server-internal';
 import { CustomBranding } from '@kbn/core-custom-branding-common';
-import { UserProvidedValues } from '@kbn/core-ui-settings-common';
+import { UserProvidedValues, DarkModeValue } from '@kbn/core-ui-settings-common';
 import { Template } from './views';
 import {
   IRenderOptions,
@@ -29,7 +29,11 @@ import {
   RenderingMetadata,
 } from './types';
 import { registerBootstrapRoute, bootstrapRendererFactory } from './bootstrap';
-import { getSettingValue, getStylesheetPaths } from './render_utils';
+import {
+  getSettingValue,
+  getCommonStylesheetPaths,
+  getDarkModeStylesheetPaths,
+} from './render_utils';
 import { filterUiPlugins } from './filter_ui_plugins';
 import type { InternalRenderingRequestHandlerContext } from './internal_types';
 
@@ -42,6 +46,8 @@ type RenderOptions =
       userSettings?: never;
     });
 
+const themeVersion: ThemeVersion = 'v8';
+
 /** @internal */
 export class RenderingService {
   constructor(private readonly coreContext: CoreContext) {}
@@ -160,31 +166,36 @@ export class RenderingService {
       // swallow error
     }
 
-    let userSettingDarkMode: boolean | undefined;
-
-    if (!isAnonymousPage) {
-      userSettingDarkMode = await userSettings?.getUserSettingDarkMode(request);
-    }
-
-    let darkMode: boolean;
+    // dark mode
+    const userSettingDarkMode = isAnonymousPage
+      ? undefined
+      : await userSettings?.getUserSettingDarkMode(request);
 
     const isThemeOverridden = settings.user['theme:darkMode']?.isOverridden ?? false;
 
+    let darkMode: DarkModeValue;
     if (userSettingDarkMode !== undefined && !isThemeOverridden) {
       darkMode = userSettingDarkMode;
     } else {
-      darkMode = getSettingValue('theme:darkMode', settings, Boolean);
+      darkMode = getSettingValue<DarkModeValue>(
+        'theme:darkMode',
+        settings,
+        (v) => v as DarkModeValue
+      );
     }
+    // end dark mode
 
-    const themeVersion: ThemeVersion = 'v8';
-
-    const stylesheetPaths = getStylesheetPaths({
-      darkMode,
+    const themeStylesheetPaths = getDarkModeStylesheetPaths({
       themeVersion,
       baseHref: staticAssetsHrefBase,
       buildNum,
     });
 
+    const commonStylesheetPaths = getCommonStylesheetPaths({
+      baseHref: staticAssetsHrefBase,
+      buildNum,
+    });
+
     const filteredPlugins = filterUiPlugins({ uiPlugins, isAnonymousPage });
     const bootstrapScript = isAnonymousPage ? 'bootstrap-anonymous.js' : 'bootstrap.js';
     const metadata: RenderingMetadata = {
@@ -195,7 +206,7 @@ export class RenderingService {
       locale: i18n.getLocale(),
       darkMode,
       themeVersion,
-      stylesheetPaths,
+      stylesheetPaths: commonStylesheetPaths,
       customBranding: {
         faviconSVG: branding?.faviconSVG,
         faviconPNG: branding?.faviconPNG,
@@ -220,6 +231,10 @@ export class RenderingService {
         theme: {
           darkMode,
           version: themeVersion,
+          stylesheetPaths: {
+            default: themeStylesheetPaths({ darkMode: false }),
+            dark: themeStylesheetPaths({ darkMode: true }),
+          },
         },
         customBranding: {
           logo: branding?.logo,

diff --git a/packages/core/rendering/core-rendering-server-internal/src/types.ts b/packages/core/rendering/core-rendering-server-internal/src/types.ts
@@ -16,6 +16,7 @@ import type {
 } from '@kbn/core-http-server-internal';
 import type { InternalElasticsearchServiceSetup } from '@kbn/core-elasticsearch-server-internal';
 import type { InternalStatusServiceSetup } from '@kbn/core-status-server-internal';
+import type { DarkModeValue } from '@kbn/core-ui-settings-common';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-server';
 import type { UiPlugins } from '@kbn/core-plugins-base-server-internal';
 import type { InternalCustomBrandingSetup } from '@kbn/core-custom-branding-server-internal';
@@ -29,7 +30,7 @@ export interface RenderingMetadata {
   bootstrapScriptUrl: string;
   i18n: typeof i18n.translate;
   locale: string;
-  darkMode: boolean;
+  darkMode: DarkModeValue;
   themeVersion: ThemeVersion;
   stylesheetPaths: string[];
   injectedMetadata: InjectedMetadata;

diff --git a/packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx b/packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx
@@ -16,7 +16,7 @@ interface Props {
 export const Styles: FC<Props> = ({ darkMode, stylesheetPaths }) => {
   return (
     <>
-      <InlineStyles darkMode={darkMode} />
+      <InlineStyles darkMode={toBoolean(darkMode)} />
       {stylesheetPaths.map((path) => (
         <link key={path} rel="stylesheet" type="text/css" href={path} />
       ))}
@@ -161,3 +161,14 @@ const InlineStyles: FC<{ darkMode: boolean }> = ({ darkMode }) => {
   );
   /* eslint-enable react/no-danger */
 };
+
+
+const toBoolean = (val: string | boolean): boolean => {
+  if (val === true || val === 'true') {
+    return true;
+  }
+  if (val === false || val === 'false') {
+    return false;
+  }
+  return Boolean(val);
+};