#1311. Add landing page pre-init test. Update find regex and matching…

…. Update local-package-table to use findInHome instead of find. Update nav-drawer by refactoring out ssx in subcomponent to ssx var using a class

src/internal/api/packages/find.go

@@ -16,7 +16,7 @@ import (
 	"github.com/defenseunicorns/zarf/src/pkg/message"
 )
 
-var packagePattern = regexp.MustCompile(`zarf-package.+\.tar\.zst$`)
+var packagePattern = regexp.MustCompile(`zarf-package.*.tar\.zst$`)
 var initPattern = regexp.MustCompile(`(?i).*init.*\.tar\.zst$`)
 
 // Find returns all packages anywhere down the directory tree of the working directory.
@@ -73,7 +73,7 @@ func recursiveFileListSkipPermissionErrors(dir string, pattern *regexp.Regexp) (
 
 		if !d.IsDir() {
 			if pattern != nil {
-				if len(pattern.FindStringIndex(path)) > 0 {
+				if pattern.MatchString(d.Name()) {
 					files = append(files, path)
 				}
 			} else {

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

@@ -4,43 +4,48 @@ test.beforeEach(async ({ page }) => {
 	page.on('pageerror', (err) => console.log(err.message));
 });
 
-test.describe.skip('start page', () => {
-	test('spinner loads properly, then displays init btn @pre-init', async ({ page }) => {
-		await page.goto('/auth?token=insecure');
+test.describe('Landing Page', () => {
+	test('Connect cluster @pre-init', async ({ page }) => {
+		await page.goto('/auth?token=insecure', { waitUntil: 'networkidle' });
 
-		const clusterSelector = page.locator('#cluster-selector');
-		await expect(clusterSelector).toBeEmpty();
+		// Expect cluster table to display not connected state
+		const clusterInfo = page.locator('.cluster-not-connected');
+		expect(await clusterInfo.textContent()).toContain('Cluster not connected');
 
-		// display loading spinner
-		const spinner = page.locator('.spinner');
-		await expect(spinner).toBeVisible();
+		// Expect navdrawer cluster state to display not connected
+		const navDrawerHeader = page.locator('.nav-drawer-header');
+		expect(await navDrawerHeader.textContent()).toContain('Cluster not connected');
 
-		// spinner disappears, init btn appears
-		await expect(spinner).not.toBeVisible();
+		// Expect the Packages Table to contain no packages
+		const packageTableBody = page.locator('.package-list-body');
+		expect(await packageTableBody.textContent()).toContain('No Packages have been Deployed');
 
-		// Make sure the home page contents are there
-		await expect(page.locator('text=No Active Zarf Clusters')).toBeVisible();
-		await expect(
-			page.locator(
-				'.hero-subtitle:has-text("cluster was found, click initialize cluster to initialize it now with Zarf")'
-			)
-		).toBeVisible();
+		// Open Connect Cluster Dialog
+		const connectClusterButton = page.locator('button:has-text("Connect Cluster")');
+		await connectClusterButton.click();
 
-		await page.locator('span:has-text("Initialize Cluster")').click();
+		// Ensure Kubeconfig is found
+		const kubeconfigDialog = page.locator('.dialog-content');
+		expect(await kubeconfigDialog.textContent()).toContain('Kubeconfig Found');
 
-		await page.waitForURL('/package/init/configure');
+		// Click Connect Cluster Anchor in the dialog to goto /packages?init=true
+		const connectAnchor = kubeconfigDialog.locator('a:has-text("Connect Cluster")');
+		await connectAnchor.click();
+
+		await page.waitForURL('/packages?init=true');
 	});
-	test('page redirects to /packages @post-init', async ({ page }) => {
-		await page.goto('/auth?token=insecure');
 
-		// display loading spinner
-		const spinner = page.locator('.spinner');
-		await expect(spinner).toBeVisible();
+	// test('page redirects to /packages @post-init', async ({ page }) => {
+	// 	await page.goto('/auth?token=insecure');
 
-		// spinner disappears
-		await expect(spinner).not.toBeVisible();
+	// 	// display loading spinner
+	// 	const spinner = page.locator('.spinner');
+	// 	await expect(spinner).toBeVisible();
 
-		// expect to be redirected to /packages
-		await page.waitForURL('/packages', { timeout: 10000 });
-	});
+	// 	// spinner disappears
+	// 	await expect(spinner).not.toBeVisible();
+
+	// 	// expect to be redirected to /packages
+	// 	await page.waitForURL('/packages', { timeout: 10000 });
+	// });
 });

src/ui/lib/components/local-package-table.svelte

@@ -11,7 +11,7 @@
 	const initPkg = $page.url.searchParams.get('init');
 
 	async function readPackages(): Promise<APIZarfPackage[]> {
-		const paths = initPkg ? await Packages.findInit() : await Packages.find();
+		const paths = initPkg ? await Packages.findInit() : await Packages.findInHome();
 		const packages = paths.map((p) => Packages.read(p));
 		return Promise.all(packages);
 	}

src/ui/lib/components/nav-drawer.svelte

@@ -25,6 +25,12 @@
 			'& .inset-shadow': {
 				boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.12)',
 			},
+			'& .nav-drawer-header': {
+				display: 'flex',
+				flexDirection: 'column',
+				gap: '4px',
+				padding: '0px 1rem',
+			},
 		},
 	};
 
@@ -34,19 +40,18 @@
 </script>
 
 <Paper {ssx} square backgroundColor="global-nav" color="on-global-nav">
-	<Box
-		ssx={{ $self: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '0px 1rem' } }}
-	>
+	<Box class="nav-drawer-header">
 		<Typography variant="h5">Cluster</Typography>
 		{#if $clusterStore?.hasZarf && $clusterStore?.rawConfig}
-			<Typography variant="caption" color="text-secondary-on-dark"
-				>{$clusterStore.rawConfig['current-context']}</Typography
-			>
+			<Typography variant="caption" color="text-secondary-on-dark">
+				{$clusterStore.rawConfig['current-context']}
+			</Typography>
 		{:else}
 			<Typography
 				variant="caption"
 				color="text-secondary-on-dark"
 				style="display: flex;align-items:center;"
+				class="drawer-cluster-not-found"
 			>
 				<span class="material-symbols-outlined" style="color:var(--warning); font-size:20px;">
 					warning