feat(web): add initial upgrade flow

[JGAntunes]

What this PR does / why we need it:

This PR adds the base UI changes for the new upgrade flow for the V3 installer experience.

A loom preview that doesn't go through the full flow yet - https://www.loom.com/share/87475f5c1fb5418f82932a08e7856b87?sid=af9ad7b3-a48c-421a-ba2c-f1af1cef1942

Update ☝️ with the API in place:

Which issue(s) this PR fixes:

https://app.shortcut.com/replicated/story/129000/iteration-1-frontend-upgrade-wizard-flow

Does this PR require a test?

yes

Does this PR require a release note?

Basic upgrade flow for the V3 installer experience

Does this PR require documentation?

NONE

[cursor]

Bug: API Endpoint Mismatch in Upgrade Mode

The templateConfig function still uses a hardcoded /api/${target}/install/app/config/template endpoint, unlike submitConfigValues which now uses getApiBase(target, mode). This causes templateConfig to incorrectly target the install endpoint in upgrade mode, a latent issue if the configuration step is re-enabled.

web/src/components/wizard/config/ConfigurationStep.tsx#L40-L60

embedded-cluster/web/src/components/wizard/config/ConfigurationStep.tsx

Lines 40 to 60 in 0e3cd0c

	const [itemErrors, setItemErrors] = useState<Record<string, string>>({});
	const [itemToFocus, setItemToFocus] = useState<AppConfigItem | null>(null);
	// Holds refs to each item by name for focusing
	const itemRefs = useRef<Record<string, HTMLElement | null>>({});
	// Helper function to assign refs dynamically
	const setRef = (name: string) => (el: HTMLElement | null) => {
	itemRefs.current[name] = el;
	};
	const themeColor = settings.themeColor;
	const templateConfig = useCallback(async (values: AppConfigValues) => {
	try {
	setGeneralError(null); // Clear any existing errors
	const response = await debouncedFetch(`/api/${target}/install/app/config/template`, {
	method: 'POST',
	headers: {

web/src/components/wizard/config/ConfigurationStep.tsx#L69-L80

embedded-cluster/web/src/components/wizard/config/ConfigurationStep.tsx

Lines 69 to 80 in 0e3cd0c

	return;
	}
	if (!response.ok) {
	const errorData = await response.json().catch(() => ({}));
	if (response.status === 401) {
	handleUnauthorized(errorData);
	throw new Error('Session expired. Please log in again.');
	}
	throw new Error(errorData.message || 'Failed to template configuration');
	}

 

---