wazuh · asteriscos · Nov 2, 2023 · Oct 26, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/docker/README.md b/docker/README.md
@@ -49,7 +49,7 @@ In general, the environment consist of:
 
     ```bash
     # ./bashrc
-    export WZ_HOME=~/your/path/to/wazuh_kibana_app/plugins/main
+    export WZ_HOME=~/your/path/to/wazuh_kibana_app/plugins
     ```
     Save and re-login or restart your terminal to apply the changes. Test that the variable has been set with:
 

diff --git a/plugins/main/public/components/settings/about/__snapshots__/appInfo.test.tsx.snap b/plugins/main/public/components/settings/about/__snapshots__/appInfo.test.tsx.snap
@@ -2,77 +2,58 @@
 
 exports[`SettingsAboutAppInfo component should render version, revision, install date and ApisUpdateStatus component 1`] = `
 <div>
-  <h2
-    class="euiTitle euiTitle--medium"
-  >
-    Dashboard version
-  </h2>
-  <div
-    class="euiSpacer euiSpacer--l"
-  />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
+    class="euiCallOut euiCallOut--primary"
   >
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <dl
-        class="euiDescriptionList euiDescriptionList--row"
-      >
-        <dt
-          class="euiDescriptionList__title"
-        >
-          Version
-        </dt>
-        <dd
-          class="euiDescriptionList__description"
-        >
-          4.8.0
-        </dd>
-      </dl>
-    </div>
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiText euiText--small"
     >
-      <dl
-        class="euiDescriptionList euiDescriptionList--row"
+      <div
+        class="euiTextColor euiTextColor--default"
       >
-        <dt
-          class="euiDescriptionList__title"
+        <div
+          class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
-          Revision
-        </dt>
-        <dd
-          class="euiDescriptionList__description"
-        >
-          01
-        </dd>
-      </dl>
-    </div>
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <dl
-        class="euiDescriptionList euiDescriptionList--row"
-      >
-        <dt
-          class="euiDescriptionList__title"
-        >
-          Install date
-        </dt>
-        <dd
-          class="euiDescriptionList__description"
-        >
-          Sep 25, 2023 @ 14:03:40.816
-        </dd>
-      </dl>
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiText euiText--medium"
+            >
+              App version: 
+              <b>
+                4.8.0
+              </b>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiText euiText--medium"
+            >
+              App revision: 
+              <b>
+                01
+              </b>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiText euiText--medium"
+            >
+              Install date:
+
+              <b>
+                Sep 25, 2023 @ 14:03:40.816
+              </b>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-  <hr
-    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-  />
-  <div>
-    APIs Updates Status component
-  </div>
 </div>
 `;
diff --git a/plugins/main/public/components/settings/about/__snapshots__/index.test.tsx.snap b/plugins/main/public/components/settings/about/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SettingsAbout component should render a component with a loader 1`] = `
+exports[`SettingsAbout component should render about page 1`] = `
 <div>
   <div
     class="euiPage euiPage--paddingMedium euiPage--grow"
@@ -9,66 +9,14 @@ exports[`SettingsAbout component should render a component with a loader 1`] = `
       class="euiPageBody euiPageBody--borderRadiusNone"
     >
       <div>
-        General info
+        App info
       </div>
       <div
         class="euiSpacer euiSpacer--l"
       />
-      <div
-        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-      >
-        <span
-          class="euiLoadingContent"
-        >
-          <span
-            class="euiLoadingContent__singleLine"
-          >
-            <span
-              class="euiLoadingContent__singleLineBackground"
-            />
-          </span>
-          <span
-            class="euiLoadingContent__singleLine"
-          >
-            <span
-              class="euiLoadingContent__singleLineBackground"
-            />
-          </span>
-          <span
-            class="euiLoadingContent__singleLine"
-          >
-            <span
-              class="euiLoadingContent__singleLineBackground"
-            />
-          </span>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SettingsAbout component should render a component without a loader 1`] = `
-<div>
-  <div
-    class="euiPage euiPage--paddingMedium euiPage--grow"
-  >
-    <div
-      class="euiPageBody euiPageBody--borderRadiusNone"
-    >
       <div>
         General info
       </div>
-      <div
-        class="euiSpacer euiSpacer--l"
-      />
-      <div
-        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-      >
-        <div>
-          App info
-        </div>
-      </div>
     </div>
   </div>
 </div>

diff --git a/plugins/main/public/components/settings/about/appInfo.test.tsx b/plugins/main/public/components/settings/about/appInfo.test.tsx
@@ -3,10 +3,8 @@ import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { SettingsAboutAppInfo } from './appInfo';
 
