Merge branch 'main' into guoda-improve-toolbar

Author: guoda-puidokaite

.changeset/improve-error-message-type-safety.md

@@ -0,0 +1,6 @@
+---
+"@cloudoperators/juno-app-greenhouse": patch
+"@cloudoperators/juno-app-heureka": patch
+---
+
+Improve ErrorMessage type safety.

apps/greenhouse/src/components/admin/common/ErrorBoundary/ErrorMessage.test.tsx

@@ -31,4 +31,18 @@ describe("ErrorMessage", () => {
     const errorText = screen.getByText("TestError: Something went wrong")
     expect(errorText).toBeInTheDocument()
   })
+
+  it("renders error from string", () => {
+    const error = "Failed to load data"
+    render(<ErrorMessage error={error} />)
+    const errorText = screen.getByText("Error: Failed to load data")
+    expect(errorText).toBeInTheDocument()
+  })
+
+  it("renders default message for unknown error types", () => {
+    const error = { someOtherProperty: "value" }
+    render(<ErrorMessage error={error} />)
+    const errorText = screen.getByText("Error: Something went wrong")
+    expect(errorText).toBeInTheDocument()
+  })
 })

apps/greenhouse/src/components/admin/common/ErrorBoundary/ErrorMessage.tsx

@@ -4,27 +4,37 @@
  */
 
 import React from "react"
-import { FallbackProps } from "react-error-boundary"
 import { Icon, Stack } from "@cloudoperators/juno-ui-components"
 
