UI Typography/Layout Fixes. (#826)

## Description - [x] Fix Typography and Layout across application to match design and use new Unicorn-UI typography component. - [x] home - [x] initialize - [x] configure - [x] review - [x] deploy - [x] finished - [x] Fix pre-tag first line indentation in package-component. - [x] Create Accordion Group Component that follows the design. - [x] add caption to Package Component Section of init/config page. - [x] globally style caption color. - [x] Sanitize block margin, margin and padding in app.css. - [x] Add api call for currently deploying components that can access private variable stored in config.go that gets populated and cleared during deploy method. - [x] Update deploy page to fill the stepper as components are "deployed" and navigate away from page after pop up with successful deployment shows. - [x] Update tests. ## Related Issue - #799 - #798 - #797 - #802 ## Type of change - UI: Frontend styling/theme ## Check list before merging - [x] Changes have been linted locally - [x] Tests passing Co-authored-by: Megamind <[email protected]> Co-authored-by: Wayne Starr <[email protected]>
zarf-dev · Oct 8, 2022 · ae25283 · ae25283
1 parent 9ae725f
commit ae25283
Show file tree

Hide file tree

Showing 29 changed files with 920 additions and 600 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
 		]
 	},
 	"devDependencies": {
-		"@defense-unicorns/unicorn-ui": "0.0.16",
+		"@defense-unicorns/unicorn-ui": "^0.0.17",
 		"@fontsource/roboto": "4.5.8",
 		"@material/card": "14.0.0",
 		"@material/data-table": "14.0.0",
@@ -51,6 +51,10 @@
 		"svelte-check": "2.9.1",
 		"svelte-preprocess": "4.10.7",
 		"tslib": "2.4.0",
+		"typescript": "4.8.4"
+	},
+	"dependencies": {
+		"material-symbols": "^0.2.12",
 		"typescript": "4.8.4",
 		"vite": "3.1.6",
 		"yaml": "2.1.3"

diff --git a/src/config/config.go b/src/config/config.go
@@ -80,7 +80,9 @@ var (
 
 	// Private vars
 	active types.ZarfPackage
-	state  types.ZarfState
+	// Dirty Solution to getting the real time deployedComponents components.
+	deployedComponents []types.DeployedComponent
+	state              types.ZarfState
 
 	SGetPublicKey string
 	UIAssets      embed.FS
@@ -191,6 +193,18 @@ func GetComponents() []types.ZarfComponent {
 	return active.Components
 }
 
+func GetDeployingComponents() []types.DeployedComponent {
+	return deployedComponents
+}
+
+func SetDeployingComponents(components []types.DeployedComponent) {
+	deployedComponents = components
+}
+
+func ClearDeployingComponents() {
+	deployedComponents = []types.DeployedComponent{}
+}
+
 func SetComponents(components []types.ZarfComponent) {
 	active.Components = components
 }

diff --git a/src/internal/api/components/list.go b/src/internal/api/components/list.go
@@ -0,0 +1,14 @@
+package components
+
+import (
+	"net/http"
+
+	"github.com/defenseunicorns/zarf/src/config"
+	"github.com/defenseunicorns/zarf/src/internal/api/common"
+)
+
+// ListDeployedPackages writes a list of packages that have been deployed to the connected cluster.
+func ListDeployingComponents(w http.ResponseWriter, r *http.Request) {
+	deployingPackages := config.GetDeployingComponents()
+	common.WriteJSONResponse(w, deployingPackages, http.StatusOK)
+}
diff --git a/src/internal/api/start.go b/src/internal/api/start.go
@@ -12,6 +12,7 @@ import (
 	"github.com/defenseunicorns/zarf/src/config"
 	"github.com/defenseunicorns/zarf/src/internal/api/auth"
 	"github.com/defenseunicorns/zarf/src/internal/api/cluster"
+	"github.com/defenseunicorns/zarf/src/internal/api/components"
 	"github.com/defenseunicorns/zarf/src/internal/api/packages"
 	"github.com/defenseunicorns/zarf/src/internal/k8s"
 	"github.com/defenseunicorns/zarf/src/internal/message"
@@ -90,6 +91,10 @@ func LaunchAPIServer() {
 			r.Delete("/remove/{name}", packages.RemovePackage)
 		})
 
+		r.Route("/components", func(r chi.Router) {
+			r.Get("/deployed", components.ListDeployingComponents)
+		})
+
 	})
 
 	// If no dev port specified, use the server port for the URL and try to open it

