feat: outdated SDKs UI (#6391)

frontend/src/component/application/ApplicationChart.tsx

@@ -292,14 +292,16 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
                                         <tr>
                                             <StyledCell>Last seen:</StyledCell>
                                             <StyledCell>
-                                                <TimeAgo
-                                                    minPeriod={60}
-                                                    date={
-                                                        new Date(
-                                                            environment.lastSeen,
-                                                        )
-                                                    }
-                                                />
+                                                {environment.lastSeen && (
+                                                    <TimeAgo
+                                                        minPeriod={60}
+                                                        date={
+                                                            new Date(
+                                                                environment.lastSeen,
+                                                            )
+                                                        }
+                                                    />
+                                                )}
                                             </StyledCell>
                                         </tr>
                                     </tbody>

frontend/src/component/application/ApplicationIssues/ApplicationIssues.test.tsx

@@ -13,6 +13,10 @@ test('Display all application issues', async () => {
             type: 'missingStrategies',
             items: ['defaultStrategy', 'mainStrategy'],
         },
+        {
+            type: 'outdatedSdks',
+            items: ['unleash-client-php:1.13.0'],
+        },
     ];
     render(<ApplicationIssues issues={issues} />);
 
@@ -24,4 +28,6 @@ test('Display all application issues', async () => {
     await screen.findByText(
         `We detected 2 strategy types defined in the SDK that do not exist in Unleash`,
     );
+    await screen.findByText(`We detected the following outdated SDKs`);
+    await screen.findByText(`unleash-client-php:1.13.0`);
 });

frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx

@@ -87,6 +87,10 @@ const resolveIssueText = (issue: ApplicationOverviewIssuesSchema) => {
     const issueCount = issue.items.length;
     let issueText = '';
 
+    if (issue.type === 'outdatedSdks') {
+        return 'We detected the following outdated SDKs';
+    }
+
     switch (issue.type) {
         case 'missingFeatures':
             issueText = `feature flag${issueCount !== 1 ? 's' : ''}`;
@@ -111,8 +115,8 @@ export const ApplicationIssues = ({ issues }: IApplicationIssuesProps) => {
                     <WarningHeader>
                         <WarningAmberRounded />
                         <WarningHeaderText>
-                            We detected {issues.length} issues in this
-                            application
+                            We detected {issues.length} issue
+                            {issues.length !== 1 ? 's' : ''} in this application
                         </WarningHeaderText>
                     </WarningHeader>
                     <IssueContainer>

frontend/src/openapi/models/applicationOverviewEnvironmentSchema.ts

@@ -11,7 +11,7 @@ export interface ApplicationOverviewEnvironmentSchema {
     /** The number of instances of the application environment */
     instanceCount: number;
     /** The last time the application environment was seen */
-    lastSeen: string;
+    lastSeen: string | null;
     /** Name of the application environment */
     name: string;
     /** SDKs used in the application environment */

frontend/src/openapi/models/applicationOverviewIssuesSchemaType.ts

@@ -14,4 +14,5 @@ export type ApplicationOverviewIssuesSchemaType =
 export const ApplicationOverviewIssuesSchemaType = {
     missingFeatures: 'missingFeatures',
     missingStrategies: 'missingStrategies',
+    outdatedSdks: 'outdatedSdks',
 } as const;

src/lib/features/metrics/instance/findOutdatedSdks.ts

@@ -11,7 +11,7 @@ const config: SDKConfig = {
     'unleash-client-python': '5.9.2',
     'unleash-client-ruby': '5.0.0',
     'unleash-client-dotnet': '4.1.3',
-    'unleash-client-php': '1.13.1',
+    'unleash-client-php': '1.13.0',
 };
 
 export function findOutdatedSDKs(sdkVersions: string[]): string[] {