UI Package Deploy Routing Refactor

src/internal/api/packages/find.go

@@ -46,7 +46,7 @@ func findPackage(pattern *regexp.Regexp, w http.ResponseWriter, setDir func() (s
 
 	files, err := utils.RecursiveFileList(targetDir, pattern)
 	if err != nil || len(files) == 0 {
-		pkgNotFoundMsg := fmt.Sprintf("Package not found: %s", pattern.String())
+		pkgNotFoundMsg := fmt.Sprintf("Unable to locate the package: %s", pattern.String())
 		message.ErrorWebf(err, w, pkgNotFoundMsg)
 		return
 	}

src/internal/api/packages/read.go

@@ -27,7 +27,7 @@ func Read(w http.ResponseWriter, r *http.Request) {
 	path := chi.URLParam(r, "path")
 
 	if pkg, err := readPackage(path); err != nil {
-		message.ErrorWebf(err, w, "Unable to read the package")
+		message.ErrorWebf(err, w, "Unable to read the package at: `%s`", path)
 	} else {
 		common.WriteJSONResponse(w, pkg, http.StatusOK)
 	}

src/test/ui/01_start_page.spec.ts

@@ -28,7 +28,7 @@ test.describe('start page', () => {
 
 		await page.locator('span:has-text("Initialize Cluster")').click();
 
-		await page.waitForURL('**/initialize/configure');
+		await page.waitForURL('/package/init/configure');
 	});
 	test('page redirects to /packages @post-init', async ({ page }) => {
 		await page.goto('/auth?token=insecure');

src/test/ui/02_initialize_cluster.spec.ts

@@ -4,18 +4,29 @@ test.beforeEach(async ({ page }) => {
 	page.on('pageerror', (err) => console.log(err.message));
 });
 
+const getToConfigurePage = async (page) => {
+	await page.goto('/auth?token=insecure&next=/');
+	await page.getByRole('link', { name: 'Initialize Cluster' }).click();
+	await page.waitForURL('/package/init/configure');
+};
+
+const validateHorizontalStepperItems = async (page, activeIndex, steps) => {
+	const stepperItems = await page.locator('.stepper .stepper-item .step');
+	for (let i = 0; i < stepperItems.length; i++) {
+		await expect(stepperItems.nth(i)).toContainText(steps[i]);
+		if (activeIndex <= i) {
+			await expect(stepperItems.nth(i).locator('.step-icon')).toHaveClass(/primary/);
+		} else {
+			await expect(stepperItems.nth(i).locator('.step-icon')).toHaveClass(/disabled/);
+		}
+	}
+};
+
 test.describe('initialize a zarf cluster', () => {
 	test('configure the init package @pre-init', async ({ page }) => {
-		await page.goto('/auth?token=insecure&next=/initialize/configure');
+		await getToConfigurePage(page);
 
-		// Stepper
-		const stepperItems = await page.locator('.stepper .stepper-item .step');
-		await expect(stepperItems.nth(0).locator('.step-icon')).toHaveClass(/primary/);
-		await expect(stepperItems.nth(0)).toContainText('Configure');
-		await expect(stepperItems.nth(1).locator('.step-icon')).toHaveClass(/primary/);
-		await expect(stepperItems.nth(1)).toContainText('2 Review');
-		await expect(stepperItems.nth(2).locator('.step-icon')).toHaveClass(/disabled/);
-		await expect(stepperItems.nth(2)).toContainText('3 Deploy');
+		await validateHorizontalStepperItems(page, 0, ['1 Configure', '2 Review', '3 Deploy']);
 
 		// Package details
 		await expect(page.locator('text=Package Type ZarfInitConfig')).toBeVisible();
@@ -52,23 +63,26 @@ test.describe('initialize a zarf cluster', () => {
 		await expect(gitServerDeployToggle).toHaveAttribute('aria-pressed', 'true');
 
 		await page.locator('text=review deployment').click();
-		await expect(page).toHaveURL('/initialize/review');
+		await expect(page).toHaveURL('/package/init/review');
 	});
 
 	test('review the init package @pre-init', async ({ page }) => {
-		await page.goto('/auth?token=insecure&next=/initialize/review');
+		await getToConfigurePage(page);
+
+		await page.locator('text=review deployment').click();
+
+		await validateHorizontalStepperItems(page, 1, ['Configure', '2 Review', '3 Deploy']);
 
 		await validateRequiredCheckboxes(page);
 	});
 
 	test('deploy the init package @init', async ({ page }) => {
-		await page.goto('/auth?token=insecure&next=/');
-		await page.getByRole('link', { name: 'Initialize Cluster' }).click();
-		await page.waitForURL('/initialize/configure');
+		await getToConfigurePage(page);
 		await page.getByRole('link', { name: 'review deployment' }).click();
-		await page.waitForURL('/initialize/review');
+		await page.waitForURL('/package/init/review');
 		await page.getByRole('link', { name: 'deploy' }).click();
-		await page.waitForURL('/initialize/deploy');
+		await page.waitForURL('/package/init/deploy');
+		await validateHorizontalStepperItems(page, 2, ['Configure', 'Review', '3 Deploy']);
 
 		// expect all steps to have success class
 		const stepperItems = page.locator('.stepper-vertical .step-icon');

src/ui/lib/components/package-component-accordion.svelte

@@ -5,9 +5,6 @@
 <script lang="ts">
 	import YamlCode from './yaml-code.svelte';
 
-	import 'prismjs/components/prism-yaml';
-	import 'prismjs/themes/prism-okaidia.css';
-
 	import type { ZarfComponent } from '$lib/api-types';
 	import { pkgComponentDeployStore } from '$lib/store';
 	import { Accordion, IconButton, Typography } from '@ui';
@@ -52,7 +49,7 @@
 			</Typography>
 		</div>
 		{#if !readOnly}
-			<div style={`gap: 5px; visibility: ${component.required ? "hidden": "initial"}`}>
+			<div style={`gap: 5px; visibility: ${component.required ? 'hidden' : 'initial'}`}>
 				<IconButton
 					toggleable
 					class="deploy-component-toggle"
@@ -79,7 +76,7 @@
 			</div>
 		{/if}
 	</div>
-	<YamlCode slot="content" {component} />
+	<YamlCode slot="content" code={component} />
 </Accordion>
 
 <style>

src/ui/lib/components/package-err-not-found.svelte

@@ -5,22 +5,21 @@
 <script lang="ts">
 	import { Dialog, Typography, Button } from '@ui';
 	import bigZarf from '@images/zarf-bubbles-right.png';
-	export let pkgName: string;
+	export let message: string;
 </script>
 
 <Dialog open clickAway={false}>
 	<div slot="content" class="dialog-content">
 		<!-- @Noxsios TODO: replace w/ sad zarf -->
-		<img class="zarf-logo" width={60} height={60} src={bigZarf} alt="zarf-logo" />
-		<Typography variant="h6">Package Not Found</Typography>
-		<Typography variant="body2">
-			Make sure the following package is in the current working directory:
-		</Typography>
-		<Typography variant="code"><code>{pkgName}</code></Typography>
+		<div class="center">
+			<img class="zarf-logo" width={60} height={60} src={bigZarf} alt="zarf-logo" />
+			<Typography variant="h6">Package Not Found</Typography>
+		</div>
+
+		<Typography variant="body2">The current operation encountered the following error:</Typography>
+		<Typography variant="code"><code>{message}</code></Typography>
 		<div class="actions">
-			<Button href="/" color="secondary" variant="flat"
-				>Return Home</Button
-			>
+			<Button href="/" color="secondary" variant="flat">Return Home</Button>
 		</div>
 	</div>
 </Dialog>
@@ -30,11 +29,19 @@
 		display: flex;
 		gap: 1rem;
 		flex-direction: column;
+		max-width: 444px;
+		width: 100%;
+	}
+	.center {
+		display: flex;
+		justify-content: center;
 		align-items: center;
+		flex-direction: column;
+		gap: 1rem;
 	}
 	.actions {
 		display: flex;
 		width: 100%;
 		justify-content: flex-end;
 	}
-</style>
+</style>

src/ui/lib/components/spinner.svelte

@@ -8,6 +8,8 @@
 	import { onMount } from 'svelte';
 	import { Typography } from '@ui';
 
+	export let title = '';
+
 	export let msg = 'Loading...';
 
 	// Need this to force-enable first onload animation to avoid ugly flash on very fast REST calls
@@ -22,7 +24,7 @@
 		<div class="spinner-wrapper" in:fade={{ duration: 1000 }}>
 			<span class="spinner" />
 		</div>
-		<Typography variant="h5">Checking for Cluster</Typography>
+		<Typography variant="h5">{title}</Typography>
 		<Typography variant="body2" element="span" class="label">{msg}</Typography>
 	{/if}
 </Hero>

src/ui/lib/components/yaml-code.svelte

@@ -8,12 +8,11 @@
 	import 'prismjs/themes/prism-okaidia.css';
 	import { stringify } from 'yaml';
 
-	import type { ZarfComponent } from '$lib/api-types';
 	import { onMount } from 'svelte';
 
-	export let component: ZarfComponent;
+	export let code: any;
 
-	const yaml = stringify(component);
+	const yaml = stringify(code);
 
 	onMount(() => {
 		Prism.highlightAll();

src/ui/lib/typography.ts

@@ -56,6 +56,13 @@ export const ZarfTypography: ThemeTypography = {
 		lineHeight: '166%',
 		letterSpacing: '0.4px'
 	},
+	code: {
+		fontSize: '14px',
+		fontWeight: '400',
+		lineHeight: '143%',
+		letterSpacing: '0.17px',
+		fontFamily: 'monospace, monospace'
+	},
 	overline: {
 		fontSize: '12px',
 		fontWeight: '400',

src/ui/routes/+error.svelte

@@ -0,0 +1,24 @@
+<!-- 
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2021-Present The Zarf Authors
+ -->
+<script lang="ts">
+	import { Dialog, Typography } from '@ui';
+	import { page } from '$app/stores';
+</script>
+
+<Dialog open clickAway={false}>
+	<div slot="content" class="dialog-content">
+		<Typography variant="code"><code>Error: {$page.status} {$page.error?.message}</code></Typography
+		>
+	</div>
+</Dialog>
+
+<style>
+	.dialog-content {
+		display: flex;
+		gap: 1rem;
+		flex-direction: column;
+		align-items: center;
+	}
+</style>

src/ui/routes/+page.svelte

@@ -8,6 +8,16 @@
 	import { clusterStore } from '$lib/store';
 	import { Hero, Spinner } from '$lib/components';
 	import bigZarf from '@images/zarf-bubbles-right.png';
+	import { Packages } from '$lib/api';
+
+	const getInitPath = async () => {
+		const res = await Packages.findInit();
+		if (Array.isArray(res)) {
+			return res[0];
+		} else {
+			throw new Error('No init package found');
+		}
+	};
 </script>
 
 <svelte:head>
@@ -33,14 +43,29 @@
 					Click initialize cluster to install the Init Package and deploy a new cluster.
 				</Typography>
 			{/if}
-
-			<Button variant="raised" color="secondary" href="/initialize/configure" id="init-cluster">
-				Initialize Cluster
-			</Button>
+			{#await getInitPath()}
+				<Button
+					variant="raised"
+					color="secondary"
+					disabled
+				>
+					Initialize Cluster
+				</Button>
+			{:then path}
+				<Button
+					variant="raised"
+					color="secondary"
+					href={`/package/deploy?path=${path}`}
+					id="init-cluster"
+				>
+					Initialize Cluster
+				</Button>
+			{/await}
 		</Hero>
 	{/if}
 {:else}
 	<Spinner
+		title="Checking for cluster"
 		msg="Checking if a Kubernetes cluster is available and initialized by Zarf. This may take a few seconds."
 	/>
 {/if}