feat(devtools-view): Add interactive UI for devtools-view (#25189)

#### Description

Part 3 of
[24885](#24885)

This PR primarily adds intuitive UI effects for the `devtools-view`
package.

Changes include:
- Render a red icon on the left of the Container item to show the item
with the latest change in underlying data
- Render Container state icon (disconnect & closed) 
- Supports removingt the container instance with closed state
- Added the data-visualization `reason` in `devtools-core` package to
distinguish between user clicking the devtools-pane and the actual data
change

# [Demo
Video](https://microsoft-my.sharepoint-df.com/:v:/p/jihyungkim/Efefvu4-1ExNpEuNOnYodDIBWkACRi6BZTmsGHx_Ppfn8g?e=MG4jqI&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D)

---------

Co-authored-by: Joshua Smithrud <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

packages/tools/devtools/devtools-core/package.json

@@ -117,8 +117,10 @@
 		"@fluidframework/cell": "workspace:~",
 		"@fluidframework/container-definitions": "workspace:~",
 		"@fluidframework/container-loader": "workspace:~",
+		"@fluidframework/container-runtime": "workspace:~",
 		"@fluidframework/container-runtime-definitions": "workspace:~",
 		"@fluidframework/core-interfaces": "workspace:~",
+		"@fluidframework/core-utils": "workspace:~",
 		"@fluidframework/counter": "workspace:~",
 		"@fluidframework/datastore-definitions": "workspace:~",
 		"@fluidframework/driver-definitions": "workspace:~",

packages/tools/devtools/devtools-core/src/BaseDevtools.ts

@@ -124,6 +124,7 @@ export abstract class BaseDevtools<TContainer extends DecomposedContainer>
 		return {
 			containerKey: this.containerKey,
 			attachState: this.container.attachState,
+			isReadOnly: this.container.readOnlyInfo?.readonly,
 			connectionState: this.container.connectionState,
 			closed: this.container.closed,
 			clientId: this.container.clientId,
@@ -223,7 +224,11 @@ export abstract class BaseDevtools<TContainer extends DecomposedContainer>
 
 	protected readonly dataUpdateHandler = (visualization: FluidObjectNode): void => {
 		// This is called when actual data changes occur - should trigger blinking
-		this.postDataVisualization(visualization.fluidObjectId, visualization);
+		this.postDataVisualization(
+			visualization.fluidObjectId,
+			visualization,
+			DataVisualization.UpdateReason.DataChanged,
+		);
 	};
 
 	// #endregion
@@ -274,7 +279,11 @@ export abstract class BaseDevtools<TContainer extends DecomposedContainer>
 				if (message.data.containerKey === this.containerKey) {
 					const visualization = await this.getDataVisualization(message.data.fluidObjectId);
 					// This is a user-requested visualization - should NOT trigger blinking
-					this.postDataVisualization(message.data.fluidObjectId, visualization);
+					this.postDataVisualization(
+						message.data.fluidObjectId,
+						visualization,
+						DataVisualization.UpdateReason.UserRequested,
+					);
 					return true;
 				}
 				return false;
@@ -371,13 +380,15 @@ export abstract class BaseDevtools<TContainer extends DecomposedContainer>
 	protected readonly postDataVisualization = (
 		fluidObjectId: FluidObjectId,
 		visualization: FluidObjectNode | undefined,
+		reason: DataVisualization.UpdateReason,
 	): void => {
 		postMessagesToWindow(
 			this.messageLoggingOptions,
 			DataVisualization.createMessage({
 				containerKey: this.containerKey,
 				fluidObjectId,
 				visualization,
+				reason,
 			}),
 		);
 	};

packages/tools/devtools/devtools-core/src/ContainerMetadata.ts

@@ -29,6 +29,13 @@ export interface ContainerStateMetadata extends HasContainerKey {
 	 */
 	connectionState: ConnectionState;
 
+	/**
+	 * Whether or not the Container is in read-only mode.
+	 *
+	 * @remarks Will be undefined if the readonly state is not yet known.
+	 */
+	isReadOnly?: boolean;
+
 	/**
 	 * {@inheritDoc @fluidframework/container-definitions#IContainer.clientId}
 	 */

packages/tools/devtools/devtools-core/src/ContainerRuntimeDevtools.ts

@@ -10,8 +10,10 @@ import type {
 	IContainerEvents,
 } from "@fluidframework/container-definitions/internal";
 import { ConnectionState } from "@fluidframework/container-loader";
+import { ContainerRuntime } from "@fluidframework/container-runtime/internal";
 import type { IContainerRuntime } from "@fluidframework/container-runtime-definitions/internal";
 import type { IFluidLoadable } from "@fluidframework/core-interfaces";
+import { assert } from "@fluidframework/core-utils/internal";
 
 import { BaseDevtools } from "./BaseDevtools.js";
 import type { ContainerKey } from "./CommonInterfaces.js";
@@ -155,10 +157,20 @@ export class DecomposedContainerForContainerRuntime
 	}
 
 	public get connectionState(): ConnectionState {
+		// Normal connection state logic - readonly state is handled separately via readOnlyInfo
 		return this.runtime.connected ? ConnectionState.Connected : ConnectionState.Disconnected;
 	}
 
 	public get closed(): boolean {
 		return this._disposed; // IContainerRuntime doesn't have a "closed" state - only "disconnected" (reconnectable) and "disposed" (permanent)
 	}
+
+	public get readOnlyInfo(): { readonly readonly?: boolean } {
+		// IContainerRuntime doesn't expose readonly in its interface, but the implementation has isReadOnly()
+		assert(
+			this.runtime instanceof ContainerRuntime,
+			"DecomposedContainerForContainerRuntime is not a ContainerRuntime",
+		);
+		return { readonly: this.runtime.isReadOnly() };
+	}
 }

packages/tools/devtools/devtools-core/src/DecomposedContainer.ts

@@ -56,4 +56,9 @@ export interface DecomposedContainer extends IEventProvider<IContainerEvents> {
 	 * {@inheritDoc @fluidframework/container-definitions#IContainer.close}
 	 */
 	close?(error?: ICriticalContainerError): void;
+
+	/**
+	 * {@inheritDoc @fluidframework/container-definitions#IContainer.readOnlyInfo}
+	 */
+	readonly readOnlyInfo?: { readonly readonly?: boolean };
 }

packages/tools/devtools/devtools-core/src/messaging/container-devtools-messages/DataVisualization.ts

@@ -20,6 +20,23 @@ export namespace DataVisualization {
 	 */
 	export const MessageType = "DATA_VISUALIZATION";
 
+	/**
+	 * Reasons why a DataVisualization message is being sent.
+	 *
+	 * @internal
+	 */
+	export const enum UpdateReason {
+		/**
+		 * Visualization was requested by user interaction (e.g., clicking to expand tree).
+		 */
+		UserRequested = "userRequested",
+
+		/**
+		 * Visualization updated due to actual data changes in the underlying shared object.
+		 */
+		DataChanged = "dataChanged",
+	}
+
 	/**
 	 * Message data format used by {@link DataVisualization.Message}.
 	 *
@@ -33,6 +50,11 @@ export namespace DataVisualization {
 		 * {@link HasFluidObjectId.fluidObjectId | ID}.
 		 */
 		visualization: FluidObjectNode | undefined;
+
+		/**
+		 * Reason for this visualization update.
+		 */
+		reason: UpdateReason;
 	}
 
 	/**

packages/tools/devtools/devtools-view/src/ContainerFeatureFlagHelper.ts

@@ -29,7 +29,7 @@ export const ContainerFeatureFlagContext = React.createContext<
 export function useContainerFeaturesContext(): ContainerFeatureFlagContextData {
 	const context = React.useContext(ContainerFeatureFlagContext);
 	if (context === undefined) {
-		throw new Error("TODO");
+		throw new Error("ContainerFeatureFlagContext not found");
 	}
 	return context;
 }

packages/tools/devtools/devtools-view/src/DevtoolsView.tsx

@@ -6,6 +6,7 @@
 import { FluentProvider, makeStyles, shorthands, tokens } from "@fluentui/react-components";
 import type { ITelemetryBaseLogger } from "@fluidframework/core-interfaces";
 import {
+	CloseContainer,
 	type ContainerKey,
 	ContainerList,
 	type DevtoolsFeatureFlags,
@@ -275,13 +276,28 @@ function _DevtoolsView(props: _DevtoolsViewProps): React.ReactElement {
 
 	const styles = useDevtoolsStyles();
 
+	/**
+	 * Handles removing a container from the list when the dismiss button is clicked.
+	 */
+	const handleRemoveContainer = React.useCallback(
+		(containerKey: ContainerKey): void => {
+			// Send message to client to remove container from tracking
+			messageRelay.postMessage(CloseContainer.createMessage({ containerKey }));
+
+			// Update local state to remove container from view
+			setContainers((prev) => prev?.filter((key) => key !== containerKey));
+		},
+		[messageRelay],
+	);
+
 	return (
 		<div className={styles.root}>
 			<Menu
 				currentSelection={menuSelection}
 				setSelection={setMenuSelection}
 				containers={containers}
 				supportedFeatures={supportedFeatures}
+				onRemoveContainer={handleRemoveContainer}
 			/>
 			<div style={{ width: "1px", backgroundColor: tokens.colorNeutralForeground1 }}></div>
 			<View menuSelection={menuSelection} containers={containers} />

packages/tools/devtools/devtools-view/src/components/ContainerSummaryView.tsx

@@ -139,44 +139,53 @@ function DataRow(props: DataRowProps): React.ReactElement {
 	);
 }
 
+function getStatusBadgeColor(status: string): "success" | "warning" | "danger" | "subtle" {
+	switch (status) {
+		case "Closed":
+		case "Detached":
+		case "Disconnected": {
+			return "danger";
+		}
+		case "Attaching":
+		case "Establishing connection":
+		case "Catching up": {
+			return "warning";
+		}
+		case "Connected":
+		case "Attached": {
+			return "success";
+		}
+		case "Read-only": {
+			return "subtle";
+		}
+		default: {
+			return "subtle";
+		}
+	}
+}
+
 function containerStatusValueCell(statusComponents: string[]): React.ReactElement {
-	return (
-		<TableCellLayout
-			media={((): JSX.Element => {
-				switch (statusComponents[0]) {
-					case AttachState.Attaching: {
-						return (
-							<Badge shape="rounded" color="warning">
-								{statusComponents[0]}
-							</Badge>
-						);
-					}
-					case AttachState.Detached: {
-						return (
-							<Badge shape="rounded" color="danger">
-								{statusComponents[0]}
-							</Badge>
-						);
-					}
-					default: {
-						return (
-							<Badge shape="rounded" color="success">
-								{statusComponents[0]}
-							</Badge>
-						);
-					}
-				}
-			})()}
-		>
-			{statusComponents[1] === "Connected" ? (
-				<Badge shape="rounded" color="success">
-					{statusComponents[1]}
+	// Show all states simultaneously in a single container
+	if (statusComponents.length === 0) {
+		return (
+			<TableCellLayout>
+				<Badge shape="rounded" color="subtle">
+					Unknown
 				</Badge>
-			) : (
-				<Badge shape="rounded" color="danger">
-					{statusComponents[1]}
-				</Badge>
-			)}
+			</TableCellLayout>
+		);
+	}
+
+	// Create a flex container to show all status badges side by side
+	return (
+		<TableCellLayout>
+			<div style={{ display: "flex", gap: "4px", flexWrap: "wrap" }}>
+				{statusComponents.map((status, index) => (
+					<Badge key={index} shape="rounded" color={getStatusBadgeColor(status)}>
+						{status}
+					</Badge>
+				))}
+			</div>
 		</TableCellLayout>
 	);
 }
@@ -295,22 +304,28 @@ export function ContainerSummaryView(props: ContainerSummaryViewProps): React.Re
 		usageLogger?.sendTelemetryEvent({ eventName: "CloseContainerButtonClicked" });
 	}
 
-	// Build up status string
+	// Build up status string - show all states simultaneously
 	const statusComponents: string[] = [];
-	if (closed) {
+	if (containerState.closed) {
 		statusComponents.push("Closed");
 	} else {
+		// Always show attach state
 		statusComponents.push(containerState.attachState);
-		if (containerState.attachState === AttachState.Attached) {
+
+		// Show connection state if applicable (regardless of readonly state)
+		if (
+			containerState.attachState === AttachState.Attached &&
+			containerState.connectionState !== undefined
+		) {
 			statusComponents.push(connectionStateToString(containerState.connectionState));
-		} else {
-			/*
-			 * If the container is not attached, it is not connected
-			 * TODO: If the container is detached, it is advisable to disable the action buttons
-			 * since Fluid will consistently fail to establish a connection with a detached container.
-			 */
+		} else if (containerState.attachState !== AttachState.Attached) {
+			// If not attached, show disconnected state
 			statusComponents.push(connectionStateToString(ConnectionState.Disconnected));
 		}
+
+		if (containerState.isReadOnly === true) {
+			statusComponents.push("Read-only");
+		}
 	}
 
 	return (