fix(web): remove duplicate provider update progress (#7761)

Naveed Iqbal committed 2 months ago

Commit 4e169df1 parent 5a7a7cf3 files · +49 −47Browse files

Unified · Split

3 files

apps/web/src/components/ProviderUpdateLaunchNotification.logic.test.ts +16 −0
apps/web/src/components/ProviderUpdateLaunchNotification.logic.ts +4 −0
apps/web/src/components/ProviderUpdatePrimaryNotification.tsx +29 −47

apps/web/src/components/ProviderUpdateLaunchNotification.logic.test.ts+16−0

@@ -31,6 +31,7 @@ import { · 30 unmodified lines
31	31	parseWslDistroFromInstanceId,
32	32	providerUpdateNotificationKey,
33	33	resolveEnvironmentUpdateRowStatus,
	34	+ shouldShowPrimaryProviderUpdateToast,
34	35	type LocalEnvironmentProvidersInput,
35	36	type LocalEnvironmentUpdateGroup,
36	37	type LocalProviderUpdateOutcome,
@@ -325,6 +326,21 @@ describe("provider update launch notification logic", () => { · 288 unmodified lines
325	326	type: "loading",
326	327	title: "Updating provider",
327	328	});
	329	+ expect(shouldShowPrimaryProviderUpdateToast(view)).toBe(false);
	330	+ });
	331	+
	332	+ it("keeps the initial prompt and terminal outcomes visible as toasts", () => {
	333	+ expect(
	334	+ shouldShowPrimaryProviderUpdateToast(
	335	+ getProviderUpdateInitialToastView({
	336	+ updateProviders: [updateCandidate({ driver: driver("codex") })],
	337	+ oneClickProviders: [updateCandidate({ driver: driver("codex") })],
	338	+ }),
	339	+ ),
	340	+ ).toBe(true);
	341	+ expect(
	342	+ shouldShowPrimaryProviderUpdateToast(getProviderUpdateRejectedToastView(1, "boom")),
	343	+ ).toBe(true);
328	344	});
329	345
330	346	it("uses server failure state for failed progress", () => {

apps/web/src/components/ProviderUpdateLaunchNotification.logic.ts+4−0

@@ -231,6 +231,10 @@ export function getProviderUpdateInitialToastView(input: { · 230 unmodified lines
231	231	};
232	232	}
233	233
	234	+export function shouldShowPrimaryProviderUpdateToast(view: ProviderUpdateToastView): boolean {
	235	+ return view.phase !== "running";
	236	+}
	237	+
234	238	export function getProviderUpdateRunningToastView(providerCount: number): ProviderUpdateToastView {
235	239	return {
236	240	phase: "running",

apps/web/src/components/ProviderUpdatePrimaryNotification.tsx+29−47

@@ -16,8 +16,8 @@ import { · 15 unmodified lines
16	16	getProviderUpdateInitialToastView,
17	17	getProviderUpdateProgressToastView,
18	18	getProviderUpdateRejectedToastView,
19		− getProviderUpdateRunningToastView,
20	19	providerUpdateNotificationKey,
	20	+ shouldShowPrimaryProviderUpdateToast,
21	21	type ProviderUpdateToastView,
22	22	} from "./ProviderUpdateLaunchNotification.logic";
23	23	import { hiddenToastActionProps, stackedThreadToast, toastManager } from "./ui/toast";
@@ -31,7 +31,6 @@ type ActiveProviderUpdateToast = · 7 unmodified lines
31	31	\| {
32	32	readonly kind: "update";
33	33	readonly key: string;
34		− readonly toastId: ProviderUpdateToastId;
35	34	readonly providerInstanceIds: ReadonlySet<ProviderInstanceId>;
36	35	readonly providerCount: number;
37	36	};
@@ -57,20 +56,16 @@ function ProviderUpdateToastIcon({ provider }: { provider: ProviderDriverKind }) · 19 unmodified lines
57	56	);
58	57	}
59	58
60		−function updateProviderUpdateToast(input: {
61		− readonly toastId: ProviderUpdateToastId;
	59	+function addProviderUpdateToast(input: {
62	60	readonly view: ProviderUpdateToastView;
63		− readonly openSettings: () => void;
	61	+ readonly openSettings: (toastId: ProviderUpdateToastId) => void;
64	62	}) {
65	63	if (input.view.type === "loading" \|\| input.view.type === "success") {
66		− toastManager.update(input.toastId, {
	64	+ return toastManager.add({
67	65	type: input.view.type,
68	66	title: input.view.title,
69	67	description: input.view.description,
70	68	timeout: 0,
71		− // Base UI merges toast updates and omits `undefined` keys, so `undefined`
72		− // would leave the prompt's Update button in place. Replace it with a
73		− // defined empty action so the CTA cannot linger while the update runs.
74	69	actionProps: hiddenToastActionProps,
75	70	data: {
76	71	hideCopyButton: true,
@@ -79,11 +74,10 @@ function updateProviderUpdateToast(input: { · 2 unmodified lines
79	74	: {}),
80	75	},
81	76	});
82		− return;
83	77	}
84	78
85		− toastManager.update(
86		− input.toastId,
	79	+ let toastId!: ProviderUpdateToastId;
	80	+ toastId = toastManager.add(
87	81	stackedThreadToast({
88	82	type: input.view.type,
89	83	title: input.view.title,
@@ -91,7 +85,7 @@ function updateProviderUpdateToast(input: { · 1 unmodified line
91	85	timeout: 0,
92	86	actionProps: {
93	87	children: "Settings",
94		− onClick: input.openSettings,
	88	+ onClick: () => input.openSettings(toastId),
95	89	},
96	90	actionVariant: "outline",
97	91	data: {
@@ -99,10 +93,7 @@ function updateProviderUpdateToast(input: { · 1 unmodified line
99	93	},
100	94	}),
101	95	);
102		−}
103		−
104		−function isTerminalProviderUpdateToastView(view: ProviderUpdateToastView) {
105		− return view.phase === "failed" \|\| view.phase === "unchanged" \|\| view.phase === "succeeded";
	96	+ return toastId;
106	97	}
107	98
108	99	/**
@@ -126,10 +117,10 @@ export function ProviderUpdatePrimaryNotification() { · 17 unmodified lines
126	117	useEffect(() => {
127	118	return () => {
128	119	const activeToast = activeToastRef.current;
129		− if (activeToast) {
	120	+ if (activeToast?.kind === "prompt") {
130	121	toastManager.close(activeToast.toastId);
131		− activeToastRef.current = null;
132	122	}
	123	+ activeToastRef.current = null;
133	124	};
134	125	}, []);
135	126
@@ -149,10 +140,14 @@ export function ProviderUpdatePrimaryNotification() { · 13 unmodified lines
149	140	const activeToast = activeToastRef.current;
150	141	if (toastId !== undefined) {
151	142	toastManager.close(toastId);
152		− } else if (activeToast) {
	143	+ } else if (activeToast?.kind === "prompt") {
153	144	toastManager.close(activeToast.toastId);
154	145	}
155		− if (activeToast && (toastId === undefined \|\| activeToast.toastId === toastId)) {
	146	+ if (
	147	+ activeToast &&
	148	+ (toastId === undefined \|\|
	149	+ (activeToast.kind === "prompt" && activeToast.toastId === toastId))
	150	+ ) {
156	151	activeToastRef.current = null;
157	152	}
158	153	void navigate({ to: "/settings/providers" });
@@ -173,15 +168,12 @@ export function ProviderUpdatePrimaryNotification() { · 14 unmodified lines
173	168	providers: activeProviders,
174	169	providerCount: activeToast.providerCount,
175	170	});
176		− updateProviderUpdateToast({
177		− toastId: activeToast.toastId,
178		− view,
179		− openSettings: () => openProviderSettings(activeToast.toastId),
180		− });
181		−
182		− if (isTerminalProviderUpdateToastView(view)) {
183		− activeToastRef.current = null;
	171	+ if (!shouldShowPrimaryProviderUpdateToast(view)) {
	172	+ return;
184	173	}
	174	+
	175	+ addProviderUpdateToast({ view, openSettings: openProviderSettings });
	176	+ activeToastRef.current = null;
185	177	}, [providers, openProviderSettings]);
186	178
187	179	useEffect(() => {
@@ -219,19 +211,15 @@ export function ProviderUpdatePrimaryNotification() { · 31 unmodified lines
219	211
220	212	const providerCount = oneClickProviders.length;
221	213	const providerInstanceIds = new Set(oneClickProviders.map((provider) => provider.instanceId));
222		− activeToastRef.current = {
	214	+ const activeUpdate: ActiveProviderUpdateToast = {
223	215	kind: "update",
224	216	key: notificationKey,
225		− toastId,
226	217	providerInstanceIds,
227	218	providerCount,
228	219	};
	220	+ activeToastRef.current = activeUpdate;
229	221
230		− updateProviderUpdateToast({
231		− toastId,
232		− view: getProviderUpdateRunningToastView(providerCount),
233		− openSettings,
234		− });
	222	+ toastManager.close(toastId);
235	223
236	224	void (async () => {
237	225	const results = [];
@@ -248,16 +236,15 @@ export function ProviderUpdatePrimaryNotification() { · 10 unmodified lines
248	236	}
249	237
250	238	const activeUpdateToast = activeToastRef.current;
251		− if (activeUpdateToast?.kind !== "update" \|\| activeUpdateToast.toastId !== toastId) {
	239	+ if (activeUpdateToast !== activeUpdate) {
252	240	return;
253	241	}
254	242
255	243	const failedMessage = firstFailedProviderUpdateMessage(results);
256	244	if (failedMessage) {
257		− updateProviderUpdateToast({
258		− toastId,
	245	+ addProviderUpdateToast({
259	246	view: getProviderUpdateRejectedToastView(providerCount, failedMessage),
260		− openSettings,
	247	+ openSettings: openProviderSettings,
261	248	});
262	249	activeToastRef.current = null;
263	250	return;
@@ -271,13 +258,8 @@ export function ProviderUpdatePrimaryNotification() { · 7 unmodified lines
271	258	providers: updatedProviderSnapshots,
272	259	providerCount,
273	260	});
274		− updateProviderUpdateToast({
275		− toastId,
276		− view,
277		− openSettings,
278		− });
279		−
280		− if (isTerminalProviderUpdateToastView(view)) {
	261	+ if (shouldShowPrimaryProviderUpdateToast(view)) {
	262	+ addProviderUpdateToast({ view, openSettings: openProviderSettings });
281	263	activeToastRef.current = null;
282	264	}
283	265	})();

fix(web): remove duplicate provider update progress (#7761)

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code