Notify user when a new update is available

plugins/main/public/app.js

@@ -58,9 +58,7 @@ const app = getAngularModule();
 app.config([
   '$compileProvider',
   function ($compileProvider) {
-    $compileProvider.aHrefSanitizationWhitelist(
-      /^\s*(https?|ftp|mailto|data|blob):/,
-    );
+    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|data|blob):/);
   },
 ]);
 
@@ -79,7 +77,7 @@ app.run([
 
     // Set currentSecurity platform in Redux when app starts.
     checkCurrentSecurityPlatform()
-      .then(item => {
+      .then((item) => {
         store.dispatch(updateCurrentPlatform(item));
       })
       .catch(() => {});
@@ -103,35 +101,30 @@ app.run(function ($rootElement) {
       <react-component name="WzMenuWrapper" props=""></react-component>
       <react-component name="WzAgentSelectorWrapper" props=""></react-component>
       <react-component name="ToastNotificationsModal" props=""></react-component>
+      <react-component name="WzUpdatesNotification" props=""></react-component>
     </div>`);
 
   // Add plugin help links as extension to plugin platform help menu
   addHelpMenuToAppChrome();
 
   // Bind deleteExistentToken on Log out component.
-  $('.euiHeaderSectionItem__button, .euiHeaderSectionItemButton').on(
-    'mouseleave',
-    function () {
-      // opendistro
-      $('button:contains(Log out)').on('click', function () {
-        WzAuthentication.deleteExistentToken();
-      });
-      // x-pack
-      $('a:contains(Log out)').on('click', function (event) {
-        // Override href's behaviour and navigate programatically
-        // to the logout path once the token has been deleted.
-        event.preventDefault();
-        WzAuthentication.deleteExistentToken()
-          .catch(err => {
-            console.error(
-              '[ERROR] - User token could not be deprecated - ',
-              err,
-            );
-          })
-          .finally(() => {
-            window.location = event.currentTarget.href;
-          });
-      });
-    },
-  );
+  $('.euiHeaderSectionItem__button, .euiHeaderSectionItemButton').on('mouseleave', function () {
+    // opendistro
+    $('button:contains(Log out)').on('click', function () {
+      WzAuthentication.deleteExistentToken();
+    });
+    // x-pack
+    $('a:contains(Log out)').on('click', function (event) {
+      // Override href's behaviour and navigate programatically
+      // to the logout path once the token has been deleted.
+      event.preventDefault();
+      WzAuthentication.deleteExistentToken()
+        .catch((err) => {
+          console.error('[ERROR] - User token could not be deprecated - ', err);
+        })
+        .finally(() => {
+          window.location = event.currentTarget.href;
+        });
+    });
+  });
 });

plugins/main/public/components/index.js

@@ -20,6 +20,7 @@ import { ClusterTimelions } from '../components/management/cluster/cluster-timel
 import { KibanaVisWrapper } from '../components/management/cluster/cluster-visualization';
 import { ToastNotificationsModal } from '../components/notifications/modal';
 import { getAngularModule } from '../kibana-services';
+import { WzUpdatesNotification } from './wz-updates-notification';
 
 const app = getAngularModule();
 
@@ -32,3 +33,4 @@ app.value('ClusterDisabled', ClusterDisabled);
 app.value('ClusterTimelions', ClusterTimelions);
 app.value('KibanaVisualization', KibanaVisWrapper);
 app.value('ToastNotificationsModal', ToastNotificationsModal);
+app.value('WzUpdatesNotification', WzUpdatesNotification);

plugins/main/public/components/wz-updates-notification/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WzUpdatesNotification tests should render a WzUpdatesNotification 1`] = `
+<div>
+  <div>
+    Updates notification
+  </div>
+</div>
+`;

plugins/main/public/components/wz-updates-notification/index.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { WzUpdatesNotification } from '.';
+
+jest.mock('../../kibana-services', () => ({
+  getWazuhCheckUpdatesPlugin: jest.fn().mockReturnValue({
+    UpdatesNotification: () => <div>Updates notification</div>,
+  }),
+}));
+
+describe('WzUpdatesNotification tests', () => {
+  test('should render a WzUpdatesNotification', () => {
+    const { container } = render(<WzUpdatesNotification />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

plugins/main/public/components/wz-updates-notification/index.tsx

@@ -0,0 +1,21 @@
+/*
+ * Wazuh app - React Component component to display new updates notification.
+ *
+ * Copyright (C) 2015-2023 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import React from 'react';
+import { getWazuhCheckUpdatesPlugin } from '../../kibana-services';
+
+export const WzUpdatesNotification = () => {
+  const { UpdatesNotification } = getWazuhCheckUpdatesPlugin();
+
+  return <UpdatesNotification />;
+};

plugins/wazuh-check-updates/public/components/updates-notification.tsx

@@ -70,14 +70,18 @@ export const UpdatesNotification = () => {
   return isVisible ? (
     <I18nProvider>
       <EuiBottomBar style={{ backgroundColor: 'white', color: '#1a1c21' }}>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="m">
+        <EuiFlexGroup
+          justifyContent='spaceBetween'
+          alignItems='center'
+          gutterSize='m'
+        >
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="m" alignItems="center">
+            <EuiFlexGroup gutterSize='m' alignItems='center'>
               <EuiFlexItem grow={false} style={{ maxWidth: 'max-content' }}>
                 <EuiText>
                   <FormattedMessage
-                    id="wazuhCheckUpdates.updatesNotification.message"
-                    defaultMessage="Wazuh new release is available now!"
+                    id='wazuhCheckUpdates.updatesNotification.message'
+                    defaultMessage='Wazuh new release is available now!'
                   />
                 </EuiText>
               </EuiFlexItem>
@@ -88,40 +92,44 @@ export const UpdatesNotification = () => {
                 <EuiHeaderLink
                   href={releaseNotesUrl}
                   isActive
-                  target="_blank"
-                  iconType="popout"
-                  iconSide="right"
+                  target='_blank'
+                  iconType='popout'
+                  iconSide='right'
                 >
                   {
                     <FormattedMessage
-                      id="wazuhCheckUpdates.updatesNotification.linkText"
-                      defaultMessage="Go to the release notes for details"
+                      id='wazuhCheckUpdates.updatesNotification.linkText'
+                      defaultMessage='Go to the release notes for details'
                     />
                   }
                 </EuiHeaderLink>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="m" alignItems="center">
+            <EuiFlexGroup gutterSize='m' alignItems='center'>
               <EuiFlexItem grow={false}>
                 <EuiCheckbox
-                  id="check-dismiss-in-notification"
+                  id='check-dismiss-in-notification'
                   label={
                     <FormattedMessage
-                      id="wazuhCheckUpdates.updatesNotification.dismissCheckText"
-                      defaultMessage="Disable updates notifications"
+                      id='wazuhCheckUpdates.updatesNotification.dismissCheckText'
+                      defaultMessage='Disable updates notifications'
                     />
                   }
                   checked={dismissFutureUpdates}
-                  onChange={(e) => handleOnChangeDismiss(e.target.checked)}
+                  onChange={e => handleOnChangeDismiss(e.target.checked)}
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false} style={{ maxWidth: 'max-content' }}>
-                <EuiButton size="s" iconType="cross" onClick={() => handleOnClose()}>
+                <EuiButton
+                  size='s'
+                  iconType='cross'
+                  onClick={() => handleOnClose()}
+                >
                   <FormattedMessage
-                    id="wazuhCheckUpdates.updatesNotification.closeButtonText"
-                    defaultMessage="Close"
+                    id='wazuhCheckUpdates.updatesNotification.closeButtonText'
+                    defaultMessage='Close'
                   />
                 </EuiButton>
               </EuiFlexItem>