Added consistency between url and Endpoint groups view

CHANGELOG.md

@@ -49,6 +49,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Improvement of the filter management system by implementing new standard modules [#6534](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6534) [#6772](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6772) [#6873](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6873)
 - Changed permalink field in the Events tab table in Virustotal to show an external link [#6839](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6839)
 - Changed the logging system to use the provided by the platform [#6161](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6161)
+- Change the internal control from Endpoint Groups to a control via url. [#6890](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6890)
 - Change the internal control from Mitre > intelligence > Table to a control via url. [#6882](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6882)
 - Changed the display of rule details flyout to be based on URL [#6886](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6886)
 

plugins/main/public/controllers/management/components/management/groups/group-detail.js

@@ -1,16 +1,15 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 // Eui components
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
   EuiPage,
   EuiTitle,
-  EuiText,
   EuiTab,
   EuiTabs,
   EuiToolTip,
-  EuiButtonIcon
+  EuiButtonIcon,
 } from '@elastic/eui';
 
 import { connect } from 'react-redux';
@@ -19,14 +18,15 @@ import GroupsHandler from './utils/groups-handler';
 
 import {
   cleanTabs,
-  updateSelectedTab
+  updateSelectedTab,
 } from '../../../../../redux/actions/groupsActions';
 import WzGroupsActionButtonsAgents from './actions-buttons-agents';
 import WzGroupsActionButtonsFiles from './actions-buttons-files';
 import WzGroupAgentsTable from './group-agents-table';
 import WzGroupFilesTable from './group-files-table';
 import { withUserAuthorizationPrompt } from '../../../../../components/common/hocs';
 import { compose } from 'redux';
+import NavigationService from '../../../../../react-services/navigation-service';
 
 class WzGroupDetail extends Component {
   constructor(props) {
@@ -36,17 +36,17 @@ class WzGroupDetail extends Component {
       {
         id: 'agents',
         name: 'Agents',
-        disabled: false
+        disabled: false,
       },
       {
         id: 'files',
         name: 'Files',
-        disabled: false
-      }
+        disabled: false,
+      },
     ];
 
     this.state = {
-      selectedTabId: this.props.state.selectedTabId
+      selectedTabId: this.props.state.selectedTabId,
     };
 
     this.groupsHandler = GroupsHandler;
@@ -58,13 +58,16 @@ class WzGroupDetail extends Component {
 
   onSelectedTabChanged = id => {
     this.setState({
-      selectedTabId: id
+      selectedTabId: id,
     });
     this.props.updateSelectedTab(id);
   };
 
   goBack() {
     this.props.cleanTabs();
+    NavigationService.getInstance().updateAndNavigateSearchParams({
+      group: null,
+    });
   }
 
   renderTabs() {
@@ -82,15 +85,11 @@ class WzGroupDetail extends Component {
   }
 
   renderAgents() {
-    return (
-      <WzGroupAgentsTable {...this.props} />
-    );
+    return <WzGroupAgentsTable {...this.props} />;
   }
 
   renderFiles() {
-    return (
-      <WzGroupFilesTable />
-    );
+    return <WzGroupFilesTable />;
   }
 
   render() {
@@ -103,19 +102,19 @@ class WzGroupDetail extends Component {
             <EuiFlexItem>
               <EuiFlexGroup>
                 <EuiFlexItem grow={false} style={{ marginRight: 0 }}>
-                  <EuiToolTip position="right" content={`Back to groups`}>
+                  <EuiToolTip position='right' content={`Back to groups`}>
                     <EuiButtonIcon
-                      aria-label="Back"
+                      aria-label='Back'
                       style={{ paddingTop: 8 }}
-                      color="primary"
-                      iconSize="l"
-                      iconType="arrowLeft"
+                      color='primary'
+                      iconSize='l'
+                      iconType='arrowLeft'
                       onClick={() => this.goBack()}
                     />
                   </EuiToolTip>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiTitle size="s">
+                  <EuiTitle size='s'>
                     <h1>{itemDetail.name}</h1>
                   </EuiTitle>
                 </EuiFlexItem>
@@ -147,22 +146,24 @@ class WzGroupDetail extends Component {
 
 const mapStateToProps = state => {
   return {
-    state: state.groupsReducers
+    state: state.groupsReducers,
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
     cleanTabs: () => dispatch(cleanTabs()),
     updateSelectedTab: selectedTabId =>
-      dispatch(updateSelectedTab(selectedTabId))
+      dispatch(updateSelectedTab(selectedTabId)),
   };
 };
 
 export default compose(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  ),
-  withUserAuthorizationPrompt((props) => [{action: 'group:read', resource: `group:id:${props.state.itemDetail.name}`}]),
+  connect(mapStateToProps, mapDispatchToProps),
+  withUserAuthorizationPrompt(props => [
+    {
+      action: 'group:read',
+      resource: `group:id:${props.state.itemDetail.name}`,
+    },
+  ]),
 )(WzGroupDetail);

plugins/main/public/controllers/management/components/management/groups/groups-main.js

@@ -39,7 +39,7 @@ class WzGroups extends Component {
     this.state = {};
   }
 
-  async componentDidMount() {
+  getGroupDetail = async () => {
     // Check if there is a group in the URL
     const { group } = this.props.search;
     if (group) {
@@ -50,9 +50,6 @@ class WzGroups extends Component {
         });
         const dataGroup = responseGroup?.data?.data?.affected_items?.[0];
         this.props.updateGroupDetail(dataGroup);
-        NavigationService.getInstance().updateAndNavigateSearchParams({
-          group: null,
-        });
       } catch (error) {
         const options = {
           context: `${WzGroups.name}.componentDidMount`,
@@ -68,6 +65,17 @@ class WzGroups extends Component {
         getErrorOrchestrator().handleError(options);
       }
     }
+  };
+  async componentDidMount() {
+    await this.getGroupDetail();
+  }
+
+  async componentDidUpdate(prevProps) {
+    if (this.props.search?.group !== prevProps.search?.group) {
+      this.props.search?.group === undefined
+        ? this.props.updateGroupDetail(false)
+        : await this.getGroupDetail();
+    }
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -113,7 +121,20 @@ const mapDispatchToProps = dispatch => {
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withGlobalBreadcrumb(props => {
-    return [{ text: endpointGroups.breadcrumbLabel }];
+    return props.state?.itemDetail
+      ? [
+          {
+            text: endpointGroups.breadcrumbLabel,
+            onClick: ev => {
+              ev.preventDefault();
+              NavigationService.getInstance().updateAndNavigateSearchParams({
+                group: null,
+              });
+            },
+          },
+          { text: props.state?.itemDetail.name },
+        ]
+      : [{ text: endpointGroups.breadcrumbLabel }];
   }),
   withRouterSearch,
 )(WzGroups);

plugins/main/public/controllers/management/components/management/groups/groups-overview.js

@@ -39,6 +39,7 @@ import { WzRequest, WzUserPermissions } from '../../../../../react-services';
 import { getToasts } from '../../../../../kibana-services';
 import GroupsHandler from './utils/groups-handler';
 import { SEARCH_BAR_WQL_VALUE_SUGGESTIONS_COUNT } from '../../../../../../common/constants';
+import NavigationService from '../../../../../react-services/navigation-service';
 
 export class WzGroupsOverview extends Component {
   _isMounted = false;
@@ -256,7 +257,12 @@ export class WzGroupsOverview extends Component {
           [{ action: 'group:read', resource: `group:id:${item.name}` }],
           this.props.userPermissions,
         )
-          ? () => this.props.updateGroupDetail(item)
+          ? () => {
+              NavigationService.getInstance().updateAndNavigateSearchParams({
+                group: item.name,
+              });
+              return this.props.updateGroupDetail(item);
+            }
           : undefined,
       };
     };