fix: I love AI sometimes

Lasserich · Lasserich · commit 81a95ecf3eb3 · 2025-08-21T10:00:41.000+02:00
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -165,6 +165,7 @@
   "EditMembers": {
     "addButton": "Add"
   },
+
   "ProjectsPage": {
     "header": "Your instances of <span>ManagedControlPlane</span>",
     "projectHeader": "Project:"
@@ -360,5 +361,38 @@
     "selectedComponents": "Selected Components",
     "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane.",
     "cannotLoad": "Cannot load components list"
+  },
+  "Hints": {
+    "CrossplaneHint": {
+      "title": "Crossplane",
+      "subtitle": "Managed Resources Readiness",
+      "activeStatus": "Active v",
+      "progressAvailable": "% Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate"
+    },
+    "GitOpsHint": {
+      "title": "Flux",
+      "subtitle": "GitOps Progress",
+      "activeStatus": "Active v",
+      "progressAvailable": "% Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate"
+    },
+    "VaultHint": {
+      "title": "Vault",
+      "subtitle": "Rotating Secrets Progress",
+      "activeStatus": "Active v",
+      "progressAvailable": "% Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate"
+    },
+    "common": {
+      "loading": "Loading...",
+      "errorLoadingResources": "Error loading resources"
+    }
   }
 }
diff --git a/src/components/Hints/CrossplaneHint.tsx b/src/components/Hints/CrossplaneHint.tsx
@@ -1,14 +1,14 @@
 import { Card, CardHeader, ProgressIndicator, Button } from '@ui5/webcomponents-react';
-import { ManagedResourcesResponse } from '../../lib/api/types/crossplane/listManagedResources';
 import { useTranslation } from 'react-i18next';
 import { APIError } from '../../lib/api/error';
-import { Condition, ManagedResourceItem } from '../Graphs/types';
+import { getDisabledCardStyle } from './Hints';
+import { ManagedResourceItem, Condition } from '../../lib/shared/types';
 
 interface CrossplaneHintProps {
   enabled?: boolean;
   version?: string;
   onActivate?: () => void;
-  managedResources?: ManagedResourcesResponse | undefined;
+  allItems?: ManagedResourceItem[];
   isLoading?: boolean;
   error?: APIError;
 }
@@ -17,26 +17,13 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
   enabled = false,
   version,
   onActivate,
