803 add component descriptions to the required components in the init config package

packages/gitea/zarf.yaml

@@ -29,7 +29,9 @@ variables:
 
 components:
   - name: git-server
-    description: "Add Gitea for serving gitops-based clusters in an airgap"
+    description: |
+      Deploys Gitea to provide git repositories for Kubernetes configurations.
+      Required for GitOps deployments if no other git server is available.
     images:
       - gitea/gitea:1.17.4
     manifests:

packages/logging-pgl/zarf.yaml

@@ -4,7 +4,10 @@ metadata:
 
 components:
   - name: logging
-    description: "Add Promtail, Grafana and Loki (PGL) to this cluster for log monitoring."
+    description: |
+      Deploys the Promtail Grafana & Loki (PGL) stack. 
+      Aggregates logs from different containers and presents them in a web dashboard. 
+      Recommended if no other logging stack is deployed in the cluster.
     images:
       - docker.io/grafana/promtail:2.7.0
       - grafana/grafana:8.3.5

packages/zarf-agent/zarf.yaml

@@ -9,6 +9,11 @@ constants:
 
 components:
   - name: zarf-agent
+    description: |
+      A Kubernetes mutating webhook to enable automated URL rewriting for containers
+      images and git repositories references in Kubernetes manifests. This prevents 
+      the need to manually update URLs from their original sources to the Zarf-managed
+      docker registry and git server.    
     required: true
     images:
       - "ghcr.io/defenseunicorns/zarf/###ZARF_PKG_VAR_AGENT_IMAGE###"

packages/zarf-injector/zarf.yaml

@@ -1,10 +1,12 @@
 kind: ZarfPackageConfig
 metadata:
   name: "init-package-zarf-injector"
-  description: "Used to bootstrap the seed registry without an external registry"
 
 components:
   - name: zarf-injector
+    description: |
+      Bootstraps a Kubernetes cluster by cloning a running pod in the cluster and hosting the registry image.
+      Removed and destroyed after the Zarf Registry is self-hosting the registry image.
     required: true
     cosignKeyPath: ../../cosign.pub
     files:

packages/zarf-registry/zarf.yaml

@@ -1,7 +1,6 @@
 kind: ZarfPackageConfig
 metadata:
   name: "init-package-zarf-registry"
-  description: "Used to establish a new Zarf cluster"
 
 variables:
   - name: REGISTRY_EXISTING_PVC
@@ -30,6 +29,8 @@ variables:
 
 components:
   - name: zarf-seed-registry
+    description: |
+      Deploys the Zarf Registry using the registry image provided by the Zarf Injector.
     charts:
       - name: docker-registry
         releaseName: zarf-docker-registry
@@ -41,6 +42,9 @@ components:
           - registry-values-seed.yaml
 
   - name: zarf-registry
+    description: |
+      Updates the Zarf Registry to use the self-hosted registry image. 
+      Serves as the primary docker registry for the cluster.
     manifests:
       - name: registry-connect
         namespace: zarf

src/pkg/packager/components.go

@@ -193,6 +193,7 @@ func (p *Packager) confirmOptionalComponent(component types.ZarfComponent) (conf
 	displayComponent.Description = ""
 	utils.ColorPrintYAML(displayComponent)
 	if component.Description != "" {
+		pterm.Println()
 		message.Question(component.Description)
 	}
 

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

@@ -64,12 +64,12 @@ test.describe('initialize a zarf cluster', () => {
 
 async function validateRequiredCheckboxes(page) {
 	// Check remaining components for deploy states
-	let injector = page.locator('.accordion:has-text("zarf-injector (Required)")');
-	expect(injector.locator('text=Deploy')).toBeHidden();
+	const injector = page.locator('.accordion:has-text("zarf-injector (Required)")');
+	await expect(injector.locator('.deploy-component-toggle')).toBeHidden();
 
-	let seedRegistry = page.locator('.accordion:has-text("zarf-seed-registry (Required)")');
-	expect(seedRegistry.locator('text=Deploy')).toBeHidden();
+	const seedRegistry = page.locator('.accordion:has-text("zarf-seed-registry (Required)")');
+	await expect(seedRegistry.locator('.deploy-component-toggle')).toBeHidden();
 
-	let registry = page.locator('.accordion:has-text("zarf-registry (Required)")');
-	expect(registry.locator('text=Deploy')).toBeHidden();
+	const registry = page.locator('.accordion:has-text("zarf-registry (Required)")');
+	await expect(registry.locator('.deploy-component-toggle')).toBeHidden();
 }

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

@@ -51,8 +51,8 @@
 				{component.description || ' '}
 			</Typography>
 		</div>
-		{#if !component.required}
-			<div style="gap: 5px;">
+		{#if !readOnly}
+			<div style={`gap: 5px; visibility: ${component.required ? "hidden": "initial"}`}>
 				<IconButton
 					toggleable
 					class="deploy-component-toggle"
@@ -62,15 +62,17 @@
 					id={`deploy-component-${idx}`}
 					toggledIconContent="toggle_on"
 					iconClass="material-symbols-outlined"
-					disabled={readOnly || component.required}
+					disabled={component.required}
 					toggled={$pkgComponentDeployStore.includes(idx)}
 					on:click={() => toggleComponentDeployment($pkgComponentDeployStore, idx)}
 				/>
 				<Typography
 					variant="body1"
 					element="label"
 					for={`deploy-component-${idx}`}
-					style={readOnly ? 'color: var(--mdc-theme-text-secondary-on-light);' : ''}
+					style={component.required
+						? 'color: var(--mdc-theme-text-secondary-on-light);'
+						: 'var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))'}
 				>
 					Deploy
 				</Typography>