vscode/extensions/copilot/test/simulation/workbench/components/app.tsx

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

import { Checkbox, FluentProvider, MessageBar, MessageBarBody, MessageBarTitle, Text, ToggleButton, Tooltip, webDarkTheme, webLightTheme } from '@fluentui/react-components';
import { ListBar20Filled, ListBarTree20Filled } from '@fluentui/react-icons';
import * as mobx from 'mobx';
import * as mobxlite from 'mobx-react-lite';
import * as React from 'react';
import { InitArgs } from '../initArgs';
import { AdhocRequestOptions } from '../stores/adhocRequestOptions';
import { AdhocRequestSender } from '../stores/adhocRequestSender';
import { AMLProvider } from '../stores/amlSimulations';
import { NesExternalOptions } from '../stores/nesExternalOptions';
import { RunnerOptions } from '../stores/runnerOptions';
import { SimulationRunsProvider } from '../stores/simulationBaseline';
import { SimulationRunner } from '../stores/simulationRunner';
import { SimulationStorage, SimulationStorageValue } from '../stores/simulationStorage';
import { ISimulationTest, SimulationTestsProvider } from '../stores/simulationTestsProvider';
import { useLocalStorageState } from '../stores/storage';
import { TestSource } from '../stores/testSource';
import { WorkbenchModeValue } from '../stores/workbenchMode';
import { AdhocRequestView } from './adhocRequestView';
import { ContextMenu, ContextMenuProvider } from './contextMenu';
import { Scorecard } from './scorecard';
import { ScorecardByLanguage } from './scorecardByLanguage';
import { TestFilterer } from './testFilterer';
import { TestList } from './testList';
import { Toolbar } from './toolbar';

type Props = {
	initArgs: InitArgs | undefined;
	testsProvider: SimulationTestsProvider;
	workbenchMode: WorkbenchModeValue;
	runner: SimulationRunner;
	runnerOptions: RunnerOptions;
	nesExternalOptions: NesExternalOptions;
	adhocRequestOptions: AdhocRequestOptions;
	adhocRequestSender: AdhocRequestSender;
	simulationRunsProvider: SimulationRunsProvider;
	amlProvider: AMLProvider;
	displayOptions: DisplayOptions;
};

export type ThemeKind = 'light' | 'dark';

export const App = mobxlite.observer(
	({ initArgs, testsProvider, workbenchMode, runner, runnerOptions, nesExternalOptions, adhocRequestOptions, adhocRequestSender, simulationRunsProvider, amlProvider, displayOptions }: Props) => {

		const [theme, setTheme] = useLocalStorageState<ThemeKind>('appTheme', undefined, 'light');

		const [filterer, setFilterer] = React.useState<TestFilterer | undefined>(undefined);

		const toggleTheme = React.useCallback(() => setTheme(theme === 'dark' ? 'light' : 'dark'), [theme]);

		const isAdhocRequest = workbenchMode.value === 'adhocRequest';

		return (
			<FluentProvider theme={theme === 'light' ? webLightTheme : webDarkTheme} style={{ minHeight: 'inherit' }}>
				<ContextMenuProvider>
					<div>
						<ContextMenu />
						<Toolbar
							initArgs={initArgs}
							runner={runner}
							runnerOptions={runnerOptions}
							nesExternalOptions={nesExternalOptions}
							simulationRunsProvider={simulationRunsProvider}
							simulationTestsProvider={testsProvider}
							amlProvider={amlProvider}
							workbenchMode={workbenchMode}
							testSource={testsProvider.testSource}
							onFiltererChange={setFilterer}
							allLanguageIds={testsProvider.allLanguageIds}
							theme={theme}
							toggleTheme={toggleTheme}
						/>
						{isAdhocRequest ? (
							<AdhocRequestView adhocRequestOptions={adhocRequestOptions} adhocRequestSender={adhocRequestSender} />
						) : (
							<TestsView
								testsProvider={testsProvider}
								runner={runner}
								runnerOptions={runnerOptions}
								nesExternalOptions={nesExternalOptions}
								amlProvider={amlProvider}
								displayOptions={displayOptions}
								filterer={filterer}
							/>
						)}
					</div>
				</ContextMenuProvider>
			</FluentProvider>
		);
	}
);

