refactor: move layout and createSideNavItems into applicationService …

…and use from it
wazuh · Feb 14, 2025 · ff4a1a3 · ff4a1a3
1 parent 31b6de6
commit ff4a1a3
Show file tree

Hide file tree

Showing 28 changed files with 267 additions and 235 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -219,10 +219,8 @@ module.exports = {
         /* -------------------------------------------------------------------------- */
         /*                             @typescript-eslint                             */
         /* -------------------------------------------------------------------------- */
-        '@typescript-eslint/no-empty-object-type': [
-          'error',
-          { allowInterfaces: 'always' },
-        ],
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-empty-object-type': 'off',
         '@typescript-eslint/no-dynamic-delete': 'off',
         '@typescript-eslint/no-unused-vars': [
           'error',
@@ -363,6 +361,7 @@ module.exports = {
             },
           },
         ],
+        'react/prop-types': 'off',
       },
     },
     {

diff --git a/plugins/wazuh-analysis/public/groups/cloud-security/applications.ts b/plugins/wazuh-analysis/public/groups/cloud-security/applications.ts
@@ -4,6 +4,7 @@ import {
   AppNavLinkStatus,
   AppUpdater,
 } from '../../../../../src/core/public';
+import { ApplicationService } from '../../../../wazuh-core/public/services/application/application';
 import { DOCKER_ID, DOCKER_TITLE } from './apps/docker/constants';
 import { AWS_ID, AWS_TITLE } from './apps/aws/constants';
 import {
@@ -12,8 +13,16 @@ import {
 } from './apps/google-cloud/constants';
 import { GITHUB_ID, GITHUB_TITLE } from './apps/github/constants';
 import { OFFICE365_ID, OFFICE365_TITLE } from './apps/office-365/constants';
+import { CloudSecurityNavGroup } from '.';
+
+export function getCloudSecurityApps(
+  applicationService?: ApplicationService,
+  updater$?: Subject<AppUpdater>,
+) {
+  const cloudSecurityLayout = applicationService?.createLayout(
+    CloudSecurityNavGroup,
+  );
 
-export function getCloudSecurityApps(updater$?: Subject<AppUpdater>) {
   return [
     {
       id: DOCKER_ID,
@@ -23,7 +32,9 @@ export function getCloudSecurityApps(updater$?: Subject<AppUpdater>) {
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./apps/docker/application');
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: cloudSecurityLayout!(DOCKER_ID),
+        });
       },
     },
     {
@@ -34,7 +45,9 @@ export function getCloudSecurityApps(updater$?: Subject<AppUpdater>) {
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./apps/aws/application');
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: cloudSecurityLayout!(AWS_ID),
+        });
       },
     },
     {
@@ -45,7 +58,9 @@ export function getCloudSecurityApps(updater$?: Subject<AppUpdater>) {
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./apps/google-cloud/application');
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: cloudSecurityLayout!(GOOGLE_CLOUD_ID),
+        });
       },
     },
     {
@@ -56,7 +71,9 @@ export function getCloudSecurityApps(updater$?: Subject<AppUpdater>) {
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./apps/github/application');
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: cloudSecurityLayout!(GITHUB_ID),
+        });
       },
     },
     {
@@ -67,7 +84,9 @@ export function getCloudSecurityApps(updater$?: Subject<AppUpdater>) {
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./apps/office-365/application');
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: cloudSecurityLayout!(OFFICE365_ID),
+        });
       },
     },
   ];

diff --git a/plugins/wazuh-analysis/public/groups/cloud-security/apps/aws/application.tsx b/plugins/wazuh-analysis/public/groups/cloud-security/apps/aws/application.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { AppMountParameters } from 'opensearch-dashboards/public';
 import ReactDOM from 'react-dom';
-import { Layout } from '../../../layout';
-import { createSideNavItems } from '../../../side-nav';
-import { CLOUD_SECURITY_TITLE } from '../../constants';
-import { CloudSecurityNavGroup } from '../..';
+import { AppProps } from '../../../../../../wazuh-core/public/services/application/types';
 import { AwsApp } from './aws-app';
