fix(dock) maintain order of workspace components buttons

how-to/workspace-platform-starter/CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added an example of navigating content using navigation controls. Enabled through default window options in the main [manifest.fin.json](./public/manifest.fin.json) and in our developer docs snapshot [developer.snapshot.fin.json](./public/common/snapshots/developer.snapshot.fin.json)
 - Fixed an issue where the order of entries within dock would change when toggling between light and dark theme.
 - Improved performance when switching themes
+- Fixed an issue where the order of Workspace component entries within dock may change when toggling between light and dark theme.
 
 ## v16.1.0
 

how-to/workspace-platform-starter/client/src/framework/workspace/dock.ts

@@ -140,7 +140,9 @@ async function buildDockProvider(buttons: DockButton[]): Promise<DockProvider |
 			id: dockProviderOptions.id,
 			title: dockProviderOptions.title,
 			icon: dockProviderOptions.icon,
-			workspaceComponents: buildWorkspaceButtons(),
+			workspaceComponents: buildWorkspaceButtons(
+				Array.isArray(registration?.workspaceComponents) ? registration?.workspaceComponents : undefined
+			),
 			disableUserRearrangement: dockProviderOptions?.disableUserRearrangement ?? false,
 			buttons: objectClone(registeredButtons)
 		};
@@ -149,31 +151,45 @@ async function buildDockProvider(buttons: DockButton[]): Promise<DockProvider |
 
 /**
  * Build the workspace buttons based on config.
+ * @param previousOrder The previous order of workspace buttons.
  * @returns The list of workspace buttons.
  */
-function buildWorkspaceButtons(): WorkspaceButton[] {
-	const workspaceButtons: WorkspaceButton[] = [];
+function buildWorkspaceButtons(previousOrder: WorkspaceButton[] = []): WorkspaceButton[] {
+	const workspaceButtonsSet = new Set<WorkspaceButton>();
 
 	if (!(dockProviderOptions?.workspaceComponents?.hideWorkspacesButton ?? false)) {
-		workspaceButtons.push("switchWorkspace");
+		workspaceButtonsSet.add("switchWorkspace");
 	}
 	if (
 		!(dockProviderOptions?.workspaceComponents?.hideHomeButton ?? false) &&
 		(registeredBootstrapOptions?.home ?? false)
 	) {
-		workspaceButtons.push("home");
+		workspaceButtonsSet.add("home");
 	}
 	if (
 		!(dockProviderOptions?.workspaceComponents?.hideNotificationsButton ?? false) &&
 		(registeredBootstrapOptions?.notifications ?? false)
 	) {
-		workspaceButtons.push("notifications");
+		workspaceButtonsSet.add("notifications");
 	}
 	if (
 		!(dockProviderOptions?.workspaceComponents?.hideStorefrontButton ?? false) &&
 		(registeredBootstrapOptions?.store ?? false)
 	) {
-		workspaceButtons.push("store");
+		workspaceButtonsSet.add("store");
+	}
+
+	const workspaceButtons: WorkspaceButton[] = [];
+
+	for (const button of previousOrder) {
+		if (workspaceButtonsSet.has(button)) {
+			workspaceButtons.push(button);
+			workspaceButtonsSet.delete(button);
+		}
+	}
+
+	if (workspaceButtonsSet.size > 0) {
+		workspaceButtons.push(...workspaceButtonsSet);
 	}
 
 	return workspaceButtons;
@@ -581,7 +597,9 @@ export async function loadConfig(
 		// Always build the workspace buttons based on the config,
 		// otherwise loaded config can show buttons that it is
 		// not supposed to
-		config.workspaceComponents = buildWorkspaceButtons();
+		config.workspaceComponents = buildWorkspaceButtons(
+			Array.isArray(config.workspaceComponents) ? config.workspaceComponents : undefined
+		);
 	}
 
 	return config;
@@ -618,11 +636,21 @@ export async function saveConfig(
 		}
 
 		// add any remaining buttons that we failed to find in the config
-		orderedButtons.push(...currentButtons.values());
+		const remainingButtons = currentButtons.values();
+		if (currentButtons.size > 0) {
+			logger.warn(
+				`Failed to find ${currentButtons.size} buttons in the new config, they will be appended to the end of the dock`
+			);
+		}
+		orderedButtons.push(...remainingButtons);
 
 		dockProviderOptions.entries = orderedButtons;
 	}
 
+	if (registration?.workspaceComponents) {
+		registration.workspaceComponents = config.workspaceComponents;
+	}
+
 	logger.info(`Checking for custom dock storage with endpoint id: ${DOCK_ENDPOINT_ID_SET}`);
 
 	if (endpointProvider.hasEndpoint(DOCK_ENDPOINT_ID_SET)) {