-  managedResources,
+  allItems = [],
   isLoading,
   error,
 }) => {
   const { t } = useTranslation();
 
-  const cardStyle = enabled
-    ? {}
-    : {
-        background: '#f3f3f3',
-        filter: 'grayscale(0.7)',
-        opacity: 0.7,
-      };
-
-  // Flatten all items from all managedResources entries
-  const allItems = managedResources
-    ? managedResources
-        .filter((managedResource) => managedResource.items)
-        .flatMap((managedResource) => managedResource.items)
-    : [];
+  const cardStyle = enabled ? {} : getDisabledCardStyle();
 
   // Health state counts for slider segments
   const healthyCount = allItems.filter((item: ManagedResourceItem) => {
@@ -52,13 +39,13 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
   const progressValue = totalCount > 0 ? Math.round((healthyCount / totalCount) * 100) : 0;
   // Display value: show ratio
   const progressDisplay = enabled
-    ? managedResources
-      ? `${Math.round((healthyCount / totalCount) * 100)}% Available`
-      : 'No Resources'
-    : 'Inactive';
+    ? allItems.length > 0
+      ? `${Math.round((healthyCount / totalCount) * 100)}${t('Hints.CrossplaneHint.progressAvailable')}`
+      : t('Hints.CrossplaneHint.noResources')
+    : t('Hints.CrossplaneHint.inactive');
   // Value state: positive if half are ready & synced
   const progressValueState = enabled
-    ? managedResources
+    ? allItems.length > 0
       ? healthyCount >= totalCount / 2 && totalCount > 0
         ? 'Positive'
         : 'Critical'
@@ -70,16 +57,16 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
       <Card
         header={
           <CardHeader
-            additionalText={enabled ? `Active v${version ?? ''}` : undefined}
+            additionalText={enabled ? `${t('Hints.CrossplaneHint.activeStatus')}${version ?? ''}` : undefined}
             avatar={
               <img
                 src="/crossplane-icon.png"
                 alt="Crossplane"
                 style={{ width: 50, height: 50, borderRadius: '50%', background: 'transparent', objectFit: 'cover' }}
               />
             }
-            titleText="Crossplane"
-            subtitleText="Managed Resources Readiness"
+            titleText={t('Hints.CrossplaneHint.title')}
+            subtitleText={t('Hints.CrossplaneHint.subtitle')}
             interactive={true}
           />
         }
@@ -95,14 +82,14 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
           {isLoading ? (
             <ProgressIndicator
               value={0}
-              displayValue={t('Loading...')}
+              displayValue={t('Hints.common.loading')}
               valueState="None"
               style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
             />
           ) : error ? (
             <ProgressIndicator
               value={0}
-              displayValue={t('Error loading resources')}
+              displayValue={t('Hints.common.errorLoadingResources')}
               valueState="Negative"
               style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
             />
@@ -126,7 +113,7 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
             }}
           >
             <Button design="Emphasized" onClick={onActivate}>
-              {t('Activate')}
+              {t('Hints.CrossplaneHint.activate')}
             </Button>
           </div>
         )}
diff --git a/src/components/Hints/GitOpsHint.tsx b/src/components/Hints/GitOpsHint.tsx
@@ -1,13 +1,14 @@
 import { Card, CardHeader, ProgressIndicator, Button } from '@ui5/webcomponents-react';
-import { ManagedResourcesResponse } from '../../lib/api/types/crossplane/listManagedResources';
 import { useTranslation } from 'react-i18next';
 import { APIError } from '../../lib/api/error';
+import { getDisabledCardStyle } from './Hints';
+import { ManagedResourceItem } from '../../lib/shared/types';
 
 interface GitOpsHintProps {
   enabled?: boolean;
   version?: string;
   onActivate?: () => void;
-  managedResources?: ManagedResourcesResponse | undefined;
+  allItems?: ManagedResourceItem[];
   isLoading?: boolean;
   error?: APIError;
 }
@@ -16,67 +17,54 @@ export const GitOpsHint: React.FC<GitOpsHintProps> = ({
   enabled = false,
   version,
   onActivate,
-  managedResources,
+  allItems = [],
   isLoading,
   error,
 }) => {
   const { t } = useTranslation();
 
-  // Flatten all items from all managedResources entries
-  const allItems = managedResources
-    ? managedResources
-        .filter((managedResource) => managedResource.items)
-        .flatMap((managedResource) => managedResource.items)
-    : [];
-
   const totalCount = allItems.length;
 
   // Count the number of items with the flux label
   const fluxLabelCount = allItems.filter(
-    (item) =>
+    (item: ManagedResourceItem) =>
       item?.metadata?.labels &&
       Object.prototype.hasOwnProperty.call(item.metadata.labels, 'kustomize.toolkit.fluxcd.io/name'),
   ).length;
 
   const progressValue = totalCount > 0 ? Math.round((fluxLabelCount / totalCount) * 100) : 0;
   // Display value: show ratio
   const progressDisplay = enabled
-    ? managedResources
-      ? `${Math.round((fluxLabelCount / totalCount) * 100)}% Available`
-      : 'No Resources'
-    : 'Inactive';
+    ? allItems.length > 0
+      ? `${Math.round((fluxLabelCount / totalCount) * 100)}${t('Hints.GitOpsHint.progressAvailable')}`
+      : t('Hints.GitOpsHint.noResources')
+    : t('Hints.GitOpsHint.inactive');
   // Value state: positive if half are ready & synced
   const progressValueState = enabled
-    ? managedResources
+    ? allItems.length > 0
       ? fluxLabelCount >= totalCount / 2 && totalCount > 0
         ? 'Positive'
         : 'Critical'
       : 'None'
     : 'None';
 
-  const cardStyle = enabled
-    ? {}
-    : {
-        background: '#f3f3f3',
-        filter: 'grayscale(0.7)',
-        opacity: 0.7,
-      };
+  const cardStyle = enabled ? {} : getDisabledCardStyle();
 
   return (
     <div style={{ position: 'relative', width: '100%' }}>
       <Card
         header={
           <CardHeader
-            additionalText={enabled ? `Active v${version ?? ''}` : undefined}
+            additionalText={enabled ? `${t('Hints.GitOpsHint.activeStatus')}${version ?? ''}` : undefined}
             avatar={
               <img
                 src="/flux.png"
                 alt="Flux"
                 style={{ width: 50, height: 50, borderRadius: '50%', background: 'transparent', objectFit: 'cover' }}
               />
             }
-            titleText="Flux"
-            subtitleText="GitOps Progress"
+            titleText={t('Hints.GitOpsHint.title')}
+            subtitleText={t('Hints.GitOpsHint.subtitle')}
             interactive={true}
           />
         }
@@ -92,14 +80,14 @@ export const GitOpsHint: React.FC<GitOpsHintProps> = ({
           {isLoading ? (
             <ProgressIndicator
               value={0}
-              displayValue={t('Loading...')}
+              displayValue={t('Hints.common.loading')}
               valueState="None"
               style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
             />
           ) : error ? (
             <ProgressIndicator
               value={0}
-              displayValue={t('Error loading resources')}
+              displayValue={t('Hints.common.errorLoadingResources')}
               valueState="Negative"
               style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
             />
@@ -123,7 +111,7 @@ export const GitOpsHint: React.FC<GitOpsHintProps> = ({
             }}
           >
             <Button design="Emphasized" onClick={onActivate}>
-              {t('Activate')}
+              {t('Hints.GitOpsHint.activate')}
             </Button>
           </div>
         )}
diff --git a/src/components/Hints/Hints.tsx b/src/components/Hints/Hints.tsx
@@ -7,12 +7,29 @@ import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
 import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
 import { resourcesInterval } from '../../lib/shared/constants';
 import { useApiResource } from '../../lib/api/useApiResource';
-import React from 'react';
+import { ManagedResourceItem } from '../../lib/shared/types';
+import React, { useMemo } from 'react';
 
 interface HintsProps {
   mcp: ControlPlaneType;
 }
 
+// Utility function to create disabled card style
+export const getDisabledCardStyle = () => ({
+  background: '#f3f3f3',
+  filter: 'grayscale(0.7)',
+  opacity: 0.7,
+});
+
+// Utility function to flatten managed resources
+export const flattenManagedResources = (managedResources: any): ManagedResourceItem[] => {
+  if (!managedResources || !Array.isArray(managedResources)) return [];
+  
+  return managedResources
+    .filter((managedResource) => managedResource?.items)
+    .flatMap((managedResource) => managedResource.items || []);
+};
+
 const Hints: React.FC<HintsProps> = ({ mcp }) => {
   const {
     data: managedResources,
@@ -22,6 +39,9 @@ const Hints: React.FC<HintsProps> = ({ mcp }) => {
     refreshInterval: resourcesInterval,
   });
 
+  // Flatten all managed resources once and pass to components
+  const allItems = useMemo(() => flattenManagedResources(managedResources), [managedResources]);
+
   return (
     <FlexBox
       direction={FlexBoxDirection.Row}
@@ -35,21 +55,21 @@ const Hints: React.FC<HintsProps> = ({ mcp }) => {
       <CrossplaneHint
         enabled={!!mcp?.spec?.components?.crossplane}
         version={mcp?.spec?.components?.crossplane?.version}
-        managedResources={managedResources}
+        allItems={allItems}
         isLoading={managedResourcesLoading}
         error={managedResourcesError}
       />
       <GitOpsHint
         enabled={!!mcp?.spec?.components?.flux}
         version={mcp?.spec?.components?.flux?.version}
-        managedResources={managedResources}
+        allItems={allItems}
         isLoading={managedResourcesLoading}
         error={managedResourcesError}
       />
       <VaultHint
         enabled={!!mcp?.spec?.components?.externalSecretsOperator}
         version={mcp?.spec?.components?.externalSecretsOperator?.version}
-        managedResources={managedResources}
+        allItems={allItems}
         isLoading={managedResourcesLoading}
         error={managedResourcesError}
       />
diff --git a/src/components/Hints/VaultHint.tsx b/src/components/Hints/VaultHint.tsx
