Redesign automations UI with card-based flow and improved UX

[karinakharchenko]

Summary

• Redesign automations page with card-based creation/edit flow featuring WHEN/THEN step badges, trigger pills, and action method pills
• Replace dropdown-based form with visual tile-based trigger selection (Add row, Update row, Delete row, Custom) with colored active states
• Improve Save button UX: always active with inline validation that focuses empty fields top-to-bottom
• Replace sidebar add icon with dashed "Add automation" button showing "New automation" placeholder in real-time
• Unify styling between creation and edit modes with full dark/light theme support
• Fix action card visibility bug when all triggers deselected
• Update icon-picker to show "Add icon"/"Change icon" with dashed border

Test plan

• Navigate to automations with 0 rules — empty state visible with "Create automation" button
• Click "Add automation" in sidebar — "New automation" appears in list, form opens
• Type name — sidebar title updates in real-time
• Toggle trigger pills — colored active states, "or" separators visible
• Select Custom trigger — inline settings (label, icon picker, confirmation, affects) appear
• Action card disabled until triggers selected; pulse animation on Save without triggers
• Select action method (URL/Email/Slack) — corresponding fields appear
• Click Save with empty fields — focuses first empty field without red errors
• Successful save — button shows "Saved" and becomes disabled
• Click saved rule in sidebar — edit view with same card layout
• Back button navigates to table view
• Dark and light themes render correctly

🤖 Generated with Claude Code

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull request overview

This PR redesigns the database table “Automations” page to a card-based WHEN/THEN flow with trigger/action pills, improved empty/creation states, and a refreshed icon picker button UX.

Changes:

• Reworked automations editor UI into a two-step (Triggers → Action) card layout with pill/tile interactions and a fixed bottom action bar.
• Updated save UX/state tracking (e.g., isSaved, creation mode) and added inline focus/scroll guidance for missing required inputs.
• Updated the icon picker trigger button to display “Add icon” / “Change icon” with a unified button style.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
frontend/src/app/components/ui-components/icon-picker/icon-picker.component.html	Simplifies icon-picker trigger into a single button that changes label based on whether an icon is selected.
frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts	Adds creation/edit state, trigger/action selection helpers, and inline validation/focus logic for the new UI flow.
frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html	Replaces the old dropdown-based form with a card-based WHEN/THEN flow and sidebar “Add automation” behavior.
frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css	Introduces new styling for the card flow, pills, and fixed action bar (dark/light scheme support).

Comments suppressed due to low confidence (1)

frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts:548

• After switching to the new trigger-pill UI, several legacy methods/properties appear unused by the template (handleAddNewRule(), onEventChange(), removeEvent(), and related “trailing null” handling). Leaving both the new flow and the old form logic in place increases complexity and the risk of state bugs. Consider removing the unused legacy paths or explicitly isolating them behind a feature flag to keep the component’s state model single-purpose.

	onEventChange(event: any) {
		console.log(this.selectedRule.events);
		this.selectedEvents.push(event.value);

		let customEvent = this.selectedRule.events.find((event) => event.event === EventType.Custom);

		if (event.value === EventType.Custom) {
			customEvent = {
				...customEvent,
				title: '',
				type: CustomActionType.Single,
				icon: '',
				require_confirmation: false,
			};
			// this.selectedRule.events.push(customEvent);
			this.selectedRuleCustomEvent = customEvent;
		}

		if (this.selectedRule.events.length < 4) {
			this.selectedRule.events.push({ event: null });
		}
	}

	toggleTriggerTile(eventType: EventType) {
		this.isSaved = false;
		const idx = this.selectedEvents.indexOf(eventType);
		if (idx > -1) {
			// Remove trigger
			this.selectedRule.events = this.selectedRule.events.filter((e) => e.event !== eventType);
			this.selectedEvents = this.selectedEvents.filter((e) => e !== eventType);
			if (eventType === EventType.Custom) {
				this.selectedRuleCustomEvent = null;
			}
		} else {
			// Add trigger
			this.selectedRule.events = this.selectedRule.events.filter((e) => e.event !== null);
			this.selectedRule.events.push({ event: eventType });
			this.selectedEvents.push(eventType);
			if (eventType === EventType.Custom) {
				this.selectedRuleCustomEvent = {
					event: EventType.Custom,
					title: '',
					type: CustomActionType.Single,
					icon: '',
					require_confirmation: false,
				};
			}
		}
		// Keep trailing null for the old form
		if (this.selectedRule.events[this.selectedRule.events.length - 1]?.event !== null) {
			this.selectedRule.events.push({ event: null });
		}
	}

	selectActionMethod(method: string) {
		this.isSaved = false;
		if (this.selectedRule.table_actions.length) {
			this.selectedRule.table_actions[0].method = method as CustomActionMethod;
		}
	}

	removeEvent(event: any) {
		this.selectedRule.events = this.selectedRule.events.filter((e) => e.event !== event);
		this.selectedEvents = this.selectedRule.events.map((event) => event.event);

		if (event === EventType.Custom) {
			this.selectedRuleCustomEvent = null;
		}

		if (this.selectedRule.events.length === 3) {
			this.selectedRule.events.push({ event: null });
		}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

There are several newly introduced members/imports that appear unused in this component after the UI refactor (e.g. @ViewChild('newActionInput'), MatButtonToggleModule, MatMenuModule, and MatRadioModule). Keeping unused ViewChild queries and module imports makes the component harder to maintain and can confuse future refactors. Remove unused imports/fields or wire them up if they’re intended for upcoming work.

[Copilot]

This template assumes selectedRule.table_actions[0] always exists (e.g. $any(selectedRule.table_actions[0]).method and bindings to [0].url/emails/slack_url). If a rule is loaded with an empty table_actions array, change detection will throw when reading .method from undefined and the page will break. Consider guarding this block with an *ngIf/@if on selectedRule.table_actions?.length, or initializing a default action when selecting/creating a rule so [0] is always defined.

[Copilot]

isSaved isn't reset when switching rules via setSelectedRule(). After saving one rule (isSaved = true), selecting a different rule will still show a disabled “Saved” button until the user edits something, which is misleading and can block an immediate save. Reset isSaved (and potentially other creation-state flags) inside setSelectedRule() and/or addNewRule() so each rule starts in a consistent state.

[Copilot]

In addRule(), this.newRule is cleared before the save request completes. If the request fails, the unsaved placeholder rule remains in rules but can no longer be undone via undoRule() (which relies on newRule), leaving the UI in a stuck creation state. Consider only clearing newRule (and toggling isCreationMode) after a successful save, or keeping a separate reference so cancel/undo still works on failure.