-jest.mock('../../../kibana-services', () => ({
-  getWazuhCheckUpdatesPlugin: jest.fn().mockReturnValue({
-    ApisUpdateStatus: () => <div>APIs Updates Status component</div>,
-  }),
+jest.mock('../../../react-services/time-service', () => ({
+  formatUIDate: jest.fn().mockReturnValue('Sep 25, 2023 @ 14:03:40.816'),
 }));
 
 describe('SettingsAboutAppInfo component', () => {
@@ -23,12 +21,11 @@ describe('SettingsAboutAppInfo component', () => {
 
     expect(container).toMatchSnapshot();
 
-    expect(getByText('Version')).toBeInTheDocument();
+    expect(getByText('App version:')).toBeInTheDocument();
     expect(getByText('4.8.0')).toBeInTheDocument();
-    expect(getByText('Revision')).toBeInTheDocument();
+    expect(getByText('App revision:')).toBeInTheDocument();
     expect(getByText('01')).toBeInTheDocument();
-    expect(getByText('Install date')).toBeInTheDocument();
+    expect(getByText('Install date:')).toBeInTheDocument();
     expect(getByText('Sep 25, 2023 @ 14:03:40.816')).toBeInTheDocument();
-    expect(getByText('APIs Updates Status component')).toBeInTheDocument();
   });
 });
diff --git a/plugins/main/public/components/settings/about/appInfo.tsx b/plugins/main/public/components/settings/about/appInfo.tsx
@@ -1,85 +1,36 @@
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTitle,
-  EuiHorizontalRule,
-  EuiDescriptionList,
-  EuiCallOut,
-} from '@elastic/eui';
-import React, { useState } from 'react';
-import { getWazuhCheckUpdatesPlugin } from '../../../kibana-services';
-import { ApiAvailableUpdates } from '../../../../../wazuh-check-updates/common/types';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import React from 'react';
+import { formatUIDate } from '../../../react-services/time-service';
 
 interface SettingsAboutAppInfoProps {
-  appInfo: {
+  appInfo?: {
     'app-version': string;
     installationDate: string;
     revision: string;
   };
 }
 
 export const SettingsAboutAppInfo = ({ appInfo }: SettingsAboutAppInfoProps) => {
-  const [apisAvailableUpdates, setApisAvailableUpdates] = useState<ApiAvailableUpdates[]>();
-
-  const { ApisUpdateStatus } = getWazuhCheckUpdatesPlugin();
-
-  const showVersionWarning = !!apisAvailableUpdates?.find(
-    (apiAvailableUpdates) =>
-      apiAvailableUpdates.current_version &&
-      apiAvailableUpdates.current_version.replace('v', '') !== appInfo['app-version']
-  );
-
   return (
-    <>
-      <EuiTitle>
-        <h2>Dashboard version</h2>
-      </EuiTitle>
-      <EuiSpacer size="l" />
-      <EuiFlexGroup responsive={false} wrap alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiDescriptionList
-            listItems={[
-              {
-                title: 'Version',
-                description: appInfo['app-version'],
-              },
-            ]}
-          />
+    <EuiCallOut>
+      <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="none">
+        <EuiFlexItem>
+          <EuiText>
+            App version: <b>{appInfo?.['app-version'] ? appInfo['app-version'] : ''}</b>
+          </EuiText>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiDescriptionList
-            listItems={[
-              {
-                title: 'Revision',
-                description: appInfo['revision'],
-              },
-            ]}
-          />
+        <EuiFlexItem>
+          <EuiText>
+            App revision: <b>{appInfo?.['revision'] ? appInfo['revision'] : ''}</b>
+          </EuiText>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiDescriptionList
-            listItems={[
-              {
-                title: 'Install date',
-                description: appInfo['installationDate'],
-              },
-            ]}
-          />
+        <EuiFlexItem>
+          <EuiText>
+            Install date:{' '}
+            <b>{appInfo?.['installationDate'] ? formatUIDate(appInfo['installationDate']) : ''}</b>
+          </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {showVersionWarning ? (
-        <>
-          <EuiSpacer size="l" />
-          <EuiCallOut
-            title="Dashboard version must be the same as APIs"
-            color="warning"
-            iconType="alert"
-          />
-        </>
-      ) : null}
-      <EuiHorizontalRule margin="l" />
-      <ApisUpdateStatus setApisAvailableUpdates={setApisAvailableUpdates} />
-    </>
+    </EuiCallOut>
   );
 };
diff --git a/plugins/main/public/components/settings/about/index.test.tsx b/plugins/main/public/components/settings/about/index.test.tsx
@@ -12,16 +12,7 @@ jest.mock('./generalInfo', () => ({
 }));
 
 describe('SettingsAbout component', () => {
-  test('should render a component with a loader', () => {
-    const { container } = render(<SettingsAbout pluginAppName="Wazuh dashboard" />);
-
-    expect(container).toMatchSnapshot();
-
-    const loaders = container.getElementsByClassName('euiLoadingContent');
-    expect(loaders.length).toBe(1);
-  });
-
-  test('should render a component without a loader', () => {
+  test('should render about page', () => {
     const { container, getByText } = render(
       <SettingsAbout
         appInfo={{
@@ -35,10 +26,10 @@ describe('SettingsAbout component', () => {
 
     expect(container).toMatchSnapshot();
 
-    const loaders = container.getElementsByClassName('euiLoadingContent');
-    expect(loaders.length).toBe(0);
-
     const appInfo = getByText('App info');
     expect(appInfo).toBeInTheDocument();
+
+    const generalInfo = getByText('General info');
+    expect(generalInfo).toBeInTheDocument();
   });
 });