feat: enhance data table and API client components with refresh error handling and loading states (6e323c07) · Commits · OOP / code / portal

portal-gui/src/components/data-table/data-table.tsx

+15 −1

Changes for portal-gui/src/components/data-table/data-table.tsx: 15 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -36,6 +36,7 @@ import {
		} from 'lucide-react';

		import { Button } from '@/components/ui/button';
		import { Alert } from '@/components/ui/alert';
		import {
		DropdownMenu,
		DropdownMenuCheckboxItem,
		@@ -61,7 +62,9 @@ export function DataTable<TData>({
		getRowId,
		noun,
		filters,
		showColumnSelection = false,
		refreshing = false,
		refreshError,
		onRefresh,
		onVisibleRows,
		}: DataTableProps<TData>) {
		@@ -129,6 +132,13 @@ export function DataTable<TData>({

		return (
		<>
		{refreshError && (
		<div className="px-4 lg:px-6">
		<Alert>
		Could not refresh {noun}: {refreshError}
		</Alert>
		</div>
		)}
		<div className="flex items-center justify-between px-4 lg:px-6">
		<div className="relative max-w-sm flex-1">
		<SearchIcon className="absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" />
		@@ -141,6 +151,7 @@ export function DataTable<TData>({
		/>
		</div>

		{showColumnSelection && (
		<DropdownMenu>
		<DropdownMenuTrigger asChild>
		<Button variant="outline" size="sm">
		@@ -157,7 +168,9 @@ export function DataTable<TData>({
		<DropdownMenuCheckboxItem
		key={column.id}
		checked={column.getIsVisible()}
		onCheckedChange={(value) => column.toggleVisibility(!!value)}
		onCheckedChange={(value) =>
		column.toggleVisibility(!!value)
		}
		>
		{typeof column.columnDef.header === 'string'
		? column.columnDef.header
		@@ -166,6 +179,7 @@ export function DataTable<TData>({
		))}
		</DropdownMenuContent>
		</DropdownMenu>
		)}
		</div>

		<div className="flex flex-wrap items-end gap-3 px-4 lg:px-6">

+13 −3

Changes for portal-gui/src/features/api-clients/api-clients.tsx: 13 added lines, 3 removed lines.
Original line number	Diff line number	Diff line
		@@ -20,8 +20,15 @@ import {
		import type { ApiClient, CreatedApiClient } from '@/types/api-clients';

		export function ApiClientsPage() {
		const { clients, loading, error, unavailable, retry, removeClient } =
		useApiClients();
		const {
		clients,
		loading,
		refreshing,
		error,
		unavailable,
		retry,
		removeClient,
		} = useApiClients();
		const [creating, setCreating] = useState(false);
		const [created, setCreated] = useState<CreatedApiClient \| null>(null);
		const [deleting, setDeleting] = useState<ApiClient \| null>(null);
		@@ -51,9 +58,10 @@ export function ApiClientsPage() {
		{unavailable === false && <ApiClientsNotice />}
		<PageState
		loading={loading}
		error={error}
		error={Boolean(error) && clients.length === 0}
		empty={clients.length === 0}
		errorTitle="Could not load your API clients"
		errorDescription={error}
		emptyTitle="No API clients yet"
		emptyDescription="Create one to call the APIs from your own application."
		onRetry={retry}
		@@ -63,6 +71,8 @@ export function ApiClientsPage() {
		columns={columns}
		getRowId={(client) => client.id}
		noun="API clients"
		refreshing={refreshing}
		refreshError={error}
		onRefresh={retry}
		/>
		</PageState>

+5 −2

Changes for portal-gui/src/features/applications/application-deployments.tsx: 5 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		@@ -30,6 +30,7 @@ export function ApplicationDeploymentsPage() {
		deployments,
		visibleDeployments,
		deploymentsLoading,
		refreshing,
		deploymentsError,
		loadDeployments,
		refresh,
		@@ -67,8 +68,8 @@ export function ApplicationDeploymentsPage() {
		<PageContent>
		{deploymentsLoading ? (
		<LoadingState />
		) : deploymentsError ? (
		<ErrorState />
		) : deploymentsError && deployments.length === 0 ? (
		<ErrorState description={deploymentsError} onRetry={refresh} />
		) : deployments.length === 0 ? (
		<EmptyState />
		) : (
		@@ -79,6 +80,8 @@ export function ApplicationDeploymentsPage() {
		columns={columns}
		getRowId={(deployment) => deployment.appDeploymentId}
		noun="deployments"
		refreshing={refreshing}
		refreshError={deploymentsError ?? undefined}
		onRefresh={refresh}
		filters={() => (
		<>

+5 −2

Changes for portal-gui/src/features/applications/application-instances.tsx: 5 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		@@ -32,6 +32,7 @@ export function ApplicationInstancesPage() {
		edgeZoneId,
		setEdgeZoneId,
		loading,
		refreshing,
		error,

		createOpen,
		@@ -83,8 +84,8 @@ export function ApplicationInstancesPage() {
		<PageContent>
		{loading ? (
		<LoadingState />
		) : error ? (
		<ErrorState />
		) : error && instances.length === 0 ? (
		<ErrorState description={error} onRetry={refresh} />
		) : instances.length === 0 ? (
		<EmptyState />
		) : (
		@@ -95,6 +96,8 @@ export function ApplicationInstancesPage() {
		columns={columns}
		getRowId={(instance) => instance.appInstanceId}
		noun="instances"
		refreshing={refreshing}
		refreshError={error}
		onRefresh={refresh}
		filters={() => (
		<>

+5 −2

Changes for portal-gui/src/features/applications/application-profiles.tsx: 5 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		@@ -28,6 +28,7 @@ export function ApplicationProfilesPage() {
		const {
		apps,
		appsLoading,
		refreshing,
		appsError,
		appsErrorMessage,
		addApp,
		@@ -63,11 +64,11 @@ export function ApplicationProfilesPage() {
		<PageContent>
		{appsLoading ? (
		<LoadingState />
		) : appsError ? (
		) : appsError && apps.length === 0 ? (
		<ErrorState
		title="Could not load application profiles"
		description={appsErrorMessage}
		onRetry={() => window.location.reload()}
		onRetry={refresh}
		/>
		) : apps.length === 0 ? (
		<EmptyState />
		@@ -78,6 +79,8 @@ export function ApplicationProfilesPage() {
		columns={columns}
		getRowId={(app) => app.appId}
		noun="application profiles"
		refreshing={refreshing}
		refreshError={appsError ? appsErrorMessage : undefined}
		onRefresh={refresh}
		filters={(table) => (
		<FilterSelect