803 add component descriptions to the required components in the init…

… config package (#1179)

Adds detailed descriptions to init package components. Also updates
alignment of UI that displays these components in an accordion. Also add
another line break between the YAML component printed to the console and
the component description.

Component descriptions are taken from this comment by @Madeline-UX :
#803 (comment)

Fixes #803 

Co-authored-by: Wayne Starr <[email protected]>
Co-authored-by: Megamind <[email protected]>

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 container
+      images and git repository 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

@@ -188,6 +188,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>