refactor: application overview dom improvements and tests (#6325)

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

@@ -0,0 +1,72 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { Route, Routes } from 'react-router-dom';
+import { ApplicationOverviewSchema } from '../../openapi';
+import ApplicationOverview from './ApplicationOverview';
+
+const server = testServerSetup();
+
+const setupApi = (application: ApplicationOverviewSchema) => {
+    testServerRoute(
+        server,
+        '/api/admin/metrics/applications/my-app/overview',
+        application,
+    );
+    testServerRoute(server, '/api/admin/ui-config', {});
+};
+
+test('Display application overview with environments', async () => {
+    setupApi({
+        environments: [
+            {
+                name: 'development',
+                instanceCount: 999,
+                lastSeen: '2024-02-22T20:20:24.740',
+                sdks: ['unleash-client-node:5.5.0-beta.0'],
+            },
+        ],
+        featureCount: 1,
+        projects: ['default'],
+    });
+    render(
+        <Routes>
+            <Route
+                path={'/applications/:name'}
+                element={<ApplicationOverview />}
+            />
+        </Routes>,
+        {
+            route: '/applications/my-app',
+        },
+    );
+
+    await screen.findByText('my-app');
+    await screen.findByText('Everything looks good!');
+    await screen.findByText('development environment');
+    await screen.findByText('999');
+    await screen.findByText('unleash-client-node:5.5.0-beta.0');
+    await screen.findByText('2024-02-22T20:20:24.740');
+});
+
+test('Display application overview without environments', async () => {
+    setupApi({
+        environments: [],
+        featureCount: 0,
+        projects: ['default'],
+    });
+    render(
+        <Routes>
+            <Route
+                path={'/applications/:name'}
+                element={<ApplicationOverview />}
+            />
+        </Routes>,
+        {
+            route: '/applications/my-app',
+        },
+    );
+
+    await screen.findByText('my-app');
+    await screen.findByText('No data available.');
+});

frontend/src/component/application/ApplicationOverview.tsx

@@ -202,7 +202,10 @@ export const ApplicationOverview = () => {
 
                         <StyledEnvironmentsContainer ref={elementRef}>
                             {data.environments.map((environment) => (
-                                <ArcherElement id={environment.name}>
+                                <ArcherElement
+                                    id={environment.name}
+                                    key={environment.name}
+                                >
                                     <StyledEnvironmentBox
                                         mode={mode}
                                         key={environment.name}
@@ -212,20 +215,27 @@ export const ApplicationOverview = () => {
                                         </EnvironmentHeader>
 
                                         <StyledTable>
+                                            <tbody>
                                                 <tr>
                                                     <StyledCell>
                                                         Instances:
                                                     </StyledCell>
                                                     <StyledCell>
-                                                    {environment.instanceCount}
+                                                        {
+                                                            environment.instanceCount
+                                                        }
                                                     </StyledCell>
                                                 </tr>
                                                 <tr>
-                                                <StyledCell>SDK:</StyledCell>
+                                                    <StyledCell>
+                                                        SDK:
+                                                    </StyledCell>
                                                     <StyledCell>
                                                         {environment.sdks.map(
                                                             (sdk) => (
-                                                            <div>{sdk}</div>
+                                                                <div key={sdk}>
+                                                                    {sdk}
+                                                                </div>
                                                             ),
                                                         )}
                                                     </StyledCell>
@@ -238,6 +248,7 @@ export const ApplicationOverview = () => {
                                                         {environment.lastSeen}
                                                     </StyledCell>
                                                 </tr>
+                                            </tbody>
                                         </StyledTable>
                                     </StyledEnvironmentBox>
                                 </ArcherElement>