WS10 Add support for new themes format

how-to/customize-home-templates/client/src/themes.ts

@@ -1,7 +1,4 @@
-import type {
-	CustomPaletteSet,
-	CustomThemeOptions
-} from "@openfin/workspace-platform/common/src/api/theming";
+import type { CustomPaletteSet, CustomThemeOptions } from "@openfin/workspace/common/src/api/theming";
 import { getSettings } from "./settings";
 
 const DEFAULT_PALETTES = {

how-to/customize-workspace/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v10
+
+- Added support for new themes format with light and dark schemes
+- Added example of using setSearchQuery API for home integration
+- Use Notifications now uses Show/Hide APIs instead of toggle
+- Shim randomUUID so that it can be used in non secure contexts
+
 ## v9.2
 
 - Added `dev` npm script which live build and reloads code for customize-workspace sample

how-to/customize-workspace/client/src/framework/buttons.ts

@@ -1,39 +1,26 @@
 import {
 	BrowserButtonType,
+	BrowserCreateWindowRequest,
+	BrowserWindowModule,
 	CustomBrowserButtonConfig,
 	getCurrentSync,
 	ToolbarButton
 } from "@openfin/workspace-platform";
 import { checkConditions } from "./conditions";
 import { getSettings } from "./settings";
 import type { ToolbarButtonDefinition } from "./shapes/browser-shapes";
-import { getCurrentTheme } from "./themes";
+import { getCurrentColorSchemeMode } from "./themes";
 
-let allToolbarButtons: ToolbarButtonDefinition[];
+let configToolbarButtons: ToolbarButtonDefinition[];
 let defaultToolbarButtons: ToolbarButton[];
 
-async function getAvailableToolbarButtons(): Promise<ToolbarButtonDefinition[]> {
-	if (Array.isArray(allToolbarButtons)) {
-		return allToolbarButtons;
+async function getConfigToolbarButtons(): Promise<ToolbarButtonDefinition[]> {
+	if (Array.isArray(configToolbarButtons)) {
+		return configToolbarButtons;
 	}
 	const settings = await getSettings();
-	const theme = await getCurrentTheme();
-	const availableToolbarButtons = settings?.browserProvider?.toolbarButtons || [];
-	const validatedToolbarButtons: ToolbarButtonDefinition[] = [];
-
-	for (const entry of availableToolbarButtons) {
-		if (
-			entry.button.iconUrl !== undefined &&
-			theme?.label !== undefined &&
-			entry.themes !== undefined &&
-			entry.themes[theme.label] !== undefined
-		) {
-			entry.button.iconUrl = entry.themes[theme.label];
-		}
-		validatedToolbarButtons.push(entry);
-	}
-	allToolbarButtons = validatedToolbarButtons;
-	return validatedToolbarButtons;
+	configToolbarButtons = settings?.browserProvider?.toolbarButtons || [];
+	return configToolbarButtons;
 }
 
 export async function getDefaultToolbarButtons(): Promise<ToolbarButton[]> {
@@ -42,12 +29,22 @@ export async function getDefaultToolbarButtons(): Promise<ToolbarButton[]> {
 	}
 
 	const defaultButtons: ToolbarButton[] = [];
-	const availableToolbarButtons = await getAvailableToolbarButtons();
+	const availableToolbarButtons = await getConfigToolbarButtons();
 	const platform = getCurrentSync();
 
+	const colorSchemeMode = await getCurrentColorSchemeMode();
+
 	for (const entry of availableToolbarButtons) {
 		if (entry.include && (await checkConditions(platform, entry.conditions))) {
-			defaultButtons.push(entry.button);
+			// We need to duplicate the button, as we don't want to lose
+			// any placeholders in the iconUrl
+			const buttonCopy = JSON.parse(JSON.stringify(entry.button)) as ToolbarButton & { iconUrl?: string };
+
+			if (buttonCopy.iconUrl) {
+				buttonCopy.iconUrl = buttonCopy.iconUrl.replace(/{theme}/g, colorSchemeMode);
+			}
+
+			defaultButtons.push(buttonCopy);
 		}
 	}
 	defaultToolbarButtons = defaultButtons;
@@ -70,7 +67,7 @@ export async function updateToolbarButtons(
 	});
 
 	if (index !== -1) {
-		const availableToolbarButtons = await getAvailableToolbarButtons();
+		const availableToolbarButtons = await getConfigToolbarButtons();
 		const replacement = availableToolbarButtons.find((entry) => {
 			if (entry.button.type === BrowserButtonType.Custom) {
 				const customButton = entry.button as CustomBrowserButtonConfig;
@@ -84,3 +81,44 @@ export async function updateToolbarButtons(
 
 	return buttons;
 }
+
+export async function updateButtonColorScheme(): Promise<void> {
+	const platform = getCurrentSync();
+
+	const browserWindows = await platform.Browser.getAllWindows();
+
+	for (const browserWindow of browserWindows) {
+		await updateBrowserWindowButtonsColorScheme(browserWindow);
+	}
+}
+
+export async function updateBrowserWindowButtonsColorScheme(
+	browserWindow: BrowserWindowModule
+): Promise<void> {
+	const options = await browserWindow.openfinWindow.getOptions();
+	const currentToolbarOptions = (options as BrowserCreateWindowRequest).workspacePlatform.toolbarOptions;
+
+	if (Array.isArray(currentToolbarOptions.buttons)) {
+		const updatedButtons = [];
+		const colorSchemeMode = await getCurrentColorSchemeMode();
+
+		for (const button of currentToolbarOptions.buttons) {
+			if (button.type === BrowserButtonType.Custom) {
+				const buttonId = (button as CustomBrowserButtonConfig).action?.id;
+				if (buttonId) {
+					// Find the original button from config so that we can use the original
+					// iconUrl with any schema placeholders
+					const configButton = configToolbarButtons.find(
+						(b) => (b.button as CustomBrowserButtonConfig).action?.id === buttonId
+					);
+					if (configButton?.button.iconUrl) {
+						button.iconUrl = configButton.button.iconUrl.replace(/{theme}/g, colorSchemeMode);
+					}
+				}
+			}
+			updatedButtons.push(button);
+		}
+
+		await browserWindow.replaceToolbarOptions({ buttons: updatedButtons });
+	}
+}

how-to/customize-workspace/client/src/framework/modules.ts

@@ -2,15 +2,15 @@ import { createLogger } from "./logger-provider";
 import type { CustomSettings } from "./shapes";
 import type {
 	Module,
+	ModuleDefinition,
 	ModuleEntry,
 	ModuleEntryTypes,
-	ModuleDefinition,
+	ModuleHelpers,
 	ModuleImplementation,
 	ModuleList,
-	ModuleTypes,
-	ModuleHelpers
+	ModuleTypes
 } from "./shapes/module-shapes";
-import { getCurrentTheme, getDefaultPalettes } from "./themes";
+import { getCurrentColorSchemeMode, getCurrentPalette, getDefaultPalettes } from "./themes";
 
 const logger = createLogger("Modules");
 
@@ -199,6 +199,7 @@ export function getDefaultHelpers(settings: CustomSettings): ModuleHelpers {
 	return {
 		rootUrl: settings?.platformProvider?.rootUrl,
 		getDefaultPalettes,
-		getCurrentTheme
+		getCurrentPalette,
+		getCurrentColorSchemeMode
 	};
 }

how-to/customize-workspace/client/src/framework/platform/platform-override.ts

@@ -1,4 +1,5 @@
 import {
+	ColorSchemeOptionType,
 	CreateSavedPageRequest,
 	CreateSavedWorkspaceRequest,
 	getCurrentSync,
@@ -11,11 +12,14 @@ import {
 	Workspace,
 	WorkspacePlatformOverrideCallback
 } from "@openfin/workspace-platform";
+import { updateBrowserWindowButtonsColorScheme, updateButtonColorScheme } from "../buttons";
 import * as endpointProvider from "../endpoint";
 import { fireLifecycleEvent } from "../lifecycle";
 import { createLogger } from "../logger-provider";
 import { getGlobalMenu, getPageMenu, getViewMenu } from "../menu";
 import { applyClientSnapshot, decorateSnapshot } from "../snapshot-source";
+import { setCurrentColorSchemeMode } from "../themes";
+import { updateDockColorScheme } from "../workspace/dock";
 import { deletePageBounds, savePageBounds } from "./browser";
 import { closedown as closedownPlatform } from "./platform";
 
@@ -292,6 +296,36 @@ export const overrideCallback: WorkspacePlatformOverrideCallback = async (Worksp
 				return super.quit(payload, callerIdentity);
 			}
 		}
+
+		public async createWindow(
+			options: OpenFin.PlatformWindowCreationOptions,
+			identity?: OpenFin.Identity
+		): Promise<OpenFin.Window> {
+			const window = await super.createWindow(options, identity);
+
+			try {
+				const platform = getCurrentSync();
+				const browserWindow = platform.Browser.wrapSync(window.identity);
+				await updateBrowserWindowButtonsColorScheme(browserWindow);
+			} catch {
+				// Probably not a browser window
+			}
+
+			return window;
+		}
+
+		public async setSelectedScheme(schemeType: ColorSchemeOptionType) {
+			// The color scheme has been updated, so update the theme
+			await setCurrentColorSchemeMode(schemeType);
+
+			// Also update toolbar buttons
+			await updateButtonColorScheme();
+
+			// And relaunch the dock as we currently can't dynamically update buttons
+			await updateDockColorScheme();
+
+			return super.setSelectedScheme(schemeType);
+		}
 	}
 	return new Override();
 };

how-to/customize-workspace/client/src/framework/platform/platform.ts

@@ -7,6 +7,7 @@ import { getActions } from "../actions";
 import * as appProvider from "../apps";
 import * as authProvider from "../auth";
 import { isAuthenticationEnabled } from "../auth";
+import { updateButtonColorScheme } from "../buttons";
 import * as conditionsProvider from "../conditions";
 import * as connectionProvider from "../connections";
 import * as endpointProvider from "../endpoint";
@@ -98,6 +99,8 @@ async function setupPlatform() {
 		overrideCallback
 	});
 
+	await updateButtonColorScheme();
+
 	platformInitialized = true;
 }
 

how-to/customize-workspace/client/src/framework/shapes/browser-shapes.ts

@@ -8,7 +8,6 @@ import type {
 export interface ToolbarButtonDefinition {
 	id: string;
 	include: boolean;
-	themes?: { [key: string]: string };
 	button: ToolbarButton & { iconUrl?: string };
 	conditions?: string[];
 }

how-to/customize-workspace/client/src/framework/shapes/module-shapes.ts

@@ -1,8 +1,6 @@
-import type {
-	CustomPaletteSet,
-	CustomThemeOptions
-} from "@openfin/workspace-platform/common/src/api/theming";
+import type { CustomPaletteSet } from "@openfin/workspace/common/src/api/theming";
 import type { LoggerCreator } from "./logger-shapes";
+import type { ColorSchemeMode } from "./theme-shapes";
 
 /**
  * List of modules.
@@ -74,9 +72,14 @@ export interface ModuleHelpers {
 	getDefaultPalettes(): Promise<{ [id: string]: CustomPaletteSet }>;
 
 	/**
-	 * Get the current theme.
+	 * Get the current palette.
 	 */
-	getCurrentTheme(): Promise<CustomThemeOptions>;
+	getCurrentPalette(): Promise<CustomPaletteSet>;
+
+	/**
+	 * Get the current color scheme.
+	 */
+	getCurrentColorSchemeMode(): Promise<ColorSchemeMode>;
 }
 
 /**

how-to/customize-workspace/client/src/framework/shapes/theme-shapes.ts

@@ -3,3 +3,8 @@ import type { CustomThemeOptions } from "@openfin/workspace/common/src/api/themi
 export interface ThemeProviderOptions {
 	themes: CustomThemeOptions[];
 }
+
+export enum ColorSchemeMode {
+	Light = "light",
+	Dark = "dark"
+}