From 73ffb97414f0599208cf98bea134fec7e95b1e68 Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gzuccare@redhat.com>
Date: Wed, 30 Apr 2025 12:21:23 +0100
Subject: [PATCH] cloudConfig: error component

Add an error component to improve the UI when there is an issue reading
the `osbuild-worker.toml` file.
---
 .../CloudProviderConfig.tsx                   | 53 +++++++++++++++----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/Components/CloudProviderConfig/CloudProviderConfig.tsx b/src/Components/CloudProviderConfig/CloudProviderConfig.tsx
index 183685c8..793d1be6 100644
--- a/src/Components/CloudProviderConfig/CloudProviderConfig.tsx
+++ b/src/Components/CloudProviderConfig/CloudProviderConfig.tsx
@@ -1,6 +1,18 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { MouseEventHandler, useCallback, useEffect } from 'react';
 
-import { PageSection, Wizard, WizardStep } from '@patternfly/react-core';
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  PageSection,
+  Title,
+  Wizard,
+  WizardStep,
+} from '@patternfly/react-core';
+import { ExclamationIcon } from '@patternfly/react-icons';
 import { useNavigate } from 'react-router-dom';
 
 import { AWSConfig } from './AWSConfig';
@@ -17,6 +29,35 @@ import { useAppDispatch } from '../../store/hooks';
 import { resolveRelPath } from '../../Utilities/path';
 import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
 
+const ConfigError = ({
+  onClose,
+}: {
+  onClose: MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <EmptyState
+      variant={EmptyStateVariant.xl}
+      icon={ExclamationIcon}
+      color="#C9190B"
+    >
+      <Title headingLevel="h4" size="lg">
+        Error
+      </Title>
+      <EmptyStateBody>
+        There was an error reading the `/etc/osbuild-worker/osbuild-worker.toml`
+        config file
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="primary" onClick={onClose}>
+            Go back
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
+
 export const CloudProviderConfig = () => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -48,13 +89,7 @@ export const CloudProviderConfig = () => {
   }, [data, initAWSConfig]);
 
   if (error) {
-    // TODO: improve error alert
-    return (
-      <div>
-        There was an error reading the `/etc/osbuild-worker/osbuild-worker.toml`
-        config file
-      </div>
-    );
+    return <ConfigError onClose={handleClose} />;
   }
 
   return (