addons/vscode/webview/VSCodeSettings.tsxblame
View source
b69ab311/**
b69ab312 * Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab313 *
b69ab314 * This source code is licensed under the MIT license found in the
b69ab315 * LICENSE file in the root directory of this source tree.
b69ab316 */
b69ab317
b69ab318import type {Json} from 'shared/typeUtils';
b69ab319
b69ab3110import {Checkbox} from 'isl-components/Checkbox';
b69ab3111import {Dropdown} from 'isl-components/Dropdown';
b69ab3112import {Column} from 'isl-components/Flex';
b69ab3113import {Tooltip} from 'isl-components/Tooltip';
b69ab3114import {shouldWarnAboutDiagnosticsAtom} from 'isl/src/Diagnostics';
b69ab3115import {Setting} from 'isl/src/Setting';
b69ab3116import {T, t} from 'isl/src/i18n';
b69ab3117import {writeAtom} from 'isl/src/jotaiUtils';
b69ab3118import {atom, useAtom, useAtomValue} from 'jotai';
b69ab3119import serverAPI from '../../isl/src/ClientToServerAPI';
b69ab3120import {ComparisonPanelMode, comparisonPanelMode, setComparisonPanelMode} from './state';
b69ab3121
b69ab3122export default function VSCodeSettings() {
b69ab3123 const panelMode = useAtomValue(comparisonPanelMode);
b69ab3124 const [openBesides, setOpenBesides] = useAtom(openBesidesSetting);
b69ab3125 const [checkDiagnostics, setCheckDiagnostics] = useAtom(shouldWarnAboutDiagnosticsAtom);
b69ab3126 return (
b69ab3127 <Setting title={<T>VS Code Settings</T>}>
b69ab3128 <Column alignStart>
b69ab3129 <Tooltip
b69ab3130 title={t(
b69ab3131 'Whether to always open a separate panel to view comparisons, or to open the comparison inside an existing ISL window.',
b69ab3132 )}>
b69ab3133 <div className="dropdown-container setting-inline-dropdown">
b69ab3134 <label>
b69ab3135 <T>Comparison Panel Mode</T>
b69ab3136 </label>
b69ab3137 <Dropdown
b69ab3138 options={Object.values(ComparisonPanelMode).map(name => ({name, value: name}))}
b69ab3139 value={panelMode}
b69ab3140 onChange={event =>
b69ab3141 setComparisonPanelMode(event.currentTarget.value as ComparisonPanelMode)
b69ab3142 }
b69ab3143 />
b69ab3144 </div>
b69ab3145 </Tooltip>
b69ab3146 <Tooltip
b69ab3147 title={t(
b69ab3148 'If true, files, diffs, and comparisons will open beside the existing ISL panel instead of in the same View Column. Useful to keep ISL open and visible when clicking on files.',
b69ab3149 )}>
b69ab3150 <Checkbox checked={openBesides} onChange={checked => setOpenBesides(checked)}>
b69ab3151 <T>Open Besides</T>
b69ab3152 </Checkbox>
b69ab3153 </Tooltip>
b69ab3154 <Tooltip
b69ab3155 title={t(
b69ab3156 'If true, check VS Code language diagnostics for the files that would be committed / amended. This is best-effort, and only works on files that are already open in VS Code.',
b69ab3157 )}>
b69ab3158 <Checkbox checked={checkDiagnostics} onChange={checked => setCheckDiagnostics(checked)}>
b69ab3159 <T>Check diagnostics before committing / amending</T>
b69ab3160 </Checkbox>
b69ab3161 </Tooltip>
b69ab3162 </Column>
b69ab3163 </Setting>
b69ab3164 );
b69ab3165}
b69ab3166
b69ab3167const openBesidesSetting = vscodeConfigBackedAtom<boolean>('sapling.isl.openBeside', false);
b69ab3168
b69ab3169function vscodeConfigBackedAtom<T extends Json>(
b69ab3170 configName: string,
b69ab3171 defaultValue: T,
b69ab3172 scope: 'global' | 'workspace' = 'global',
b69ab3173) {
b69ab3174 const primitiveAtom = atom<T>(defaultValue);
b69ab3175
b69ab3176 serverAPI.postMessage({
b69ab3177 type: 'platform/subscribeToVSCodeConfig',
b69ab3178 config: configName,
b69ab3179 });
b69ab3180 serverAPI.onMessageOfType('platform/vscodeConfigChanged', config => {
b69ab3181 if (config.config === configName) {
b69ab3182 writeAtom(primitiveAtom, config.value as T);
b69ab3183 }
b69ab3184 });
b69ab3185
b69ab3186 return atom<T, [T | ((prev: T) => T)], void>(
b69ab3187 get => get(primitiveAtom),
b69ab3188 (get, set, update) => {
b69ab3189 const newValue = typeof update === 'function' ? update(get(primitiveAtom)) : update;
b69ab3190 set(primitiveAtom, newValue);
b69ab3191 serverAPI.postMessage({
b69ab3192 type: 'platform/setVSCodeConfig',
b69ab3193 config: configName,
b69ab3194 value: newValue,
b69ab3195 scope,
b69ab3196 });
b69ab3197 },
b69ab3198 );
b69ab3199}