feat(portal): adds permissions based conditional rendering for create and delete flavors and flavors spec (#393)

* feat(portal): confirmation of ExtraSpec Deletion

* feat(portal): added compiled translation

* chore(portal): delete non confirm classes

* chore(portal): delete onClick which leads to nested buttons

* feat(portal): added conditional render based on permission

* chore(portal): add translations

* chore(portal): add compiled

* chore(portal): adjust Test with act and i18nProvider

* fix(portal): correct permissions

* fix(portal): delete console.log

* test(portal): added Tests to changed components

* test(portal): added Tests to changed components

* test(portal): undo problematic test

* refactor(portal): changed useEffects to use

* chore(portal): add translation

* chore(portal): added compiled trans

* chore(portal): delete test

Author: TilmanHaupt

apps/aurora-portal/permission_policies/compute.yaml

@@ -6,6 +6,7 @@ import styles from "./index.css?inline"
 import { i18n } from "@lingui/core"
 import { I18nProvider } from "@lingui/react"
 import { ErrorBoundary } from "react-error-boundary"
+import { Trans } from "@lingui/react/macro"
 
 type AppProps = {
   theme?: "theme-dark" | "theme-light"
@@ -14,9 +15,13 @@ const App = (props: AppProps) => (
   <ErrorBoundary
     fallbackRender={({ error, resetErrorBoundary }) => (
       <div role="alert" style={{ padding: 24 }}>
-        <p>Something went wrong:</p>
+        <p>
+          <Trans>Something went wrong:</Trans>
+        </p>
         <pre style={{ color: "red" }}>{error.message}</pre>
-        <button onClick={resetErrorBoundary}>Try again</button>
+        <button onClick={resetErrorBoundary}>
+          <Trans>Try again</Trans>
+        </button>
       </div>
     )}
   >

apps/aurora-portal/src/client/App.tsx

@@ -20,9 +20,7 @@ export const Route = createFileRoute("/_auth")({
 })
 
 function RouteComponent() {
-  const { user } = useAuth()
-
-  console.log("Auth Data:", user)
+  useAuth()
 
   return <Outlet /> // This is where child routes will render
 }

apps/aurora-portal/src/client/routes/_auth.tsx

@@ -51,7 +51,7 @@ function ComputeDashboard({ client }: { client: TrpcClient }) {
       <div className="col-span-9 flex flex-col gap-4">
         <div className="w-full">
           {project ? (
-            <ErrorBoundary fallback={<div className="p-4 text-center text-gray-400">Error loading component</div>}>
+            <ErrorBoundary fallback={<div className="p-4 text-center">Error loading component</div>}>
               {(() => {
                 switch (splat) {
                   case "instances":

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

@@ -1,4 +1,5 @@
 import { ContentHeading } from "@cloudoperators/juno-ui-components/index"
+import { Trans } from "@lingui/react/macro"
 import { useLocation, useParams, Link } from "@tanstack/react-router"
 
 export const ComputeSideNavBar = () => {
@@ -24,7 +25,9 @@ export const ComputeSideNavBar = () => {
 
   return (
     <div className="w-full flex flex-col items-start px-4">
-      <ContentHeading>Compute</ContentHeading>
+      <ContentHeading>
+        <Trans>Compute</Trans>
+      </ContentHeading>
       {/* Navigation */}
       <nav className="w-full flex flex-col rounded-lg items-start ">
         {links.map(({ path, label }) => (