feat(portal): translation of flavorsUI and errors (#350)

* feat(portal): added flavor translations

* feat(portal): added flavor translations

* fix(portal): fixed tests

* fix(portal): change import

* fix(core): all t trans

* chore(portal): extract and compile lingui

Author: TilmanHaupt

apps/aurora-portal/src/client/routes/_auth/accounts/$accountId/projects/$projectId/compute/-components/Flavors/-components/FilterToolbar.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Stack, Select, SelectOption, InputGroup, SearchInput } from "@cloudoperators/juno-ui-components"
+import { useLingui } from "@lingui/react/macro"
 
 interface FilterToolbarProps {
   searchTerm: string
@@ -18,6 +19,7 @@ const FilterToolbar: React.FC<FilterToolbarProps> = ({
   sortDirection,
   handleSortDirectionChange,
 }) => {
+  const { t } = useLingui()
   const [debounceTimer, setDebounceTimer] = useState<number | undefined>(undefined)
 
   const handleSearchChange = (value: React.ChangeEvent<HTMLInputElement>) => {
@@ -45,7 +47,7 @@ const FilterToolbar: React.FC<FilterToolbarProps> = ({
         <Stack direction="vertical" gap="3" className="w-full">
           <Stack gap="6" className="flex flex-row items-center flex-wrap w-full">
             <SearchInput
-              placeholder="Enter search term or regex"
+              placeholder={t`Enter search term or regex`}
               value={searchTerm || ""}
               className="w-full md:w-80 flex-shrink-0"
               onInput={handleSearchChange}
@@ -54,18 +56,18 @@ const FilterToolbar: React.FC<FilterToolbarProps> = ({
             />
             <Stack className="flex flex-row items-center">
               <InputGroup className="flex-shrink-0 w-full md:w-80">
-                <Select onChange={handleSortByChange} value={sortBy} data-testid="sort-select">
-                  <SelectOption value="name">Name</SelectOption>
-                  <SelectOption value="vcpus">VCPUs</SelectOption>
-                  <SelectOption value="ram">RAM</SelectOption>
-                  <SelectOption value="disk">Root Disk</SelectOption>
-                  <SelectOption value="OS-FLV-EXT-DATA:ephemeral">Ephemeral Disk</SelectOption>
-                  <SelectOption value="swap">Swap</SelectOption>
-                  <SelectOption value="rxtx_factor">RX/TX Factor</SelectOption>
+                <Select onChange={handleSortByChange} value={sortBy} data-testid="sort-select" label={t`sort by`}>
+                  <SelectOption value="name">{t`Name`}</SelectOption>
+                  <SelectOption value="vcpus">{t`VCPUs`}</SelectOption>
+                  <SelectOption value="ram">{t`RAM`}</SelectOption>
+                  <SelectOption value="disk">{t`Root Disk`}</SelectOption>
+                  <SelectOption value="OS-FLV-EXT-DATA:ephemeral">{t`Ephemeral Disk`}</SelectOption>
+                  <SelectOption value="swap">{t`Swap`}</SelectOption>
+                  <SelectOption value="rxtx_factor">{t`RX/TX Factor`}</SelectOption>
                 </Select>
                 <Select onChange={handleSortDirectionChange} value={sortDirection} data-testid="direction-select">
-                  <SelectOption value="asc">Ascending</SelectOption>
-                  <SelectOption value="desc">Descending</SelectOption>
+                  <SelectOption value="asc">{t`Ascending`}</SelectOption>
+                  <SelectOption value="desc">{t`Descending`}</SelectOption>
                 </Select>
               </InputGroup>
             </Stack>

apps/aurora-portal/src/client/routes/_auth/accounts/$accountId/projects/$projectId/compute/-components/Flavors/-components/FlavorListContainer.test.tsx

@@ -1,10 +1,20 @@
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import { describe, it, expect, vi } from "vitest"
+import { render, screen, act } from "@testing-library/react"
+import { describe, it, expect, beforeAll } from "vitest"
 import { FlavorListContainer } from "./FlavorListContainer"
 import { Flavor } from "@/server/Compute/types/flavor"
+import { I18nProvider } from "@lingui/react"
+import { ReactNode } from "react"
+import { i18n } from "@lingui/core"
+
+const TestingProvider = ({ children }: { children: ReactNode }) => <I18nProvider i18n={i18n}>{children}</I18nProvider>
 
 describe("FlavorListContainer", () => {
+  beforeAll(async () => {
+    await act(async () => {
+      i18n.activate("en")
+    })
+  })
+
   const mockFlavors: Flavor[] = [
     {
       id: "1",
@@ -28,37 +38,59 @@ describe("FlavorListContainer", () => {
     },
   ]
 
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-  })
+  it("renders loading message when isLoading is true", async () => {
+    await act(async () => {
+      render(<FlavorListContainer isLoading={true} />, { wrapper: TestingProvider })
+    })
 
-  afterEach(() => {
-    vi.useRealTimers()
+    // Use findByText for async rendering
+    expect(await screen.findByText("Loading...")).toBeInTheDocument()
+    expect(screen.queryByText("No flavors found")).not.toBeInTheDocument()
+    expect(screen.queryByText("Name")).not.toBeInTheDocument()
   })
 
-  it("renders loading message when isLoading is true", () => {
-    render(<FlavorListContainer isLoading={true} />)
-    expect(screen.getByTestId("loading")).toBeInTheDocument()
-    expect(screen.queryByTestId("no-flavors")).not.toBeInTheDocument()
-    expect(screen.queryByTestId("flavors-table")).not.toBeInTheDocument()
-  })
+  it("renders no flavors message when flavors is empty", async () => {
+    await act(async () => {
+      render(<FlavorListContainer flavors={[]} isLoading={false} />, { wrapper: TestingProvider })
+    })
 
-  it("renders no flavors message when flavors is empty", () => {
-    render(<FlavorListContainer flavors={[]} isLoading={false} />)
-    expect(screen.queryByTestId("loading")).not.toBeInTheDocument()
-    expect(screen.getByTestId("no-flavors")).toBeInTheDocument()
-    expect(screen.queryByTestId("flavors-table")).not.toBeInTheDocument()
+    expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    expect(await screen.findByText("No flavors found")).toBeInTheDocument()
+    expect(await screen.findByText(/There are no flavors available for this project/)).toBeInTheDocument()
+    expect(screen.queryByText("vCPU")).not.toBeInTheDocument()
   })
 
-  it("renders the flavors table when flavors are provided", () => {
-    render(<FlavorListContainer flavors={mockFlavors} isLoading={false} />)
-    expect(screen.queryByTestId("loading")).not.toBeInTheDocument()
-    expect(screen.queryByTestId("no-flavors")).not.toBeInTheDocument()
-    expect(screen.getByTestId("flavors-table")).toBeInTheDocument()
+  it("renders no flavors message when flavors is undefined", async () => {
+    await act(async () => {
+      render(<FlavorListContainer flavors={undefined} isLoading={false} />, {
+        wrapper: TestingProvider,
+      })
+    })
+
+    expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    expect(await screen.findByText("No flavors found")).toBeInTheDocument()
+    expect(await screen.findByText(/There are no flavors available for this project/)).toBeInTheDocument()
+    expect(screen.queryByText("vCPU")).not.toBeInTheDocument()
+  })
 
-    mockFlavors.forEach((flavor) => {
-      expect(screen.getByTestId(`flavor-row-${flavor.id}`)).toBeInTheDocument()
+  it("renders the flavors table when flavors are provided", async () => {
+    await act(async () => {
+      render(<FlavorListContainer flavors={mockFlavors} isLoading={false} />, {
+        wrapper: TestingProvider,
+      })
     })
+
+    expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    expect(screen.queryByText("No flavors found")).not.toBeInTheDocument()
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+    expect(screen.getByText("vCPU")).toBeInTheDocument()
+    expect(screen.getByText("RAM (MiB)")).toBeInTheDocument()
+    expect(screen.getByText("Root Disk (GiB)")).toBeInTheDocument()
+    expect(screen.getByText("Ephemeral Disk (GiB)")).toBeInTheDocument()
+    expect(screen.getByText("Swap (MiB)")).toBeInTheDocument()
+    expect(screen.getByText("RX/TX Factor")).toBeInTheDocument()
+    expect(screen.getByText("Flavor1")).toBeInTheDocument()
+    expect(screen.getByText("Flavor2")).toBeInTheDocument()
   })
 })

apps/aurora-portal/src/client/routes/_auth/accounts/$accountId/projects/$projectId/compute/-components/Flavors/-components/FlavorListContainer.tsx

@@ -6,6 +6,7 @@ import {
   DataGridCell,
   ContentHeading,
 } from "@cloudoperators/juno-ui-components"
+import { Trans } from "@lingui/react/macro"
 
 interface FlavorListContainerProps {
   flavors?: Flavor[]
@@ -14,18 +15,26 @@ interface FlavorListContainerProps {
 
 export const FlavorListContainer = ({ flavors, isLoading }: FlavorListContainerProps) => {
   if (isLoading) {
-    return <div data-testid="loading">Loading flavors...</div>
+    return (
+      <div data-testid="loading">
+        <Trans>Loading...</Trans>
+      </div>
+    )
   }
 
   if (!flavors || flavors.length === 0) {
     return (
       <DataGrid columns={7} className="flavors" data-testid="no-flavors">
         <DataGridRow>
           <DataGridCell colSpan={7}>
-            <ContentHeading>No flavors found</ContentHeading>
+            <ContentHeading>
+              <Trans>No flavors found</Trans>
+            </ContentHeading>
             <p>
-              There are no flavors available for this project with the current filters applied. Try adjusting your
-              filter criteria or create a new flavor.
+              <Trans>
+                There are no flavors available for this project with the current filters applied. Try adjusting your
+                filter criteria or create a new flavor.
+              </Trans>
             </p>
           </DataGridCell>
         </DataGridRow>

apps/aurora-portal/src/client/routes/_auth/accounts/$accountId/projects/$projectId/compute/-components/Flavors/List.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect } from "react"
+import { useLingui } from "@lingui/react/macro"
 import { TrpcClient } from "@/client/trpcClient"
 import { Flavor } from "@/server/Compute/types/flavor"
-import { Message } from "@cloudoperators/juno-ui-components"
+import { Message, Button } from "@cloudoperators/juno-ui-components"
+import { useErrorTranslation } from "@/client/utils/useErrorTranslation"
 import FilterToolbar from "./-components/FilterToolbar"
 import { FlavorListContainer } from "./-components/FlavorListContainer"
 
@@ -10,13 +12,47 @@ interface FlavorsProps {
   project: string
 }
 
+interface ErrorState {
+  message: string
+  code: string
+  isRetryable: boolean
+}
+
 export const Flavors = ({ client, project }: FlavorsProps) => {
+  const { t } = useLingui()
+  const { translateError, isRetryableError } = useErrorTranslation()
+
   const [sortBy, setSortBy] = useState("name")
   const [sortDirection, setSortDirection] = useState("asc")
   const [searchTerm, setSearchTerm] = useState("")
   const [flavors, setFlavors] = useState<Flavor[] | undefined>(undefined)
-  const [error, setError] = useState<Error | undefined>(undefined)
+  const [error, setError] = useState<ErrorState | undefined>(undefined)
   const [isLoading, setIsLoading] = useState(true)
+  const [refetchTrigger, setRefetchTrigger] = useState(0)
+
+  const handleError = (err: unknown) => {
+    console.error(err)
+
+    let errorCode = "UNKNOWN_ERROR"
+
+    if (err && typeof err === "object" && "message" in err) {
+      const errorMessage = err.message
+      if (typeof errorMessage === "string" && errorMessage.startsWith("FLAVORS_")) {
+        errorCode = errorMessage
+      }
+    }
+
+    setError({
+      message: translateError(errorCode),
+      code: errorCode,
+      isRetryable: isRetryableError(errorCode),
+    })
+  }
+
+  const retryFetch = () => {
+    setError(undefined)
+    setRefetchTrigger((prev) => prev + 1)
+  }
 
   useEffect(() => {
     const fetchFlavors = async () => {
@@ -31,15 +67,14 @@ export const Flavors = ({ client, project }: FlavorsProps) => {
         })
         setFlavors(data)
       } catch (err) {
-        console.error(err)
-        setError(err as Error)
+        handleError(err)
       } finally {
         setIsLoading(false)
       }
     }
 
     fetchFlavors()
-  }, [client, project, sortBy, sortDirection, searchTerm])
+  }, [client, project, sortBy, sortDirection, searchTerm, refetchTrigger])
 
   const handleSortByChange = (value: string | number | string[] | undefined) => {
     if (value && typeof value === "string") {
@@ -54,7 +89,16 @@ export const Flavors = ({ client, project }: FlavorsProps) => {
   }
 
   if (error) {
-    return <Message text={error.message} variant="error" />
+    return (
+      <div className="error-container">
+        <Message text={error.message} variant="error" />
+        {error.isRetryable && (
+          <Button onClick={retryFetch} variant="primary" className="mt-4">
+            {t`Retry`}
+          </Button>
+        )}
+      </div>
+    )
   }
 
   return (

apps/aurora-portal/src/client/utils/useErrorTranslation.ts

@@ -0,0 +1,30 @@
+import { useLingui } from "@lingui/react/macro"
+
+export const useErrorTranslation = () => {
+  const { t } = useLingui()
+
+  const translateError = (errorCode: string): string => {
+    switch (errorCode) {
+      case "FLAVORS_UNAUTHORIZED":
+        return t`Your session has expired. Please log in again.`
+      case "FLAVORS_FORBIDDEN":
+        return t`You don't have permission to access flavors for this project.`
+      case "FLAVORS_NOT_FOUND":
+        return t`Flavor service is not available for this project.`
+      case "FLAVORS_SERVER_ERROR":
+        return t`Server is experiencing issues. Please try again later.`
+      case "FLAVORS_FETCH_FAILED":
+        return t`Failed to fetch flavors from server.`
+      case "FLAVORS_PARSE_ERROR":
+        return t`Server returned unexpected data format.`
+      default:
+        return t`An unexpected error occurred. Please try again.`
+    }
+  }
+
+  const isRetryableError = (errorCode: string): boolean => {
+    return ["FLAVORS_SERVER_ERROR", "FLAVORS_FETCH_FAILED"].includes(errorCode)
+  }
+
+  return { translateError, isRetryableError }
+}