fix(web): label keybinding condition removal actions (#8664)

Rakshith Bhat committed 2 months ago

Commit a1a2bb11 parent e9db39c3 files · +68 −30Browse files

Unified · Split

3 files

apps/web/src/components/settings/KeybindingsSettings.logic.test.ts +14 −0
apps/web/src/components/settings/KeybindingsSettings.logic.ts +8 −0
apps/web/src/components/settings/KeybindingsSettings.tsx +46 −30

apps/web/src/components/settings/KeybindingsSettings.logic.test.ts+14−0

@@ -12,6 +12,7 @@ import { · 11 unmodified lines
12	12	shortcutToKeybindingInput,
13	13	unknownWhenVariables,
14	14	whenAstToExpression,
	15	+ whenNodeRemoveLabel,
15	16	} from "./KeybindingsSettings.logic";
16	17
17	18	describe("KeybindingsSettings.logic", () => {
@@ -120,6 +121,19 @@ describe("KeybindingsSettings.logic", () => { · 102 unmodified lines
120	121	});
121	122	});
122	123
	124	+ it("describes the scope of each visual expression removal", () => {
	125	+ const condition = { type: "identifier", name: "terminalFocus" } as const;
	126	+ const negatedCondition = { type: "not", node: condition } as const;
	127	+ const group = { type: "and", left: condition, right: negatedCondition } as const;
	128	+ const negatedGroup = { type: "not", node: group } as const;
	129	+
	130	+ expect(whenNodeRemoveLabel(group, 0)).toBe("Clear all conditions");
	131	+ expect(whenNodeRemoveLabel(condition, 1)).toBe("Remove condition");
	132	+ expect(whenNodeRemoveLabel(negatedCondition, 1)).toBe("Remove condition");
	133	+ expect(whenNodeRemoveLabel(group, 1)).toBe("Remove group and its conditions");
	134	+ expect(whenNodeRemoveLabel(negatedGroup, 1)).toBe("Remove group and its conditions");
	135	+ });
	136	+
123	137	it("formats static and project script command labels", () => {
124	138	expect(commandLabel("commandPalette.toggle")).toBe("Command Palette: Toggle");
125	139	expect(commandLabel("themeEditor.toggle")).toBe("Theme Editor: Toggle");

apps/web/src/components/settings/KeybindingsSettings.logic.ts+8−0

@@ -68,6 +68,14 @@ export function whenAstToExpression(node: KeybindingWhenNode \| undefined): strin · 67 unmodified lines
68	68	}
69	69	}
70	70
	71	+export function whenNodeRemoveLabel(node: KeybindingWhenNode, depth: number): string {
	72	+ if (depth === 0) return "Clear all conditions";
	73	+ if (node.type === "identifier" \|\| (node.type === "not" && node.node.type === "identifier")) {
	74	+ return "Remove condition";
	75	+ }
	76	+ return "Remove group and its conditions";
	77	+}
	78	+
71	79	function wrapWhenExpression(node: KeybindingWhenNode): string {
72	80	if (node.type === "identifier" \|\| node.type === "not") return whenAstToExpression(node);
73	81	return `(${whenAstToExpression(node)})`;

apps/web/src/components/settings/KeybindingsSettings.tsx+46−30

@@ -67,6 +67,7 @@ import { · 66 unmodified lines
67	67	type WhenVariableOption,
68	68	unknownWhenVariables,
69	69	whenAstToExpression,
	70	+ whenNodeRemoveLabel,
70	71	} from "./KeybindingsSettings.logic";
71	72	import { SettingsPageContainer, SettingsRow, SettingsSection } from "./settingsLayout";
72	73	import { searchableSetting } from "./settingsSearch";
@@ -349,6 +350,37 @@ function WhenVariableSelect({ · 276 unmodified lines
349	350	);
350	351	}
351	352
	353	+function WhenExpressionRemoveButton({
	354	+ label,
	355	+ className,
	356	+ onRemove,
	357	+}: {
	358	+ label: string;
	359	+ className?: string \| undefined;
	360	+ onRemove: () => void;
	361	+}) {
	362	+ return (
	363	+ <Tooltip>
	364	+ <TooltipTrigger
	365	+ delay={200}
	366	+ render={
	367	+ <Button
	368	+ type="button"
	369	+ variant="ghost"
	370	+ size="icon-sm"
	371	+ className={cn("size-7", className)}
	372	+ aria-label={label}
	373	+ onClick={onRemove}
	374	+ />
	375	+ }
	376	+ >
	377	+ <MinusIcon aria-hidden className="size-3.5" />
	378	+ </TooltipTrigger>
	379	+ <TooltipPopup side="top">{label}</TooltipPopup>
	380	+ </Tooltip>
	381	+ );
	382	+}
	383	+
352	384	function WhenExpressionNodeEditor({
353	385	node,
354	386	variables,
@@ -388,16 +420,10 @@ function WhenExpressionNodeEditor({ · 33 unmodified lines
388	420	onChange={(value) => onChange(setConditionIdentifier(node, value))}
389	421	/>
390	422	{onRemove ? (
391		− <Button
392		− type="button"
393		− variant="ghost"
394		− size="icon-sm"
395		− className="size-7"
396		− aria-label="Remove condition"
397		− onClick={onRemove}
398		− >
399		− <MinusIcon className="size-3.5" />
400		− </Button>
	423	+ <WhenExpressionRemoveButton
	424	+ label={whenNodeRemoveLabel(node, depth)}
	425	+ onRemove={onRemove}
	426	+ />
401	427	) : null}
402	428	</div>
403	429	);
@@ -423,16 +449,11 @@ function WhenExpressionNodeEditor({ · 19 unmodified lines
423	449	Not
424	450	</Toggle>
425	451	{onRemove ? (
426		− <Button
427		− type="button"
428		− variant="ghost"
429		− size="icon-sm"
430		− className="ml-auto size-7"
431		− aria-label="Remove negated group"
432		− onClick={onRemove}
433		− >
434		− <MinusIcon className="size-3.5" />
435		− </Button>
	452	+ <WhenExpressionRemoveButton
	453	+ label={whenNodeRemoveLabel(node, depth)}
	454	+ className="ml-auto"
	455	+ onRemove={onRemove}
	456	+ />
436	457	) : null}
437	458	</div>
438	459	<div className="relative pl-4">
@@ -546,16 +567,11 @@ function WhenExpressionNodeEditor({ · 107 unmodified lines
546	567	Group
547	568	</Button>
548	569	{onRemove ? (
549		− <Button
550		− type="button"
551		− variant="ghost"
552		− size="icon-sm"
553		− className="ml-auto size-7"
554		− aria-label="Remove group"
555		− onClick={onRemove}
556		− >
557		− <MinusIcon className="size-3.5" />
558		− </Button>
	570	+ <WhenExpressionRemoveButton
	571	+ label={whenNodeRemoveLabel(node, depth)}
	572	+ className="ml-auto"
	573	+ onRemove={onRemove}
	574	+ />
559	575	) : null}
560	576	</div>
561	577	<div className="space-y-2">