diff --git a/src/internal/packager/deploy.go b/src/internal/packager/deploy.go
@@ -142,7 +142,7 @@ func Deploy() {
 func deployComponents(tempPath tempPaths, componentsToDeploy []types.ZarfComponent) ([]types.DeployedComponent, error) {
 	// When pushing images, the default behavior is to add a shasum of the url to the image name
 	deployedComponents := []types.DeployedComponent{}
-
+	config.SetDeployingComponents(deployedComponents)
 	// Deploy all the components
 	for _, component := range componentsToDeploy {
 		deployedComponent := types.DeployedComponent{Name: component.Name}
@@ -186,8 +186,9 @@ func deployComponents(tempPath tempPaths, componentsToDeploy []types.ZarfCompone
 		// Deploy the component
 		deployedComponent.InstalledCharts = installedCharts
 		deployedComponents = append(deployedComponents, deployedComponent)
+		config.SetDeployingComponents(deployedComponents)
 	}
-
+	config.ClearDeployingComponents()
 	return deployedComponents, nil
 }
 

diff --git a/src/test/ui/01_start_page.spec.ts b/src/test/ui/01_start_page.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-	page.on('pageerror', (err) => console.log(err.message));	
+	page.on('pageerror', (err) => console.log(err.message));
 });
 
 test.describe('start page without an initialized cluster', () => {
@@ -22,7 +22,7 @@ test.describe('start page without an initialized cluster', () => {
 		await expect(page.locator('text=No Active Zarf Clusters')).toBeVisible();
 		await expect(
 			page.locator(
-				'h2:has-text("cluster was found, click initialize cluster to initialize it now with Zarf")'
+				'.hero-subtitle:has-text("cluster was found, click initialize cluster to initialize it now with Zarf")'
 			)
 		).toBeVisible();
 

diff --git a/src/test/ui/02_initialize_cluster.spec.ts b/src/test/ui/02_initialize_cluster.spec.ts
@@ -18,28 +18,36 @@ test.describe('initialize a zarf cluster', () => {
 		// Package details
 		await expect(page.locator('text=Package Type ZarfInitConfig')).toBeVisible();
 		await expect(
-			page.locator('text=Meta data Name: init Description: Used to establish a new Zarf cluster')
+			page.locator('text=METADATA Name: Init Description: Used to establish a new Zarf cluster')
 		).toBeVisible();
 
 		// Components (check most functionaliy with k3s component)
 		let k3s = page.locator('.accordion:has-text("k3s (Optional)")');
-		await expect(k3s.locator(checkbox)).toBeEnabled();
+		await expect(k3s.locator('.deploy-component-toggle')).toHaveAttribute('aria-pressed', 'false');
+		await k3s.locator('text=Deploy').click();
+		await expect(k3s.locator('.deploy-component-toggle')).toHaveAttribute('aria-pressed', 'true');
 		await expect(
 			page.locator('.component-accordion-header:has-text("*** REQUIRES ROOT *** Install K3s")')
 		).toBeVisible();
 		await expect(k3s.locator('code')).toBeHidden();
-		await k3s.locator('button').click();
+		await k3s.locator('.accordion-toggle').click();
 		await expect(k3s.locator('code')).toBeVisible();
 		await expect(k3s.locator('code:has-text("name: k3s")')).toBeVisible();
 
 		// Check remaining components for deploy states
 		await validateRequiredCheckboxes(page);
 
-		let logging = page.locator('.accordion:has-text("logging (Optional)")');
-		await expect(logging.locator(checkbox)).toBeEnabled();
+		let loggingDeployToggle = page
+			.locator('.accordion:has-text("logging (Optional)")')
+			.locator('.deploy-component-toggle');
+		await loggingDeployToggle.click();
+		await expect(loggingDeployToggle).toHaveAttribute('aria-pressed', 'true');
 
-		let gitServer = page.locator('.accordion:has-text("git-server (Optional)")');
-		await expect(gitServer.locator(checkbox)).toBeEnabled();
+		let gitServerDeployToggle = page
+			.locator('.accordion:has-text("git-server (Optional)")')
+			.locator('.deploy-component-toggle');
+		await gitServerDeployToggle.click();
+		await expect(gitServerDeployToggle).toHaveAttribute('aria-pressed', 'true');
 
 		await page.locator('text=review deployment').click();
 		await expect(page).toHaveURL('/initialize/review');
@@ -55,14 +63,11 @@ 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)")');
-	await expect(injector.locator(checkbox)).toBeDisabled();
-	await expect(injector.locator(checkbox)).toBeChecked();
+	expect(injector.locator('text=Deploy')).toBeHidden();
 
 	let seedRegistry = page.locator('.accordion:has-text("zarf-seed-registry (Required)")');
-	await expect(seedRegistry.locator(checkbox)).toBeDisabled();
-	await expect(seedRegistry.locator(checkbox)).toBeChecked();
+	expect(seedRegistry.locator('text=Deploy')).toBeHidden();
 
 	let registry = page.locator('.accordion:has-text("zarf-registry (Required)")');
-	await expect(registry.locator(checkbox)).toBeDisabled();
-	await expect(registry.locator(checkbox)).toBeChecked();
+	expect(registry.locator('text=Deploy')).toBeHidden();
 }
diff --git a/src/ui/app.css b/src/ui/app.css
@@ -0,0 +1,114 @@
+:root {
+	/* Theme | vars */
+	--mdc-theme-primary: #4adede;
+	--mdc-theme-primary-dark: #00acac;
+	--mdc-theme-secondary: #787ff6;
+	--mdc-theme-on-primary: #171717;
+	--mdc-theme-on-secondary: white;
+	--mdc-theme-surface: white;
+	--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.6);
+	--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
+
+	/* Typography | vars */
+	--mdc-typography-font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+	/* body2 */
+	--mdc-typography-body2-font-style: normal;
+	--mdc-typography-body2-font-size: 1em;
+
+	/* body3 */
+	--mdc-typography-body3-font-style: normal;
+	--mdc-typography-body3-font-weight: 400;
+	--mdc-typography-body3-font-size: 0.875em;
+	--mdc-typography-body3-line-height: 143%;
+	--mdc-typography-body3-letter-spacing: 0.17px;
+
+	/* th */
+	--mdc-typography-th-font-style: normal;
+	--mdc-typography-th-font-weight: 500;
+	--mdc-typography-th-font-size: 0.875em;
+	--mdc-typography-th-line-height: 24px;
+	--mdc-typography-th-letter-spacing: 0.17px;
+
+	/* overline */
+	--mdc-typography-overline-font-weight: 400;
+
+	font-family: var(--mdc-typography-font-family);
+}
+
+.mdc-typography--body2,
+.mdc-typography--caption {
+	color: var(--mdc-theme-text-secondary-on-light);
+}
+
+.mdc-typography--body3 {
+	font-style: var(--mdc-typography-body3-font-style);
+	font-weight: var(--mdc-typography-body3-font-weight);
+	font-size: var(--mdc-typography-body3-font-size);
+	line-height: var(--mdc-typography-body3-line-height);
+	letter-spacing: var(--mdc-typography-body3-letter-spacing);
+}
+
+.mdc-typography--th {
+	font-style: var(--mdc-typography-th-font-style);
+	font-weight: var(--mdc-typography-th-font-weight);
+	font-size: var(--mdc-typography-th-font-size);
+	line-height: var(--mdc-typography-th-line-height);
+	letter-spacing: var(--mdc-typography-th-letter-spacing);
+	color: var(--mdc-theme-text-primary-on-light);
+}
+
+*,
+::before,
+::after {
+	margin-block: unset;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	background-color: #f5f5f5;
+}
+
+.card {
+	background-color: var(--mdc-theme-surface);
+}
+
+/* Layout | Page */
+.page {
+	padding: 2rem 10rem;
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+@media (max-width: 900px) {
+	.page {
+		padding: 2rem 4rem;
+	}
+}
+@media (max-width: 600px) {
+	.page {
+		padding: 2rem 1rem;
+	}
+}
+
+.page .actionButtonsContainer {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 2rem;
+}
+.page .page-section {
+	gap: 20px;
+	display: flex;
+	flex-direction: column;
+}
+.page .page-header {
+	margin-top: 2rem;
+}
+
+/* Shorthand Classes */
+.invisible {
+	visibility: hidden;
+}
diff --git a/src/ui/lib/api.ts b/src/ui/lib/api.ts
@@ -1,5 +1,10 @@
 import type {
-	APIZarfPackage, ClusterSummary, DeployedPackage, ZarfDeployOptions, ZarfState
+	APIZarfPackage,
+	ClusterSummary,
+	DeployedComponent,
+	DeployedPackage,
+	ZarfDeployOptions,
+	ZarfState
 } from './api-types';
 import { HTTP } from './http';
 
@@ -10,7 +15,7 @@ const Auth = {
 		if (!token) {
 			return false;
 		}
-		
+
 		http.updateToken(token);
 		return await http.head('/');
 	}
@@ -34,4 +39,8 @@ const Packages = {
 	remove: (name: string) => http.del(`/packages/remove/${encodeURIComponent(name)}`)
 };
 
-export { Auth, Cluster, Packages };
+const DeployingComponents = {
+	list: () => http.get<DeployedComponent[]>('/components/deployed')
+};
+
+export { Auth, Cluster, Packages, DeployingComponents };
diff --git a/src/ui/lib/components/accordion-group.svelte b/src/ui/lib/components/accordion-group.svelte
@@ -0,0 +1,25 @@
+<div class="accordion-group"><slot /></div>
+
+<style>
+	.accordion-group {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		border-radius: 4px 4px 0 0;
+	}
+	.accordion-group > :global(:first-child) {
+		border-radius: 4px 4px 0 0;
+	}
+	.accordion-group > :global(:last-child) {
+		border-radius: 0 0 4px 4px;
+	}
+
+	.accordion-group :global(.accordion) {
+		margin: 0;
+	}
+	.accordion-group :global(.accordion:after) {
+		content: '';
+		background-color: rgba(0, 0, 0, 0.12);
+		height: 1px;
+	}
+</style>
diff --git a/src/ui/lib/components/divider.svelte b/src/ui/lib/components/divider.svelte
@@ -0,0 +1,7 @@
+<div class="divider" />
+
+<style>
+	.divider {
+		border: 1px solid rgba(0, 0, 0, 0.12);
+	}
+</style>
diff --git a/src/ui/lib/components/hero.svelte b/src/ui/lib/components/hero.svelte
@@ -21,18 +21,4 @@
 		align-items: center;
 		gap: 1rem;
 	}
-	.hero-content :global(.hero-subtitle) {
-		font-size: large;
-	}
-	.hero-content :global(.hero-text) {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		margin: 1rem 0;
-	}
-
-	.hero-content :global(h1),
-	.hero-content :global(h2) {
-		margin: 0;
-	}
 </style>