refactor: Unify SDK reporting under dedicated frontend/backend fields

frontend/src/component/application/ApplicationChart.tsx

@@ -16,7 +16,6 @@ import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded';
 import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { getApplicationIssues } from './ApplicationIssues/ApplicationIssues.tsx';
-import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledTable = styled('table')(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
@@ -197,7 +196,6 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
     const { elementRef, width } = useElementWidth();
     const navigate = useNavigate();
     const theme = useTheme();
-    const registerFrontendClientEnabled = useUiFlag('registerFrontendClient');
 
     const mode = getApplicationIssues(data);
 
@@ -296,23 +294,7 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
                                                 {environment.instanceCount}
                                             </StyledCell>
                                         </tr>
-                                        {!registerFrontendClientEnabled ? (
+                                        {environment.backendSdks.length > 0 ? (
-                                            <tr>
-                                                <StyledCell>SDK:</StyledCell>
-                                                <StyledCell>
-                                                    {environment.sdks.map(
-                                                        (sdk) => (
-                                                            <div key={sdk}>
-                                                                {sdk}
-                                                            </div>
-                                                        ),
-                                                    )}
-                                                </StyledCell>
-                                            </tr>
-                                        ) : null}
-
-                                        {registerFrontendClientEnabled &&
-                                        environment.backendSdks.length > 0 ? (
                                             <tr>
                                                 <StyledCell>
                                                     Backend SDK:
@@ -329,8 +311,7 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
                                             </tr>
                                         ) : null}
 
-                                        {registerFrontendClientEnabled &&
+                                        {environment.frontendSdks.length > 0 ? (
-                                        environment.frontendSdks.length > 0 ? (
                                             <tr>
                                                 <StyledCell>
                                                     Frontend SDK:

frontend/src/interfaces/uiConfig.ts

@@ -84,7 +84,6 @@ export type UiFlags = {
     showUserDeviceCount?: boolean;
     consumptionModel?: boolean;
     edgeObservability?: boolean;
-    registerFrontendClient?: boolean;
     customMetrics?: boolean;
     lifecycleMetrics?: boolean;
     createFlagDialogCache?: boolean;

src/lib/features/frontend-api/frontend-api-service.ts

@@ -135,11 +135,7 @@ export class FrontendApiService {
             ip,
         );
 
-        if (
+        if (metrics.instanceId && typeof sdkVersion === 'string') {
-            metrics.instanceId &&
-            typeof sdkVersion === 'string' &&
-            this.flagResolver.isEnabled('registerFrontendClient')
-        ) {
             const client = {
                 appName: metrics.appName,
                 instanceId: metrics.instanceId,

src/lib/features/metrics/instance/instance-service.ts

@@ -282,10 +282,13 @@ export default class ClientInstanceService {
                 result.projects,
             );
         result.projects = accessibleProjects;
-        result.environments.forEach((environment) => {
+        result.environments.forEach((environment: any) => {
-            environment.issues.outdatedSdks = findOutdatedSDKs(
+            const allSdks = [
-                environment.sdks,
+                ...environment.backendSdks,
-            );
+                ...environment.frontendSdks,
+            ];
+            environment.issues.outdatedSdks = findOutdatedSDKs(allSdks);
+            delete environment.sdks;
         });
         return result;
     }

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

@@ -45,13 +45,7 @@ let services: IUnleashServices;
 let destroy: () => Promise<void>;
 
 beforeAll(async () => {
-    const setup = await getSetup({
+    const setup = await getSetup();
-        experimental: {
-            flags: {
-                registerFrontendClient: true,
-            },
-        },
-    });
     request = setup.request;
     stores = setup.stores;
     destroy = setup.destroy;

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

@@ -238,20 +238,14 @@ export default class ClientMetricsController extends Controller {
                         app.sdkType === 'frontend' &&
                         typeof app.sdkVersion === 'string'
                     ) {
-                        if (
+                        this.clientInstanceService.registerFrontendClient({
-                            this.flagResolver.isEnabled(
+                            appName: app.appName,
-                                'registerFrontendClient',
+                            instanceId: app.instanceId,
-                            )
+                            environment: app.environment,
-                        ) {
+                            sdkType: app.sdkType,
-                            this.clientInstanceService.registerFrontendClient({
+                            sdkVersion: app.sdkVersion,
-                                appName: app.appName,
+                            projects: app.projects,
-                                instanceId: app.instanceId,
+                        });
-                                environment: app.environment,
-                                sdkType: app.sdkType,
-                                sdkVersion: app.sdkVersion,
-                                projects: app.projects,
-                            });
-                        }
                     } else {
                         promises.push(
                             this.clientInstanceService.registerBackendClient(

src/lib/types/experimental.ts

@@ -54,7 +54,6 @@ export type IFlagKey =
     | 'uniqueSdkTracking'
     | 'consumptionModel'
     | 'edgeObservability'
-    | 'registerFrontendClient'
     | 'reportUnknownFlags'
     | 'lifecycleMetrics'
     | 'customMetrics'
@@ -260,10 +259,6 @@ const flags: IFlags = {
         process.env.EXPERIMENTAL_EDGE_OBSERVABILITY,
         false,
     ),
-    registerFrontendClient: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_REGISTER_FRONTEND_CLIENT,
-        false,
-    ),
     reportUnknownFlags: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_REPORT_UNKNOWN_FLAGS,
         false,

src/server-dev.ts

@@ -51,7 +51,6 @@ process.nextTick(async () => {
                         deltaApi: true,
                         uniqueSdkTracking: true,
                         strictSchemaValidation: true,
-                        registerFrontendClient: true,
                         reportUnknownFlags: true,
                         customMetrics: true,
                         lifecycleMetrics: true,

src/test/e2e/api/admin/applications.e2e.test.ts

@@ -55,7 +55,6 @@ beforeAll(async () => {
             experimental: {
                 flags: {
                     strictSchemaValidation: true,
-                    registerFrontendClient: true,
                 },
             },
         },
@@ -142,10 +141,6 @@ test('should show correct application metrics', async () => {
                     'unleash-client-node:3.2.1',
                     'unleash-client-node:3.2.2',
                 ],
-                sdks: [
-                    'unleash-client-node:3.2.1',
-                    'unleash-client-node:3.2.2',
-                ],
             },
         ],
         featureCount: 3,
@@ -246,7 +241,8 @@ test('should show missing features and strategies', async () => {
             {
                 instanceCount: 1,
                 name: DEFAULT_ENV,
-                sdks: ['unleash-client-node:1.0.0'],
+                backendSdks: ['unleash-client-node:1.0.0'],
+                frontendSdks: [],
                 issues: {
                     missingFeatures: ['toggle-name-2', 'toggle-name-3'],
                     outdatedSdks: ['unleash-client-node:1.0.0'],