type TestsViewProps = {
	testsProvider: SimulationTestsProvider;
	runner: SimulationRunner;
	runnerOptions: RunnerOptions;
	nesExternalOptions: NesExternalOptions;
	amlProvider: AMLProvider;
	displayOptions: DisplayOptions;
	filterer: TestFilterer | undefined;
};

const TestsView = mobxlite.observer(({ testsProvider, runner, runnerOptions, nesExternalOptions, amlProvider, displayOptions, filterer }: TestsViewProps) => {

	const displayedTests = filterer
		? filterer.filter(testsProvider.tests)
		: testsProvider.tests;

	return (
		<>
			{testsProvider.testSource.value === TestSource.External && (
				<Scorecard amlProvider={amlProvider} />
			)}
			{testsProvider.testSource.value === TestSource.External && (
				<ScorecardByLanguage amlProvider={amlProvider} />
			)}
			{(testsProvider.testSource.value === TestSource.Local || testsProvider.testSource.value === TestSource.NesExternal) && <TerminationMessageBar runner={runner} />}
			<div style={{ margin: '5px', display: 'flex', justifyContent: 'space-between' }}>
				<div style={{ textAlign: 'left' }}>
					<TestsInfo tests={testsProvider.tests} displayedTests={displayedTests} />
				</div>
				<div style={{ textAlign: 'right' }}>
					<Checkbox
						label='Expand prompts'
						defaultChecked={displayOptions.expandPrompts.value}
						onChange={mobx.action(() => displayOptions.expandPrompts.value = !displayOptions.expandPrompts.value)}
					/>
					<DisplayToggle displayOptions={displayOptions} />
				</div>
			</div>
			<TestList tests={displayedTests} runner={runner} runnerOptions={runnerOptions} nesExternalOptions={nesExternalOptions} testSource={testsProvider.testSource} displayOptions={displayOptions} />
		</>
	);
});

const TerminationMessageBar = mobxlite.observer(({ runner }: { runner: SimulationRunner }) =>
	runner.terminationReason === undefined
		? null
		: (
			<MessageBar intent='error' layout='singleline'>
				<MessageBarBody>
					<MessageBarTitle>Simulation terminated early</MessageBarTitle>
					<pre>{runner.terminationReason} </pre>
				</MessageBarBody>
			</MessageBar>
		)
);

const DisplayToggle = mobxlite.observer(({ displayOptions }: { displayOptions: DisplayOptions }) => (
	<Tooltip content='Show all tests or by suites' relationship='label'>
		<ToggleButton
			icon={displayOptions.testsKind.value === 'suiteList' ? <ListBarTree20Filled /> : <ListBar20Filled />}
			onClick={mobx.action(() => displayOptions.testsKind.value = displayOptions.testsKind.value === 'suiteList' ? 'testList' : 'suiteList')}
		/>
	</Tooltip>
));

export class DisplayOptions {

	public testsKind: SimulationStorageValue<'suiteList' | 'testList'>;

	public expandPrompts: SimulationStorageValue<boolean>;

	constructor(storage: SimulationStorage) {
		this.testsKind = new SimulationStorageValue(storage, 'displayTestsKind', 'suiteList');
		this.expandPrompts = new SimulationStorageValue(storage, 'expandPrompts', false);
	}
}

type TestsInfoProps = {
	tests: readonly ISimulationTest[];
	displayedTests: readonly ISimulationTest[];
};

const TestsInfo = mobxlite.observer(({ tests, displayedTests }: TestsInfoProps) => {
	// TODO@ulugbekna: don't show "failing" if tests weren't run yet
	return (
		<Text size={400}>
			# of tests: {tests.length} (<span>displayed:</span> {displayedTests.length})
		</Text>
	);
});