Enhancement/88 integrate plugin and update about page

CHANGELOG.md

@@ -7,6 +7,8 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Added
 
 - Support for Wazuh 4.8.0
+- Added `wazuh-check-updates` plugin. [#5897](https://github.com/wazuh/wazuh-kibana-app/pull/5897)
+- Added new updates availability information to the About page. [#5939](https://github.com/wazuh/wazuh-kibana-app/pull/5939)
 
 ## Wazuh v4.7.0 - OpenSearch Dashboards 2.6.0 - Revision 01
 

plugins/main/opensearch_dashboards.json

@@ -2,9 +2,7 @@
   "id": "wazuh",
   "version": "4.8.0-01",
   "opensearchDashboardsVersion": "opensearchDashboards",
-  "configPath": [
-    "wazuh"
-  ],
+  "configPath": ["wazuh"],
   "requiredPlugins": [
     "navigation",
     "data",
@@ -16,14 +14,10 @@
     "savedObjects",
     "opensearchDashboardsReact",
     "opensearchDashboardsUtils",
-    "opensearchDashboardsLegacy"
-  ],
-  "optionalPlugins": [
-    "security",
-    "securityDashboards",
-    "searchguard",
-    "telemetry"
+    "opensearchDashboardsLegacy",
+    "wazuhCheckUpdates"
   ],
+  "optionalPlugins": ["security", "securityDashboards", "searchguard", "telemetry"],
   "server": true,
   "ui": true
-}
+}

plugins/main/public/components/settings/about/__snapshots__/appInfo.test.tsx.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SettingsAboutAppInfo component should render version, revision, install date and UpToDateStatus and DismissNotificationCheck components 1`] = `
+<div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiText euiText--medium"
+      >
+        <div
+          class="wz-text-truncatable"
+        >
+          App version: 
+          <span
+            class="wz-text-bold"
+          >
+            4.8.0
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem"
+    >
+      <div>
+        Up to date status component
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    class="euiText euiText--medium"
+  >
+    <div
+      class="wz-text-truncatable"
+    >
+      App revision: 
+      <span
+        class="wz-text-bold"
+      >
+        01
+      </span>
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    class="euiText euiText--medium"
+  >
+    <div
+      class="wz-text-truncatable"
+    >
+      Install date: 
+      <span
+        class="wz-text-bold"
+      >
+        Sep 25, 2023 @ 14:03:40.816
+      </span>
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div>
+    Dismiss notification check component
+  </div>
+</div>
+`;

plugins/main/public/components/settings/about/__snapshots__/generalInfo.test.tsx.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SettingsAboutGeneralInfo component should render a component 1`] = `
+<div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem"
+    >
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <h2
+          class="euiTitle euiTitle--medium"
+        >
+          Welcome to the Wazuh dashboard
+        </h2>
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="euiText euiText--medium"
+        >
+          <p>
+            Wazuh dashboard
+             provides management and monitoring capabilities, giving users control over the Wazuh infrastructure. You can monitor your agents status and configuration, query and visualize your alert data and monitor manager rules and configuration.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem"
+    >
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <h2
+          class="euiTitle euiTitle--medium"
+        >
+          Community
+        </h2>
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div>
+          <div
+            class="euiText euiText--medium"
+          >
+            <p>
+              Enjoy your Wazuh experience and please don't hesitate to give us your feedback.
+            </p>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <a
+                aria-label="Slack"
+                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                href="https://wazuh.com/community/join-us-on-slack/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--xxLarge euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </a>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <a
+                aria-label="Google Groups"
+                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                href="https://groups.google.com/forum/#!forum/wazuh"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <img
+                  alt=""
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--xxLarge euiIcon--inherit euiButtonIcon__icon"
+                  src="<svg></svg>"
+                />
+              </a>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <a
+                aria-label="Github"
+                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                href="https://github.com/wazuh/wazuh-kibana-app"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--xxLarge euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

plugins/main/public/components/settings/about/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SettingsAbout component should render a component with 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"
+      >
+        <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>
+`;

plugins/main/public/components/settings/about/appInfo.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SettingsAboutAppInfo } from './appInfo';
+
+jest.mock('../../../kibana-services', () => ({
+  getWazuhCheckUpdatesPlugin: jest.fn().mockReturnValue({
+    UpToDateStatus: () => <div>Up to date status component</div>,
+    DismissNotificationCheck: () => <div>Dismiss notification check component</div>,
+  }),
+}));
+
+describe('SettingsAboutAppInfo component', () => {
+  test('should render version, revision, install date and UpToDateStatus and DismissNotificationCheck components', () => {
+    const { container, getByText } = render(
+      <SettingsAboutAppInfo
+        appInfo={{
+          'app-version': '4.8.0',
+          revision: '01',
+          installationDate: 'Sep 25, 2023 @ 14:03:40.816',
+        }}
+        setCurrentUpdate={() => {}}
+      />
+    );
+
+    expect(container).toMatchSnapshot();
+
+    const loaders = container.getElementsByClassName('euiLoadingSpinner');
+    expect(loaders.length).toBe(0);
+
+    expect(getByText('App version:')).toBeInTheDocument();
+    expect(getByText('4.8.0')).toBeInTheDocument();
+    expect(getByText('App revision:')).toBeInTheDocument();
+    expect(getByText('01')).toBeInTheDocument();
+    expect(getByText('Install date:')).toBeInTheDocument();
+    expect(getByText('Sep 25, 2023 @ 14:03:40.816')).toBeInTheDocument();
+    expect(getByText('Up to date status component')).toBeInTheDocument();
+    expect(getByText('Dismiss notification check component')).toBeInTheDocument();
+  });
+});