chore(greenhouse): use page level error message instead of inline (#1481)

Author: taymoor89

.changeset/ripe-files-happen.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-greenhouse": patch
+---
+
+Removed inline error message from ReconcileButton and use MessagesProvider instead to display page level errors.

apps/greenhouse/src/components/admin/Layout/index.tsx

@@ -4,11 +4,12 @@
  */
 
 import React from "react"
-import { Container } from "@cloudoperators/juno-ui-components"
+import { Container, Stack } from "@cloudoperators/juno-ui-components"
 import { Breadcrumb } from "./Breadcrumb"
 import { Navigation } from "./Navigation"
 import { ErrorMessage } from "../common/ErrorBoundary/ErrorMessage"
 import { Outlet } from "@tanstack/react-router"
+import { MessagesProvider, Messages } from "@cloudoperators/juno-messages-provider"
 
 type LayoutProps = {
   error?: Error
@@ -19,12 +20,14 @@ export const Layout = ({ error }: LayoutProps) => (
     <Navigation />
     <Container py px>
       <Breadcrumb />
-      {/*
-        This ensures that if an error was not caught by a sub-route,
-        it is caught and displayed here keeping breadcrumb and the navigation visible,
-        providing a consistent layout for error handling.
-      */}
-      {error ? <ErrorMessage error={error} /> : <Outlet />}
+      <MessagesProvider>
+        <Stack direction="vertical" gap="4">
+          <Messages />
+          {/* If an error from a sub-route reaches this layout, display it inline
+              while keeping the navigation and breadcrumb visible for context. */}
+          {error ? <ErrorMessage error={error} /> : <Outlet />}
+        </Stack>
+      </MessagesProvider>
     </Container>
   </>
 )

apps/greenhouse/src/components/admin/PluginPresetDetail/index.test.tsx

@@ -14,6 +14,7 @@ import {
 } from "@tanstack/react-router"
 import { render, screen } from "@testing-library/react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import { PluginPresetDetail } from "./index"
 import { mockPluginPresets } from "../__mocks__/pluginPresets"
 
@@ -25,19 +26,21 @@ const renderComponent = async (mockPromise: Promise<unknown>) => {
     getParentRoute: () => rootRoute,
     path: "/admin/plugin-presets/$pluginPresetName",
     component: () => (
-      <QueryClientProvider
-        client={
-          new QueryClient({
-            defaultOptions: {
-              queries: {
-                retry: false,
+      <MessagesProvider>
+        <QueryClientProvider
+          client={
+            new QueryClient({
+              defaultOptions: {
+                queries: {
+                  retry: false,
+                },
               },
-            },
-          })
-        }
-      >
-        <PluginPresetDetail />
-      </QueryClientProvider>
+            })
+          }
+        >
+          <PluginPresetDetail />
+        </QueryClientProvider>
+      </MessagesProvider>
     ),
   })
   const routeTree = rootRoute.addChildren([testRoute])

apps/greenhouse/src/components/admin/common/ReconcileButton.test.tsx

@@ -15,6 +15,7 @@ import {
   RouterProvider,
 } from "@tanstack/react-router"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import { ReconcileButton } from "./ReconcileButton"
 
 const renderComponent = async (onReconcile?: () => void, mockPatch?: any, onError?: (error: Error) => void) => {
@@ -25,28 +26,30 @@ const renderComponent = async (onReconcile?: () => void, mockPatch?: any, onErro
     getParentRoute: () => rootRoute,
     path: "/test",
     component: () => (
-      <QueryClientProvider
-        client={
-          new QueryClient({
-            defaultOptions: {
-              queries: {
-                retry: false,
+      <MessagesProvider>
+        <QueryClientProvider
+          client={
+            new QueryClient({
+              defaultOptions: {
+                queries: {
+                  retry: false,
+                },
+                mutations: {
+                  retry: false,
+                },
               },
-              mutations: {
-                retry: false,
-              },
-            },
-          })
-        }
-      >
-        <ReconcileButton
-          resourceType="plugins"
-          resourceName="test-plugin"
-          namespace="test-namespace"
-          onReconcile={onReconcile}
-          onError={onError}
-        />
-      </QueryClientProvider>
+            })
+          }
+        >
+          <ReconcileButton
+            resourceType="plugins"
+            resourceName="test-plugin"
+            namespace="test-namespace"
+            onReconcile={onReconcile}
+            onError={onError}
+          />
+        </QueryClientProvider>
+      </MessagesProvider>
     ),
   })
   const routeTree = rootRoute.addChildren([testRoute])

apps/greenhouse/src/components/admin/common/ReconcileButton.tsx

@@ -6,10 +6,10 @@
 import React from "react"
 import { useRouteContext } from "@tanstack/react-router"
 import { useMutation } from "@tanstack/react-query"
-import { Button, Stack } from "@cloudoperators/juno-ui-components"
+import { Button } from "@cloudoperators/juno-ui-components"
+import { useActions } from "@cloudoperators/juno-messages-provider"
 import { annotateResource } from "../api/annotateResource"
 import { RouteContext } from "../../../routes/__root"
-import { ErrorMessage } from "./ErrorBoundary/ErrorMessage"
 
 interface ReconcileButtonProps {
   resourceType: string
@@ -27,6 +27,7 @@ export const ReconcileButton: React.FC<ReconcileButtonProps> = ({
   onError,
 }) => {
   const { apiClient } = useRouteContext({ strict: false }) as RouteContext
+  const { addMessage } = useActions()
 
   const annotateMutation = useMutation({
     mutationFn: () =>
@@ -42,7 +43,11 @@ export const ReconcileButton: React.FC<ReconcileButtonProps> = ({
     onSuccess: () => {
       onReconcile?.()
     },
-    onError: (error: Error) => {
+    onError: (error) => {
+      addMessage({
+        variant: "error",
+        text: `Failed to reconcile ${resourceType} "${resourceName}": ${error.message}`,
+      })
       onError?.(error)
     },
   })
@@ -52,16 +57,13 @@ export const ReconcileButton: React.FC<ReconcileButtonProps> = ({
   }
 
   return (
-    <Stack direction="vertical" gap="2" alignment="end">
-      <Button
-        variant="subdued"
-        size="small"
-        label={annotateMutation.isPending ? "Reconciling" : "Reconcile"}
-        onClick={handleReconcile}
-        progress={annotateMutation.isPending}
-        disabled={annotateMutation.isPending}
-      />
-      {annotateMutation.error && <ErrorMessage error={annotateMutation.error} />}
-    </Stack>
+    <Button
+      variant="subdued"
+      size="small"
+      label={annotateMutation.isPending ? "Reconciling" : "Reconcile"}
+      onClick={handleReconcile}
+      progress={annotateMutation.isPending}
+      disabled={annotateMutation.isPending}
+    />
   )
 }