Blame · TopBar.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import {Button} from 'isl-components/Button';
b69ab31	9	import {FlexSpacer} from 'isl-components/Flex';
b69ab31	10	import {Icon} from 'isl-components/Icon';
b69ab31	11	import {DOCUMENTATION_DELAY, Tooltip} from 'isl-components/Tooltip';
b69ab31	12	import {useAtomValue} from 'jotai';
b69ab31	13	import {clearTrackedCache} from 'shared/LRU';
b69ab31	14	import {BookmarksManagerMenu} from './BookmarksManager';
b69ab31	15	import {BugButton} from './BugButton';
b69ab31	16	import {BulkActionsMenu} from './BulkActionsMenu';
b69ab31	17	import serverAPI from './ClientToServerAPI';
b69ab31	18	import {CwdSelector} from './CwdSelector';
b69ab31	19	import {DownloadCommitsTooltipButton} from './DownloadCommitsMenu';
b69ab31	20	import {FocusModeToggle} from './FocusMode';
b69ab31	21	import {generatedFileCache} from './GeneratedFile';
b69ab31	22	import {PullButton} from './PullButton';
b69ab31	23	import {SettingsGearButton} from './SettingsTooltip';
b69ab31	24	import {ShelvedChangesMenu} from './ShelvedChanges';
b69ab31	25	import {tracker} from './analytics';
b69ab31	26	import {DebugToolsButton} from './debug/DebugToolsButton';
b69ab31	27	import {T} from './i18n';
b69ab31	28	import {maybeRemoveForgottenOperation, useClearAllOptimisticState} from './operationsState';
4bb999b	29	import {applicationinfo, haveCommitsLoadedYet, haveRemotePath, isFetchingCommits, watchmanStatus} from './serverAPIState';
b69ab31	30
b69ab31	31	import {Internal} from './Internal';
b69ab31	32	import './TopBar.css';
b69ab31	33
b69ab31	34	export function TopBar() {
b69ab31	35	const loaded = useAtomValue(haveCommitsLoadedYet);
b69ab31	36	const canPush = useAtomValue(haveRemotePath);
4bb999b	37	const appInfo = useAtomValue(applicationinfo);
4bb999b	38	const readOnly = appInfo?.readOnly ?? false;
b69ab31	39
b69ab31	40	if (!loaded) {
b69ab31	41	return null;
b69ab31	42	}
b69ab31	43	return (
b69ab31	44	<div className="top-bar">
b69ab31	45	<span className="button-group">
4bb999b	46	{readOnly && <span className="read-only-badge"><T>Read-only</T></span>}
4bb999b	47	{!readOnly && canPush && <PullButton />}
b69ab31	48	<CwdSelector />
4bb999b	49	{!readOnly && <DownloadCommitsTooltipButton />}
4bb999b	50	{!readOnly && <ShelvedChangesMenu />}
4bb999b	51	{!readOnly && <BulkActionsMenu />}
4bb999b	52	{!readOnly && <BookmarksManagerMenu />}
4bb999b	53	{!readOnly && Internal.FullRepoBranchButton && <Internal.FullRepoBranchButton />}
b69ab31	54	<FetchingDataIndicator />
b69ab31	55	</span>
b69ab31	56	<span className="button-group">
b69ab31	57	<FlexSpacer />
4bb999b	58	{!readOnly && <DebugToolsButton />}
4fe1f34	59	<WatchmanStatusIndicator />
b69ab31	60	<FocusModeToggle />
4bb999b	61	{!readOnly && <BugButton />}
b69ab31	62	<SettingsGearButton />
b69ab31	63	<RefreshButton />
b69ab31	64	</span>
b69ab31	65	</div>
b69ab31	66	);
b69ab31	67	}
b69ab31	68
b69ab31	69	function FetchingDataIndicator() {
b69ab31	70	const isFetching = useAtomValue(isFetchingCommits);
b69ab31	71	return <Icon icon={isFetching ? 'loading' : 'blank'} />;
b69ab31	72	}
b69ab31	73
4fe1f34	74	function WatchmanStatusIndicator() {
4fe1f34	75	const status = useAtomValue(watchmanStatus);
4fe1f34	76	if (status == null) {
4fe1f34	77	return null;
4fe1f34	78	}
4fe1f34	79	const titles: Record<string, string> = {
4fe1f34	80	healthy: 'Watchman is active. Repository changes are detected instantly.',
4fe1f34	81	initializing: 'Watchman is initializing. Auto-refresh may be delayed.',
4fe1f34	82	reconnecting: 'Watchman is reconnecting. Auto-refresh may be delayed.',
4fe1f34	83	errored: 'Watchman encountered an error. Falling back to polling for changes.',
4fe1f34	84	ended: 'Watchman has stopped. Falling back to polling for changes.',
4fe1f34	85	unavailable: 'Watchman is not installed. Falling back to polling for changes.',
4fe1f34	86	};
4fe1f34	87	const isHealthy = status === 'healthy';
4fe1f34	88	return (
4fe1f34	89	<Tooltip placement="bottom" title={titles[status] ?? 'Watchman status unknown'}>
4fe1f34	90	<Button icon>
4fe1f34	91	<Icon
4fe1f34	92	icon={isHealthy ? 'eye' : 'warning'}
4fe1f34	93	style={{color: isHealthy ? '#4d8a78' : 'var(--warning-foreground)'}}
4fe1f34	94	/>
4fe1f34	95	</Button>
4fe1f34	96	</Tooltip>
4fe1f34	97	);
4fe1f34	98	}
4fe1f34	99
b69ab31	100	function RefreshButton() {
b69ab31	101	const clearOptimisticState = useClearAllOptimisticState();
b69ab31	102	return (
b69ab31	103	<Tooltip
b69ab31	104	delayMs={DOCUMENTATION_DELAY}
b69ab31	105	placement="bottom"
b69ab31	106	title={<T>Re-fetch latest commits and uncommitted changes.</T>}>
b69ab31	107	<Button
b69ab31	108	onClick={() => {
b69ab31	109	tracker.track('ClickedRefresh');
b69ab31	110	clearOptimisticState();
b69ab31	111	maybeRemoveForgottenOperation();
b69ab31	112	generatedFileCache.clear(); // allow generated files to be rechecked
b69ab31	113	serverAPI.postMessage({type: 'refresh'});
b69ab31	114	clearTrackedCache();
b69ab31	115	}}
b69ab31	116	data-testid="refresh-button">
b69ab31	117	<Icon icon="refresh" />
b69ab31	118	</Button>
b69ab31	119	</Tooltip>
b69ab31	120	);
b69ab31	121	}