-import { AWS_ID } from './constants';
-
-export const renderApp = async (params: AppMountParameters) => {
-  const items = createSideNavItems({
-    group: CloudSecurityNavGroup,
-    selectedAppId: AWS_ID,
-  });
 
+export const renderApp = async (
+  params: AppMountParameters,
+  { Layout }: AppProps,
+) => {
   ReactDOM.render(
-    <Layout aria-label={CLOUD_SECURITY_TITLE} items={items}>
+    <Layout>
       <AwsApp params={params} />
     </Layout>,
     params.element,

diff --git a/plugins/wazuh-analysis/public/groups/cloud-security/apps/docker/application.tsx b/plugins/wazuh-analysis/public/groups/cloud-security/apps/docker/application.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { AppMountParameters } from 'opensearch-dashboards/public';
 import ReactDOM from 'react-dom';
-import { Layout } from '../../../layout';
-import { createSideNavItems } from '../../../side-nav';
-import { CLOUD_SECURITY_TITLE } from '../../constants';
-import { CloudSecurityNavGroup } from '../..';
+import { AppProps } from '../../../../../../wazuh-core/public/services/application/types';
 import { DockerApp } from './docker-app';
-import { DOCKER_ID } from './constants';
-
-export const renderApp = async (params: AppMountParameters) => {
-  const items = createSideNavItems({
-    group: CloudSecurityNavGroup,
-    selectedAppId: DOCKER_ID,
-  });
 
+export const renderApp = async (
+  params: AppMountParameters,
+  { Layout }: AppProps,
+) => {
   ReactDOM.render(
-    <Layout aria-label={CLOUD_SECURITY_TITLE} items={items}>
+    <Layout>
       <DockerApp params={params} />
     </Layout>,
     params.element,

diff --git a/plugins/wazuh-analysis/public/groups/cloud-security/apps/github/application.tsx b/plugins/wazuh-analysis/public/groups/cloud-security/apps/github/application.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { AppMountParameters } from 'opensearch-dashboards/public';
 import ReactDOM from 'react-dom';
-import { Layout } from '../../../layout';
-import { createSideNavItems } from '../../../side-nav';
-import { CLOUD_SECURITY_TITLE } from '../../constants';
-import { CloudSecurityNavGroup } from '../..';
+import { AppProps } from '../../../../../../wazuh-core/public/services/application/types';
 import { GithubApp } from './github-app';
-import { GITHUB_ID } from './constants';
-
-export const renderApp = async (params: AppMountParameters) => {
-  const items = createSideNavItems({
-    group: CloudSecurityNavGroup,
-    selectedAppId: GITHUB_ID,
-  });
 
+export const renderApp = async (
+  params: AppMountParameters,
+  { Layout }: AppProps,
+) => {
   ReactDOM.render(
-    <Layout aria-label={CLOUD_SECURITY_TITLE} items={items}>
+    <Layout>
       <GithubApp params={params} />
     </Layout>,
     params.element,

diff --git a/plugins/wazuh-analysis/public/groups/cloud-security/apps/google-cloud/application.tsx b/plugins/wazuh-analysis/public/groups/cloud-security/apps/google-cloud/application.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { AppMountParameters } from 'opensearch-dashboards/public';
 import ReactDOM from 'react-dom';
-import { Layout } from '../../../layout';
-import { createSideNavItems } from '../../../side-nav';
-import { CLOUD_SECURITY_TITLE } from '../../constants';
-import { CloudSecurityNavGroup } from '../..';
+import { AppProps } from '../../../../../../wazuh-core/public/services/application/types';
 import { GoogleCloudApp } from './google-cloud-app';
-import { GOOGLE_CLOUD_ID } from './constants';
-
-export const renderApp = async (params: AppMountParameters) => {
-  const items = createSideNavItems({
-    group: CloudSecurityNavGroup,
-    selectedAppId: GOOGLE_CLOUD_ID,
-  });
 
+export const renderApp = async (
+  params: AppMountParameters,
+  { Layout }: AppProps,
+) => {
   ReactDOM.render(
-    <Layout aria-label={CLOUD_SECURITY_TITLE} items={items}>
+    <Layout>
       <GoogleCloudApp params={params} />
     </Layout>,
     params.element,

diff --git a/plugins/wazuh-analysis/public/groups/cloud-security/apps/office-365/application.tsx b/plugins/wazuh-analysis/public/groups/cloud-security/apps/office-365/application.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { AppMountParameters } from 'opensearch-dashboards/public';
 import ReactDOM from 'react-dom';
-import { Layout } from '../../../layout';
-import { createSideNavItems } from '../../../side-nav';
-import { CLOUD_SECURITY_TITLE } from '../../constants';
-import { CloudSecurityNavGroup } from '../..';
+import { AppProps } from '../../../../../../wazuh-core/public/services/application/types';
 import { Office365App } from './office-365-app';
-import { OFFICE365_ID } from './constants';
-
-export const renderApp = async (params: AppMountParameters) => {
-  const items = createSideNavItems({
-    group: CloudSecurityNavGroup,
-    selectedAppId: OFFICE365_ID,
-  });
 
+export const renderApp = async (
+  params: AppMountParameters,
+  { Layout }: AppProps,
+) => {
   ReactDOM.render(
-    <Layout aria-label={CLOUD_SECURITY_TITLE} items={items}>
+    <Layout>
       <Office365App params={params} />
     </Layout>,
     params.element,

diff --git a/plugins/wazuh-analysis/public/groups/cloud-security/index.ts b/plugins/wazuh-analysis/public/groups/cloud-security/index.ts
@@ -7,6 +7,7 @@ import {
 } from '../../../../../src/core/public';
 import { CATEGORY } from '../category';
 import { Group } from '../../../../wazuh-core/public/services/application/types';
+import { ApplicationService } from '../../../../wazuh-core/public/services/application/application';
 import { getCloudSecurityApps } from './applications';
 import {
   CLOUD_SECURITY_DESCRIPTION,
@@ -51,7 +52,10 @@ export const CloudSecurityNavGroup: Group<typeof CLOUD_SECURITY_ID> = {
     }));
   },
 
-  getApps(updater$?: Subject<AppUpdater>): App[] {
-    return getCloudSecurityApps(updater$);
+  getApps(
+    applicationService: ApplicationService,
+    updater$: Subject<AppUpdater>,
+  ): App[] {
+    return getCloudSecurityApps(applicationService, updater$);
   },
 };
diff --git a/plugins/wazuh-analysis/public/groups/endpoint-security/applications.ts b/plugins/wazuh-analysis/public/groups/endpoint-security/applications.ts
@@ -5,6 +5,7 @@ import {
   AppNavLinkStatus,
   AppUpdater,
 } from '../../../../../src/core/public';
+import { ApplicationService } from '../../../../wazuh-core/public/services/application/application';
 import {
   CONFIGURATION_ASSESSMENT_ID,
   CONFIGURATION_ASSESSMENT_TITLE,
@@ -14,8 +15,16 @@ import {
   MALWARE_DETECTION_ID,
   MALWARE_DETECTION_TITLE,
 } from './apps/malware-detection/constants';
+import { EndpointSecurityNavGroup } from '.';
+
+export function getEndpointSecurityApps(
+  applicationService?: ApplicationService,
+  updater$?: Subject<AppUpdater>,
+): App[] {
+  const endpointSecurityLayout = applicationService?.createLayout(
+    EndpointSecurityNavGroup,
+  );
 
-export function getEndpointSecurityApps(updater$?: Subject<AppUpdater>): App[] {
   return [
     {
       id: CONFIGURATION_ASSESSMENT_ID,
@@ -27,7 +36,9 @@ export function getEndpointSecurityApps(updater$?: Subject<AppUpdater>): App[] {
           './apps/configuration-assesment/application'
         );
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: endpointSecurityLayout!(CONFIGURATION_ASSESSMENT_ID),
+        });
       },
     },
     {
@@ -40,7 +51,9 @@ export function getEndpointSecurityApps(updater$?: Subject<AppUpdater>): App[] {
           './apps/malware-detection/application'
         );
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: endpointSecurityLayout!(MALWARE_DETECTION_ID),
+        });
       },
     },
     {
@@ -51,7 +64,9 @@ export function getEndpointSecurityApps(updater$?: Subject<AppUpdater>): App[] {
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./apps/fim/application');
 
-        return await renderApp(params);
+        return await renderApp(params, {
+          Layout: endpointSecurityLayout!(FIM_ID),
+        });
       },
     },
   ];

diff --git a/...zuh-analysis/public/groups/endpoint-security/apps/configuration-assesment/application.tsx b/...zuh-analysis/public/groups/endpoint-security/apps/configuration-assesment/application.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { AppMountParameters } from 'opensearch-dashboards/public';
 import ReactDOM from 'react-dom';
-import { EndpointSecurityNavGroup } from '../..';
-import { Layout } from '../../../layout';
-import { createSideNavItems } from '../../../side-nav';
-import { ENDPOINT_SECURITY_TITLE } from '../../constants';
+import { AppProps } from '../../../../../../wazuh-core/public/services/application/types';
 import { ConfigurationAssessmentApp } from './configuration-assesment-app';
-import { CONFIGURATION_ASSESSMENT_ID } from './constants';
-
-export const renderApp = async (params: AppMountParameters) => {
-  const items = createSideNavItems({
-    group: EndpointSecurityNavGroup,
-    selectedAppId: CONFIGURATION_ASSESSMENT_ID,
-  });
 
+export const renderApp = async (
+  params: AppMountParameters,
+  { Layout }: AppProps,
+) => {
   ReactDOM.render(
-    <Layout aria-label={ENDPOINT_SECURITY_TITLE} items={items}>
+    <Layout>
       <ConfigurationAssessmentApp params={params} />
     </Layout>,
     params.element,

diff --git a/plugins/wazuh-analysis/public/groups/endpoint-security/apps/fim/application.tsx b/plugins/wazuh-analysis/public/groups/endpoint-security/apps/fim/application.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import { AppMountParameters } from 'opensearch-dashboards/public';
 import ReactDOM from 'react-dom';
-import { EndpointSecurityNavGroup } from '../..';
-import { Layout } from '../../../layout';
-import { createSideNavItems } from '../../../side-nav';
-import { ENDPOINT_SECURITY_TITLE } from '../../constants';
+import { AppProps } from '../../../../../../wazuh-core/public/services/application/types';
 import { FimApp } from './fim-app';
-import { FIM_ID } from './constants';
-
-export const renderApp = async (params: AppMountParameters) => {
-  const items = createSideNavItems({
-    group: EndpointSecurityNavGroup,
-    selectedAppId: FIM_ID,
-  });
 
+export const renderApp = async (
+  params: AppMountParameters,
+  { Layout }: AppProps,
+) => {
   ReactDOM.render(
-    <Layout aria-label={ENDPOINT_SECURITY_TITLE} items={items}>
+    <Layout>
       <FimApp params={params} />
     </Layout>,
     params.element,