-type ErrorMessageProps =
-  | {
-      error: Error
+function getErrorInfo(error: unknown): { name: string; message: string } {
+  const defaultError = { name: "Error", message: "Something went wrong" }
+
+  if (error instanceof Error) {
+    return {
+      name: error.name || defaultError.name,
+      message: error.message || defaultError.message,
     }
-  | FallbackProps
+  }
+
+  if (typeof error === "string") {
+    return { name: defaultError.name, message: error }
+  }
+
+  return defaultError
+}
+
+export interface ErrorMessageProps {
+  error: unknown
+}
 
 export const ErrorMessage = ({ error }: ErrorMessageProps) => {
-  // Handle both direct Error prop and FallbackProps from react-error-boundary
-  const errorObj = error as Error
-  const errorName = errorObj.name ? `${errorObj.name}: ` : "Error: "
-  const errorMessage = errorObj.message || "Something went wrong"
+  const { name, message } = getErrorInfo(error)
 
   return (
     <Stack gap="2" alignment="center">
       <Icon icon="danger" className="text-theme-danger" />
       <span>
-        {errorName}
-        {errorMessage}
+        {name}: {message}
       </span>
     </Stack>
   )

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

@@ -36,7 +36,7 @@ export default function YamlViewer({ value, ...props }: YamlViewerProps) {
   return (
     <div ref={containerRef} className="overflow-x-auto max-w-full">
       {error ? (
-        <ErrorMessage error={new Error(error)} />
+        <ErrorMessage error={error} />
       ) : (
         <CodeMirror
           value={yamlContent}

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

@@ -13,7 +13,7 @@ export const getErrorDataRowComponent = ({ colspan }: { colspan: number }) => {
   const ErrorDataRow = ({ error }: FallbackProps) => (
     <EmptyDataGridRow colSpan={colspan}>
       <Stack gap="2" alignment="center">
-        <ErrorMessage error={error as Error} />
+        <ErrorMessage error={error} />
       </Stack>
     </EmptyDataGridRow>
   )

apps/heureka/package.json

@@ -39,10 +39,10 @@
   "devDependencies": {
     "@apollo/client": "4.1.5",
     "@cloudoperators/juno-config": "workspace:*",
-    "@graphql-codegen/cli": "5.0.7",
-    "@graphql-codegen/typescript": "4.1.6",
-    "@graphql-codegen/typescript-operations": "4.6.1",
-    "@graphql-codegen/typescript-react-apollo": "4.4.0",
+    "@graphql-codegen/cli": "6.1.3",
+    "@graphql-codegen/typescript": "5.0.9",
+    "@graphql-codegen/typescript-operations": "5.0.9",
+    "@graphql-codegen/typescript-react-apollo": "4.4.1",
     "@tanstack/router-plugin": "1.161.3",
     "@tailwindcss/vite": "4.2.0",
     "@testing-library/jest-dom": "6.9.1",

apps/heureka/src/components/common/ErrorBoundary/ErrorMessage.test.tsx

@@ -31,4 +31,18 @@ describe("ErrorMessage", () => {
     const errorText = screen.getByText("TestError: Something went wrong")
     expect(errorText).toBeInTheDocument()
   })
+
+  it("renders error from string", () => {
+    const error = "Failed to load data"
+    render(<ErrorMessage error={error} />)
+    const errorText = screen.getByText("Error: Failed to load data")
+    expect(errorText).toBeInTheDocument()
+  })
+
+  it("renders default message for unknown error types", () => {
+    const error = { someOtherProperty: "value" }
+    render(<ErrorMessage error={error} />)
+    const errorText = screen.getByText("Error: Something went wrong")
+    expect(errorText).toBeInTheDocument()
+  })
 })

apps/heureka/src/components/common/ErrorBoundary/ErrorMessage.tsx

@@ -4,27 +4,37 @@
  */
 
 import React from "react"
-import { FallbackProps } from "react-error-boundary"
 import { Icon, Stack } from "@cloudoperators/juno-ui-components"
 
-type ErrorMessageProps =
-  | {
-      error: Error
+function getErrorInfo(error: unknown): { name: string; message: string } {
+  const defaultError = { name: "Error", message: "Something went wrong" }
+
+  if (error instanceof Error) {
+    return {
+      name: error.name || defaultError.name,
+      message: error.message || defaultError.message,
     }
-  | FallbackProps
+  }
+
+  if (typeof error === "string") {
+    return { name: defaultError.name, message: error }
+  }
+
+  return defaultError
+}
+
+export interface ErrorMessageProps {
+  error: unknown
+}
 
 export const ErrorMessage = ({ error }: ErrorMessageProps) => {
-  // Handle both direct Error prop and FallbackProps from react-error-boundary
-  const errorObj = error as Error
-  const errorName = errorObj.name ? `${errorObj.name}: ` : "Error: "
-  const errorMessage = errorObj.message || "Something went wrong"
+  const { name, message } = getErrorInfo(error)
 
   return (
     <Stack gap="2" alignment="center">
       <Icon icon="danger" className="text-theme-danger" />
       <span>
-        {errorName}
-        {errorMessage}
+        {name}: {message}
       </span>
     </Stack>
   )

apps/heureka/src/components/common/Filters/PlaceHolderFilterSelect.tsx

@@ -8,26 +8,30 @@ import { Stack, InputGroup, Select, ComboBox } from "@cloudoperators/juno-ui-com
 
 export type PlaceHolderFilterSelectProps = {
   loading?: boolean
-  error?: Error
+  error?: unknown
 }
 
-export const PlaceHolderFilterSelect = ({ loading, error }: PlaceHolderFilterSelectProps) => (
-  <Stack alignment="center" gap="8">
-    <InputGroup>
-      <Select
-        loading={loading}
-        className="filter-label-select w-64 mb-0"
-        name="filter"
-        data-testid="select-filterValue"
-        label="Filter"
-        errortext={error ? error.message || "Error loading filters" : undefined}
-      ></Select>
-      <ComboBox
-        disabled
-        className="filter-value-select w-64 bg-theme-background-lvl-0"
-        name="filterValue"
-        data-testid="combobox-filterValue"
-      ></ComboBox>
-    </InputGroup>
-  </Stack>
-)
+export const PlaceHolderFilterSelect = ({ loading, error }: PlaceHolderFilterSelectProps) => {
+  const errorMessage = error instanceof Error ? error.message : "Error loading filters"
+
+  return (
+    <Stack alignment="center" gap="8">
+      <InputGroup>
+        <Select
+          loading={loading}
+          className="filter-label-select w-64 mb-0"
+          name="filter"
+          data-testid="select-filterValue"
+          label="Filter"
+          errortext={error ? errorMessage : undefined}
+        ></Select>
+        <ComboBox
+          disabled
+          className="filter-value-select w-64 bg-theme-background-lvl-0"
+          name="filterValue"
+          data-testid="combobox-filterValue"
+        ></ComboBox>
+      </InputGroup>
+    </Stack>
+  )
+}

apps/heureka/src/components/common/Filters/index.tsx

@@ -37,7 +37,7 @@ export const Filters = ({ filtersPromise, filterSettings, onFilterChange, search
         <InputGroup>
           <ErrorBoundary
             displayErrorMessage
-            fallbackRender={(props) => <PlaceHolderFilterSelect error={props.error as Error} />}
+            fallbackRender={(props) => <PlaceHolderFilterSelect error={props.error} />}
           >
             <Suspense fallback={<PlaceHolderFilterSelect loading />}>
               <FilterSelect