feat: replace error messages with Alert component for better UI consistency (11cb46d6) · Commits · OOP / code / portal

portal-gui/src/components/api-clients/create-api-client-dialog.tsx

+5 −15

Changes for portal-gui/src/components/api-clients/create-api-client-dialog.tsx: 5 added lines, 15 removed lines.
Original line number	Diff line number	Diff line
		import { useState } from 'react';

		import { Alert } from '@/components/ui/alert';
		import { Button } from '@/components/ui/button';
		import { Checkbox } from '@/components/ui/checkbox';
		import {
		@@ -17,9 +18,6 @@ import { useSingleFlight } from '@/hooks/useSingleFlight';
		import { createApiClient } from '@/services/api-clients/api-clients';
		import type { CreatedApiClient } from '@/types/api-clients';

		const ALERT =
		'rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive';

		export function CreateApiClientDialog({
		onClose,
		onCreated,
		@@ -103,16 +101,12 @@ export function CreateApiClientDialog({
		{loading && (
		<p className="text-sm text-muted-foreground">Loading…</p>
		)}
		{productsFailed && (
		<p role="alert" className={ALERT}>
		Could not load the products.
		</p>
		)}
		{productsFailed && <Alert>Could not load the products.</Alert>}
		{holdsNone && (
		<p role="alert" className={ALERT}>
		<Alert>
		You don't hold any API product yet. Ask an operator to
		grant you access.
		</p>
		</Alert>
		)}
		{products.map((product) => (
		<div key={product.name} className="flex items-start gap-2">
		@@ -137,11 +131,7 @@ export function CreateApiClientDialog({
		))}
		</fieldset>

		{message && (
		<p role="alert" className={ALERT}>
		{message}
		</p>
		)}
		{message && <Alert>{message}</Alert>}
		</div>

		<DialogFooter>

+2 −5

Changes for portal-gui/src/components/applications/create-app-dialog.tsx: 2 added lines, 5 removed lines.
Original line number	Diff line number	Diff line
		@@ -38,6 +38,7 @@ import {
		defaultAppInterface,
		} from '@/types/application';
		import { useSingleFlight } from '@/hooks/useSingleFlight';
		import { Alert } from '@/components/ui/alert';

		const initialForm = (): AppFormState => ({
		name: '',
		@@ -562,11 +563,7 @@ export const CreateApplicationDialog = ({
		)}
		</section>

		{error && (
		<div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
		{error}
		</div>
		)}
		{error && <Alert>{error}</Alert>}
		</div>
		<DialogFooter>
		<Button

+2 −5

Changes for portal-gui/src/components/applications/deploy-app-dialog.tsx: 2 added lines, 5 removed lines.
Original line number	Diff line number	Diff line
		@@ -18,6 +18,7 @@ import type { EdgeCloudZone, AppDeployProps } from '@/types/application';
		import { deployApplication } from '@/services/applications/deployments';
		import { getEdgeCloudZones } from '@/services/applications/profiles';
		import { useSingleFlight } from '@/hooks/useSingleFlight';
		import { Alert } from '@/components/ui/alert';
		export function DeployApplicationDialog({
		open,
		onOpenChange,
		@@ -193,11 +194,7 @@ export function DeployApplicationDialog({
		</div>
		)}

		{error && (
		<div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
		{error}
		</div>
		)}
		{error && <Alert>{error}</Alert>}
		</div>

		<DialogFooter>

+2 −6

Changes for portal-gui/src/components/applications/instantiate-app-dialog.tsx: 2 added lines, 6 removed lines.
Original line number	Diff line number	Diff line
		@@ -22,6 +22,7 @@ import type {
		} from '@/types/application';
		import { instantiateApp } from '@/services/applications/instances';
		import { useSingleFlight } from '@/hooks/useSingleFlight';
		import { Alert } from '@/components/ui/alert';
		const uuidPattern =
		'[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}';
		const namePattern = '[A-Za-z][A-Za-z0-9_]{1,63}';
		@@ -282,12 +283,7 @@ export const InstantiateApplicationDialog = ({
		disabled={submitting}
		/>
		</label>
		{error && (
		<p role="alert" className="text-sm text-destructive">
		{' '}
		{error}{' '}
		</p>
		)}
		{error && <Alert>{error}</Alert>}

		<DialogFooter>
		<Button

+2 −5

Changes for portal-gui/src/components/common/confirm-action-dialog.tsx: 2 added lines, 5 removed lines.
Original line number	Diff line number	Diff line
		import { useState, type ReactNode } from 'react';

		import { useSingleFlight } from '@/hooks/useSingleFlight';
		import { Alert } from '@/components/ui/alert';

		import {
		AlertDialog,
		@@ -61,11 +62,7 @@ export function ConfirmActionDialog({
		<AlertDialogDescription>{description}</AlertDialogDescription>
		</AlertDialogHeader>

		{error && (
		<p role="alert" className="text-sm text-destructive">
		{error}
		</p>
		)}
		{error && <Alert>{error}</Alert>}

		<AlertDialogFooter>
		<AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>