Added pinned agent mechanic to inventory data, stats, and configuration for consistent functionality

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added ability to filter from File Integrity Monitoring registry inventory [#7119](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7119)
 - Added new field columns and ability to select the visible fields in the File Integrity Monitoring Files and Registry tables [#7119](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7119)
 - Added filter by value to document details fields [#7081](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7081)
+- Added pinned agent mechanic across all pages for consistent functionality [#7135](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7135)
 
 ### Changed
 

plugins/main/public/components/common/buttons/button.tsx

@@ -12,11 +12,15 @@
 import React from 'react';
 import {
   EuiButton,
+  EuiButtonProps,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiLink,
   EuiToolTip,
   EuiSwitch,
+  EuiButtonEmptyProps,
+  EuiButtonIconProps,
+  EuiSwitchProps,
 } from '@elastic/eui';
 
 export enum WzButtonType {
@@ -27,14 +31,20 @@ export enum WzButtonType {
   switch = 'switch',
 }
 
-interface WzButtonProps {
-  buttonType?: WzButtonType;
-  tooltip?: any;
-  color?: any;
-  children?: any;
-  isDisabled?: any;
-  rest?: any;
-}
+type WzButtonProps =
+  | {
+      buttonType?: WzButtonType;
+      tooltip?: any;
+      color?: string;
+      children?: any;
+      isDisabled?: any;
+      className?: string;
+      rest?: any;
+    }
+  | Partial<EuiButtonProps>
+  | Partial<EuiButtonEmptyProps>
+  | Partial<EuiButtonIconProps>
+  | Partial<EuiSwitchProps>;
 
 const WzButtons: { [key in WzButtonType]: React.FunctionComponent } = {
   default: EuiButton,

plugins/main/public/components/common/modules/main-agent.test.tsx

@@ -6,6 +6,7 @@ import { queryDataTestAttr } from '../../../../test/public/query-attr';
 
 const GENERATE_REPORT_BUTTON = 'generate-report-button';
 const ARIA_SELECTED = '[aria-selected="true"]';
+const EXPLORE_AGENT_BUTTON = 'explore-agent-button';
 
 const REPORT_TAB = {
   STATS: 'agent-tab-stats',
@@ -33,6 +34,19 @@ jest.mock('../data-source', () => ({
   __esModule: true,
 }));
 
+jest.mock('react-redux', () => ({
+  connect: () => Component => Component,
+  __esModule: true,
+}));
+
+jest.mock('../../../react-services/navigation-service', () => ({
+  getInstance: () => ({
+    getPathname: () => '',
+    getParams: () => new URLSearchParams(),
+    renewURL: jest.fn(),
+  }),
+}));
+
 describe('Main Agent', () => {
   let switchTab: jest.Mock;
 
@@ -356,4 +370,81 @@ describe('Main Agent', () => {
       expect(generateReportButton).toBeTruthy();
     });
   });
+  describe('ButtonExploreAgent', () => {
+    it('should render explore agent button in tab software', () => {
+      const { container } = render(
+        <MainModuleAgent
+          agent={{ os: { platform: 'windows' } }}
+          section={AgentTabs.SOFTWARE}
+          switchTab={switchTab}
+        />,
+      );
+
+      const exploreAgentButton = container.querySelector(
+        queryDataTestAttr(EXPLORE_AGENT_BUTTON),
+      );
+
+      expect(exploreAgentButton).toBeTruthy();
+    });
+    it('should render explore agent button in tab network', () => {
+      const { container } = render(
+        <MainModuleAgent
+          agent={{ os: { platform: 'windows' } }}
+          section={AgentTabs.NETWORK}
+          switchTab={switchTab}
+        />,
+      );
+
+      const exploreAgentButton = container.querySelector(
+        queryDataTestAttr(EXPLORE_AGENT_BUTTON),
+      );
+
+      expect(exploreAgentButton).toBeTruthy();
+    });
+    it('should render explore agent button in tab processes', () => {
+      const { container } = render(
+        <MainModuleAgent
+          agent={{ os: { platform: 'windows' } }}
+          section={AgentTabs.PROCESSES}
+          switchTab={switchTab}
+        />,
+      );
+
+      const exploreAgentButton = container.querySelector(
+        queryDataTestAttr(EXPLORE_AGENT_BUTTON),
+      );
+
+      expect(exploreAgentButton).toBeTruthy();
+    });
+    it('should render explore agent button in tab stats', () => {
+      const { container } = render(
+        <MainModuleAgent
+          agent={{ os: { platform: 'windows' } }}
+          section={AgentTabs.STATS}
+          switchTab={switchTab}
+        />,
+      );
+
+      const exploreAgentButton = container.querySelector(
+        queryDataTestAttr(EXPLORE_AGENT_BUTTON),
+      );
+
+      expect(exploreAgentButton).toBeTruthy();
+    });
+    it('should render explore agent button in tab configuration', () => {
+      const { container } = render(
+        <MainModuleAgent
+          agent={{ os: { platform: 'windows' } }}
+          section={AgentTabs.CONFIGURATION}
+          switchTab={switchTab}
+        />,
+      );
+
+      const exploreAgentButton = container.querySelector(
+        queryDataTestAttr(EXPLORE_AGENT_BUTTON),
+      );
+
+      expect(exploreAgentButton).toBeTruthy();
+    });
+  });
 });

plugins/main/public/components/common/modules/main-agent.tsx

@@ -34,6 +34,7 @@ import { toTitleCase } from '../util/change-case';
 import clsx from 'clsx';
 import { AgentTabs } from '../../endpoints-summary/agent/agent-tabs';
 import { Agent } from '../../endpoints-summary/types';
+import { ButtonExploreAgent } from '../../wz-agent-selector/button-explore-agent';
 
 export class MainModuleAgent extends Component {
   props!: {
@@ -52,7 +53,7 @@ export class MainModuleAgent extends Component {
     const { agent, section, switchTab } = this.props;
     return (
       <EuiFlexGroup style={{ marginInline: 8 }}>
-        <EuiFlexItem style={{ marginInline: 0 }} grow={false}>
+        <EuiFlexItem style={{ marginInline: 0 }}>
           <EuiTabs data-test-subj='agent-tabs'>
             {this.inventoryTabs.includes(section) ? (
               <>
@@ -74,14 +75,13 @@ export class MainModuleAgent extends Component {
             )}
           </EuiTabs>
         </EuiFlexItem>
-        <EuiFlexItem />
+        <EuiFlexItem grow={false}>
+          <ButtonExploreAgent />
+        </EuiFlexItem>
         {[AgentTabs.SOFTWARE, AgentTabs.NETWORK, AgentTabs.PROCESSES].includes(
           section,
         ) && (
-          <EuiFlexItem
-            grow={false}
-            style={{ marginTop: 13.25, marginInline: 0 }}
-          >
+          <EuiFlexItem grow={false} style={{ marginTop: 13.25 }}>
             <GenerateReportButton agent={agent} />
           </EuiFlexItem>
         )}

plugins/main/public/components/wz-agent-selector/button-explore-agent.scss

@@ -1,9 +1,8 @@
-.wz-explore-agent .euiButtonEmpty:focus {
-  background-color: transparent;
+.wz-unpin-agent-bg {
+  background-color: rgba(0, 107, 180, 0.1);
 }
 
 .wz-unpin-agent {
-  background-color: rgba(0, 107, 180, 0.1);
   border-radius: 0;
   height: 40px;
 }

plugins/main/public/components/wz-agent-selector/button-explore-agent.tsx

@@ -5,6 +5,7 @@ import { WzButtonType } from '../common/buttons/button';
 import { connect } from 'react-redux';
 import { showExploreAgentModalGlobal } from '../../redux/actions/appStateActions';
 import './button-explore-agent.scss';
+import clsx from 'clsx';
 
 const ButtonPinnedAgent = ({ showExploreAgentModalGlobal, module }) => {
   const pinnedAgentManager = new PinnedAgentManager();
@@ -15,40 +16,41 @@ const ButtonPinnedAgent = ({ showExploreAgentModalGlobal, module }) => {
     ? module?.availableFor && module?.availableFor.includes('agent')
     : true;
   return (
-    <>
-      <div style={{ display: 'inline-flex' }}>
+    <div
+      data-test-subj='explore-agent-button'
+      style={{ display: 'inline-flex' }}
+    >
+      <WzButton
+        buttonType={WzButtonType.empty}
+        color='primary'
+        isDisabled={!avaliableForAgent}
+        tooltip={{
+          position: 'bottom',
+          content: !avaliableForAgent
+            ? 'This module is not supported for agents.'
+            : agent
+            ? 'Change agent selected'
+            : 'Select an agent to explore its modules',
+        }}
+        className={clsx({ 'wz-unpin-agent-bg': agent })}
+        iconType='watchesApp'
+        onClick={() => showExploreAgentModalGlobal(true)}
+      >
+        {agent ? `${agent.name} (${agent.id})` : 'Explore agent'}
+      </WzButton>
+      {agent ? (
         <WzButton
-          buttonType={WzButtonType.empty}
-          color='primary'
-          isDisabled={!avaliableForAgent}
-          tooltip={{
-            position: 'bottom',
-            content: !avaliableForAgent
-              ? 'This module is not supported for agents.'
-              : agent
-              ? 'Change agent selected'
-              : 'Select an agent to explore its modules',
+          buttonType={WzButtonType.icon}
+          className='wz-unpin-agent wz-unpin-agent-bg'
+          iconType='pinFilled'
+          onClick={() => {
+            pinnedAgentManager.unPinAgent();
           }}
-          style={agent ? { background: 'rgba(0, 107, 180, 0.1)' } : undefined}
-          iconType='watchesApp'
-          onClick={() => showExploreAgentModalGlobal(true)}
-        >
-          {agent ? `${agent.name} (${agent.id})` : 'Explore agent'}
-        </WzButton>
-        {agent ? (
-          <WzButton
-            buttonType={WzButtonType.icon}
-            className='wz-unpin-agent'
-            iconType='pinFilled'
-            onClick={() => {
-              pinnedAgentManager.unPinAgent();
-            }}
-            tooltip={{ position: 'bottom', content: 'Unpin agent' }}
-            aria-label='Unpin agent'
-          />
-        ) : null}
-      </div>
-    </>
+          tooltip={{ position: 'bottom', content: 'Unpin agent' }}
+          aria-label='Unpin agent'
+        />
+      ) : null}
+    </div>
   );
 };
 

plugins/main/public/controllers/overview/components/overview-actions/agents-selector.scss

@@ -32,17 +32,3 @@
   background: #bd271e;
   color: white;
 }
-
-.wz-explore-agent .euiButtonEmpty:focus {
-  background-color: transparent;
-}
-
-.wz-unpin-agent {
-  background-color: rgba(0, 107, 180, 0.1);
-  border-radius: 0;
-  height: 40px;
-}
-
-.wz-unpin-agent:hover {
-  transform: translateY(0px) !important;
-}