From e649ae25c02ab4ca20fd49cdcbf86fd5be577ffe Mon Sep 17 00:00:00 2001
From: Luciano Gorza <103193307+lucianogorza@users.noreply.github.com>
Date: Thu, 28 Dec 2023 15:01:15 -0300
Subject: [PATCH] Allow edit groups from an agent (#6250)

* Agent groups column refactor and allow remove

* Agent groups allow edit

* Edit agent groups modal

* Fix links las registered agent

* Agent table with actions

* Extend funtionality from button with permissions and restore groups trucate component

* Modularize agents table actions

* Fix table filters

* Add form modal message

* Add CHANGELOG

* Update snapshot

* Fix return

* Fix actions field

* Fix snapshot

* Disable 'View details' actions when agent never connected

* Delete 'Upgrade' action
---
 CHANGELOG.md                                  |   1 +
 .../components/common/permissions/button.tsx  | 115 ++--
 .../components/common/permissions/element.tsx | 109 ++++
 .../components/common/permissions/prompt.tsx  |   2 +-
 .../agent_group_truncate.tsx                  |  81 ---
 .../agent-group-truncate/group-truncate.tsx   |   8 +-
 .../common/util/agent-group-truncate/index.ts |   3 +-
 .../public/components/common/util/index.ts    |  10 +-
 .../components/common/welcome/agents-info.js  |   1 -
 .../endpoints-summary/endpoints-summary.tsx   |  54 +-
 .../endpoints-summary/hooks/agents.ts         |  31 ++
 .../endpoints-summary/hooks/endpoints.ts      |  37 --
 .../endpoints-summary/hooks/groups.ts         |  32 ++
 .../endpoints-summary/hooks/index.ts          |   2 +-
 .../components/endpoints-summary/index.tsx    |  11 +-
 .../services/add-agent-to-group.tsx           |   4 +
 .../endpoints-summary/services/get-groups.tsx |   8 +
 .../services/get-total-agents.tsx             |  12 +
 .../endpoints-summary/services/index.tsx      |   5 +
 .../services/remove-agent-from-group.tsx      |   6 +
 .../services/remove-agent-from-groups.tsx     |  11 +
 .../__snapshots__/agents-table.test.tsx.snap  |   6 -
 .../endpoints-summary/table/actions.tsx       |  81 +++
 .../endpoints-summary/table/agents-table.js   | 523 ------------------
 .../endpoints-summary/table/agents-table.tsx  | 484 ++++++++++++++++
 .../table/edit-groups-modal.tsx               | 155 ++++++
 26 files changed, 1032 insertions(+), 760 deletions(-)
 create mode 100644 plugins/main/public/components/common/permissions/element.tsx
 delete mode 100644 plugins/main/public/components/common/util/agent-group-truncate/agent_group_truncate.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/hooks/agents.ts
 delete mode 100644 plugins/main/public/components/endpoints-summary/hooks/endpoints.ts
 create mode 100644 plugins/main/public/components/endpoints-summary/hooks/groups.ts
 create mode 100644 plugins/main/public/components/endpoints-summary/services/add-agent-to-group.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/services/get-groups.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/services/get-total-agents.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/services/index.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/services/remove-agent-from-group.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/services/remove-agent-from-groups.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/table/actions.tsx
 delete mode 100644 plugins/main/public/components/endpoints-summary/table/agents-table.js
 create mode 100644 plugins/main/public/components/endpoints-summary/table/agents-table.tsx
 create mode 100644 plugins/main/public/components/endpoints-summary/table/edit-groups-modal.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f67cd225da..ce55f82853 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added AngularJS dependencies [#6145](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6145)
 - Remove embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120)
 - Develop logic of a new index for the fim module [#6227](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6227)
+- Allow editing groups for an agent from Endpoints Summary [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250)
 
 ## Wazuh v4.8.1 - OpenSearch Dashboards 2.10.0 - Revision 00
 
diff --git a/plugins/main/public/components/common/permissions/button.tsx b/plugins/main/public/components/common/permissions/button.tsx
index 8bfa0b34c6..799f5539ae 100644
--- a/plugins/main/public/components/common/permissions/button.tsx
+++ b/plugins/main/public/components/common/permissions/button.tsx
@@ -10,9 +10,7 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { Fragment } from 'react';
-import { useUserPermissionsRequirements } from '../hooks/useUserPermissions';
-import { useUserRolesRequirements } from '../hooks/useUserRoles';
+import React from 'react';
 
 import {
   EuiSwitch,
@@ -20,73 +18,60 @@ import {
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiLink,
-  EuiToolTip,
-  EuiSpacer
 } from '@elastic/eui';
 
-import { WzPermissionsFormatted } from './format';
+import { IWzElementPermissionsProps, WzElementPermissions } from './element';
 
-export interface IUserPermissionsObject{action: string, resource: string};
-export type TUserPermissionsFunction = (props : any) => TUserPermissions;
-export type TUserPermissions = (string | IUserPermissionsObject)[] | null;
-export type TUserRoles = string[] | null;
-export type TUserRolesFunction = (props : any) => TUserRoles;
+interface IWzButtonPermissionsProps
+  extends Omit<
+    IWzElementPermissionsProps,
+    'children' | 'additionalPropsFunction'
+  > {
+  buttonType?: 'default' | 'empty' | 'icon' | 'link' | 'switch';
+  rest: any;
+}
 
-interface IWzButtonPermissionsProps{
-  permissions?: TUserPermissions | TUserPermissionsFunction
-  roles?: TUserRoles | TUserRolesFunction
-  buttonType?: 'default' | 'empty' | 'icon' | 'link' | 'switch'
-  tooltip?: any
-  rest?: any
-};
-
-export const WzButtonPermissions = ({permissions = null, roles = null, buttonType = 'default', tooltip, ...rest} : IWzButtonPermissionsProps) => {
-  const [userPermissionRequirements, userPermissions] = useUserPermissionsRequirements(typeof permissions === 'function' ? permissions(rest) : permissions);
-  const [userRolesRequirements, userRoles] = useUserRolesRequirements(typeof roles === 'function' ? roles(rest) : roles);
+export const WzButtonPermissions = ({
+  buttonType = 'default',
+  permissions,
+  roles,
+  tooltip,
+  ...rest
+}: IWzButtonPermissionsProps) => {
+  const Button =
+    buttonType === 'empty'
+      ? EuiButtonEmpty
+      : buttonType === 'icon'
+      ? EuiButtonIcon
+      : buttonType === 'link'
+      ? EuiLink
+      : buttonType === 'switch'
+      ? EuiSwitch
+      : EuiButton;
 
-  const Button = buttonType === 'default' ? EuiButton
-    : buttonType === 'empty' ? EuiButtonEmpty 
-    : buttonType === 'icon' ? EuiButtonIcon 
-    : buttonType === 'link' ? EuiLink 
-    : buttonType === 'switch' ? EuiSwitch 
-    : null
-  const disabled = Boolean(userRolesRequirements || userPermissionRequirements || rest.isDisabled || rest.disabled);
-  const disabledProp = !['link', 'switch'].includes(buttonType) ? { isDisabled: disabled } : { disabled };
-  const onClick = disabled || !rest.onClick ? undefined : rest.onClick;
-  const onChange = disabled || !rest.onChange ? undefined : rest.onChange;
-  const customProps = { ...rest, onChange, onClick };
+  return (
+    <WzElementPermissions
+      permissions={permissions}
+      roles={roles}
+      tooltip={tooltip}
+      getAdditionalProps={disabled => {
+        const additionalProps = {
+          ...(!['link', 'switch'].includes(buttonType)
+            ? { isDisabled: disabled }
+            : { disabled }),
+          onClick:
+            disabled || !rest.onClick || buttonType == 'switch'
+              ? undefined
+              : rest.onClick,
+          onChange: disabled || !rest.onChange ? undefined : rest.onChange,
+        };
 
-  if (buttonType == 'switch') delete customProps.onClick;
+        if (buttonType == 'switch') delete additionalProps.onClick;
 
-  const button = <Button {...customProps} {...disabledProp} />;
-  
-  const buttonTextRequirements = (userRolesRequirements || userPermissionRequirements) && (
-    <Fragment>
-      {userPermissionRequirements && (
-        <div>
-          <div>Require the {userPermissionRequirements.length === 1 ? 'permission' : 'permissions'}:</div>
-            {WzPermissionsFormatted(userPermissionRequirements)}
-        </div>
-      )}
-      {(userPermissionRequirements && userRolesRequirements) && <EuiSpacer size='s' />}
-      {userRolesRequirements && (
-        <div>
-          Require {userRolesRequirements.map(role => <strong key={`empty-prompt-no-roles-${role}`}>{role}</strong>).reduce((prev, cur) => [prev, ', ' , cur])} {userRolesRequirements.length > 1 ? 'roles': 'role'}
-        </div>
-      )}
-    </Fragment>
-  )
-  return (userRolesRequirements || userPermissionRequirements) ? 
-    (<EuiToolTip
-      {...tooltip}
-      content={buttonTextRequirements}
+        return additionalProps;
+      }}
     >
-      {button}
-    </EuiToolTip>) : tooltip && tooltip.content ? 
-    (<EuiToolTip
-      {...tooltip}
-    >
-      {button}
-    </EuiToolTip>)
-    : button
-}
\ No newline at end of file
+      <Button {...rest} />
+    </WzElementPermissions>
+  );
+};
diff --git a/plugins/main/public/components/common/permissions/element.tsx b/plugins/main/public/components/common/permissions/element.tsx
new file mode 100644
index 0000000000..216a9f7d44
--- /dev/null
+++ b/plugins/main/public/components/common/permissions/element.tsx
@@ -0,0 +1,109 @@
+/*
+ * Wazuh app - Button with Wazuh API permissions and/or roles required to be useful
+ * Copyright (C) 2015-2022 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, { Fragment } from 'react';
+import { useUserPermissionsRequirements } from '../hooks/useUserPermissions';
+import { useUserRolesRequirements } from '../hooks/useUserRoles';
+
+import { EuiToolTip, EuiSpacer } from '@elastic/eui';
+
+import { WzPermissionsFormatted } from './format';
+
+export interface IUserPermissionsObject {
+  action: string;
+  resource: string;
+}
+export type TUserPermissionsFunction = (props: any) => TUserPermissions;
+export type TUserPermissions = (string | IUserPermissionsObject)[] | null;
+export type TUserRoles = string[] | null;
+export type TUserRolesFunction = (props: any) => TUserRoles;
+
+export interface IWzElementPermissionsProps {
+  permissions?: TUserPermissions | TUserPermissionsFunction;
+  roles?: TUserRoles | TUserRolesFunction;
+  tooltip?: any;
+  children: React.ReactElement;
+  getAdditionalProps?: (disabled: boolean) => {
+    [prop: string]: any;
+  };
+}
+
+export const WzElementPermissions = ({
+  children,
+  permissions = null,
+  roles = null,
+  getAdditionalProps,
+  tooltip,
+  ...rest
+}: IWzElementPermissionsProps) => {
+  const [userPermissionRequirements] = useUserPermissionsRequirements(
+    typeof permissions === 'function' ? permissions(rest) : permissions,
+  );
+  const [userRolesRequirements] = useUserRolesRequirements(
+    typeof roles === 'function' ? roles(rest) : roles,
+  );
+
+  const isDisabledByRolesOrPermissions =
+    userRolesRequirements || userPermissionRequirements;
+
+  const disabled = Boolean(
+    isDisabledByRolesOrPermissions || rest?.isDisabled || rest?.disabled,
+  );
+
+  const additionalProps = getAdditionalProps
+    ? getAdditionalProps(disabled)
+    : {};
+
+  const childrenWithAdditionalProps = React.cloneElement(children, {
+    ...additionalProps,
+  });
+
+  const contentTextRequirements = isDisabledByRolesOrPermissions && (
+    <Fragment>
+      {userPermissionRequirements && (
+        <div>
+          <div>
+            Require the{' '}
+            {userPermissionRequirements.length === 1
+              ? 'permission'
+              : 'permissions'}
+            :
+          </div>
+          {WzPermissionsFormatted(userPermissionRequirements)}
+        </div>
+      )}
+      {userPermissionRequirements && userRolesRequirements && (
+        <EuiSpacer size='s' />
+      )}
+      {userRolesRequirements && (
+        <div>
+          Require{' '}
+          {userRolesRequirements
+            .map(role => (
+              <strong key={`empty-prompt-no-roles-${role}`}>{role}</strong>
+            ))
+            .reduce((prev, cur) => [prev, ', ', cur])}{' '}
+          {userRolesRequirements.length > 1 ? 'roles' : 'role'}
+        </div>
+      )}
+    </Fragment>
+  );
+  return isDisabledByRolesOrPermissions ? (
+    <EuiToolTip {...tooltip} content={contentTextRequirements}>
+      {childrenWithAdditionalProps}
+    </EuiToolTip>
+  ) : tooltip && tooltip.content ? (
+    <EuiToolTip {...tooltip}>{childrenWithAdditionalProps}</EuiToolTip>
+  ) : (
+    childrenWithAdditionalProps
+  );
+};
diff --git a/plugins/main/public/components/common/permissions/prompt.tsx b/plugins/main/public/components/common/permissions/prompt.tsx
index 83bed74da0..ae7817dd5a 100644
--- a/plugins/main/public/components/common/permissions/prompt.tsx
+++ b/plugins/main/public/components/common/permissions/prompt.tsx
@@ -18,7 +18,7 @@ import {
   TUserPermissionsFunction,
   TUserRoles,
   TUserRolesFunction,
-} from '../permissions/button';
+} from '../permissions/element';
 import { WzPermissionsFormatted } from './format';
 import { withErrorBoundary } from '../hocs/error-boundary/with-error-boundary';
 
diff --git a/plugins/main/public/components/common/util/agent-group-truncate/agent_group_truncate.tsx b/plugins/main/public/components/common/util/agent-group-truncate/agent_group_truncate.tsx
deleted file mode 100644
index 50af67a262..0000000000
--- a/plugins/main/public/components/common/util/agent-group-truncate/agent_group_truncate.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Wazuh app - React Component to cut text strings of several elements that exceed a certain number of length.
- *
- * Copyright (C) 2015-2022 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, { Fragment } from 'react';
-import {
-  EuiToolTip,
-  EuiLink
-} from '@elastic/eui';
-
-export class AgentGroupTruncate extends React.Component {
-  _isMount = false;
-  props!: {
-    [key: string]: any
-  }
-  state: {
-    groups: any
-  }
-  constructor(props) {
-    super(props);
-    this.state = {
-      groups: ''
-    }
-  }
-
-renderGroups(groups) {
-  const { length } = this.props;
-  let auxGroups: Array<String> = [];
-  let tooltipGroups: Array<String> = []
-  let auxLength = 0;
-  let auxIndex = 0;
-  if (groups.length >= 2 && groups.toString().length >= length) {
-    groups.map( (group, index) => {
-      auxLength = auxLength + group.length;
-      if (auxLength >= length ) {
-        tooltipGroups.push(`${group}${index === (groups.length-1) ? '' : ', '}`);
-        ++auxIndex;
-      } else {
-        auxGroups.push(`${group}${index === (groups.length-1) ? '' : ', '}`);
-      }
-    });
-  } else {
-    groups.map( (group, index) => {
-      auxGroups.push(`${group}${index === (groups.length-1) ? '' : ', '}`)
-    })
-  }
-    return (
-      <div style={{display: 'inline'}}>
-        {auxGroups}
-        {auxIndex > 0 && 
-          <EuiToolTip
-          key={auxIndex}
-          content={tooltipGroups}
-          >
-            <EuiLink style={{textDecoration: 'none'}}>
-              &nbsp;{`+${auxIndex} ${this.props.label}`}
-            </EuiLink>
-          </EuiToolTip>
-        }
-      </div>
-    );
-  }
-
-  render() {
-    const groups = this.renderGroups(this.props.groups)
-    return (
-    <Fragment>
-      {groups}
-    </Fragment>
-    )
-  }
-}
\ No newline at end of file
diff --git a/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx b/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
index 0b73f1080d..b208421573 100644
--- a/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
+++ b/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
@@ -30,9 +30,9 @@ export class GroupTruncate extends React.Component {
     popoverOpen: boolean;
   };
   props!: {
+    groups?: string[];
     label: String;
     length: number;
-    agent: Object;
     action: String;
     filterAction: any;
   };
@@ -100,10 +100,10 @@ export class GroupTruncate extends React.Component {
     );
   }
 
-  renderGroups(groups = []) {
+  renderGroups(groups: string[] = []) {
     const { length } = this.props;
-    let auxGroups: Array<String> = [];
-    let tooltipGroups: Array<String> = [];
+    let auxGroups: Array<React.ReactNode> = [];
+    let tooltipGroups: Array<React.ReactNode> = [];
     let auxLength = 0;
     let auxIndex = 0;
     if (groups.length >= 2 && groups.toString().length >= length) {
diff --git a/plugins/main/public/components/common/util/agent-group-truncate/index.ts b/plugins/main/public/components/common/util/agent-group-truncate/index.ts
index a80c9dcc70..38554c202c 100644
--- a/plugins/main/public/components/common/util/agent-group-truncate/index.ts
+++ b/plugins/main/public/components/common/util/agent-group-truncate/index.ts
@@ -1,2 +1 @@
-export { AgentGroupTruncate } from './agent_group_truncate';
-export { GroupTruncate } from './group-truncate';
\ No newline at end of file
+export { GroupTruncate } from './group-truncate';
diff --git a/plugins/main/public/components/common/util/index.ts b/plugins/main/public/components/common/util/index.ts
index 92b1216c0a..906515e7ec 100644
--- a/plugins/main/public/components/common/util/index.ts
+++ b/plugins/main/public/components/common/util/index.ts
@@ -11,8 +11,8 @@
  * Find more information about this on the LICENSE file.
  */
 
- export { AgentGroupTruncate, GroupTruncate} from './agent-group-truncate';
- export { TruncateHorizontalComponents } from './truncate-horizontal-components/truncate-horizontal-components';
- export { GroupingComponents } from './grouping-components';
- export * from './markdown/markdown';
- export * from './wz-overlay-mask-interface';
+export { GroupTruncate } from './agent-group-truncate';
+export { TruncateHorizontalComponents } from './truncate-horizontal-components/truncate-horizontal-components';
+export { GroupingComponents } from './grouping-components';
+export * from './markdown/markdown';
+export * from './wz-overlay-mask-interface';
diff --git a/plugins/main/public/components/common/welcome/agents-info.js b/plugins/main/public/components/common/welcome/agents-info.js
index dd49faecab..e43b3dd12c 100644
--- a/plugins/main/public/components/common/welcome/agents-info.js
+++ b/plugins/main/public/components/common/welcome/agents-info.js
@@ -118,7 +118,6 @@ export class AgentInfo extends Component {
                   length={40}
                   label={'more'}
                   action={'redirect'}
-                  agent={this.props.agent}
                   {...this.props}
                 />
               ) : item.description === 'Operating system' ? (
diff --git a/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx b/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx
index 28f6e36eb7..cf8adb3ff7 100644
--- a/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx
+++ b/plugins/main/public/components/endpoints-summary/endpoints-summary.tsx
@@ -54,6 +54,7 @@ import { endpointSumary, itHygiene } from '../../utils/applications';
 import { ShareAgent } from '../../factories/share-agent';
 import { getCore } from '../../kibana-services';
 import './endpoints-summary.scss';
+import { RedirectAppLinks } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 
 export const EndpointsSummary = compose(
   withErrorBoundary,
@@ -73,7 +74,7 @@ export const EndpointsSummary = compose(
       this.state = {
         loadingSummary: true,
         loadingLastRegisteredAgent: true,
-        agentTableFilters: [],
+        agentTableFilters: {},
         agentStatusSummary: [],
         agentsActiveCoverage: undefined,
       };
@@ -199,10 +200,6 @@ export const EndpointsSummary = compose(
       }
     }
 
-    removeFilters() {
-      this._isMount && this.setState({ agentTableFilters: {} });
-    }
-
     filterAgentByStatus(status) {
       this._isMount &&
         this.setState({
@@ -284,28 +281,33 @@ export const EndpointsSummary = compose(
                   <EuiFlexGroup className='mt-0'>
                     <EuiFlexItem className='agents-link-item'>
                       <EuiStat
+                        titleElement='div'
                         className='euiStatLink last-agents-link'
                         isLoading={this.state.loadingLastRegisteredAgent}
                         title={
-                          <EuiToolTip
-                            position='top'
-                            content='View agent details'
-                          >
-                            {this.state.lastRegisteredAgent?.id ? (
-                              <EuiLink
-                                href={getCore().application.getUrlForApp(
-                                  itHygiene.id,
-                                  {
-                                    path: `#/agents?tab=welcome&agent=${this.state.lastRegisteredAgent.id}`,
-                                  },
-                                )}
+                          this.state.lastRegisteredAgent?.id ? (
+                            <EuiToolTip
+                              position='top'
+                              content='View agent details'
+                            >
+                              <RedirectAppLinks
+                                application={getCore().application}
                               >
-                                {this.state.lastRegisteredAgent.name || '-'}
-                              </EuiLink>
-                            ) : (
-                              <EuiText>-</EuiText>
-                            )}
-                          </EuiToolTip>
+                                <EuiLink
+                                  href={getCore().application.getUrlForApp(
+                                    itHygiene.id,
+                                    {
+                                      path: `#/agents?tab=welcome&agent=${this.state.lastRegisteredAgent?.id}`,
+                                    },
+                                  )}
+                                >
+                                  {this.state.lastRegisteredAgent?.name}
+                                </EuiLink>
+                              </RedirectAppLinks>
+                            </EuiToolTip>
+                          ) : (
+                            <EuiText>-</EuiText>
+                          )
                         }
                         titleSize='s'
                         description='Last registered agent'
@@ -318,11 +320,7 @@ export const EndpointsSummary = compose(
             </EuiFlexGroup>
             <EuiSpacer size='m' />
             <WzReduxProvider>
-              <AgentsTable
-                filters={this.state.agentTableFilters}
-                removeFilters={() => this.removeFilters()}
-                formatUIDate={date => formatUIDate(date)}
-              />
+              <AgentsTable filters={this.state.agentTableFilters} />
             </WzReduxProvider>
           </EuiFlexItem>
         </EuiPage>
diff --git a/plugins/main/public/components/endpoints-summary/hooks/agents.ts b/plugins/main/public/components/endpoints-summary/hooks/agents.ts
new file mode 100644
index 0000000000..facb9df07b
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/hooks/agents.ts
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import { getTotalAgentsService } from '../services';
+
+export const useGetTotalAgents = () => {
+  const [totalAgents, setTotalAgents] = useState<number>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
+
+  const getTotalAgents = async () => {
+    try {
+      setIsLoading(true);
+      const totalAgents = await getTotalAgentsService();
+      setTotalAgents(totalAgents);
+      setError(undefined);
+    } catch (error: any) {
+      setError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getTotalAgents();
+  }, []);
+
+  return {
+    isLoading,
+    totalAgents,
+    error,
+  };
+};
diff --git a/plugins/main/public/components/endpoints-summary/hooks/endpoints.ts b/plugins/main/public/components/endpoints-summary/hooks/endpoints.ts
deleted file mode 100644
index 0a84de9291..0000000000
--- a/plugins/main/public/components/endpoints-summary/hooks/endpoints.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useState, useEffect } from 'react';
-import { WzRequest } from '../../../react-services/wz-request';
-
-export const useGetTotalEndpoints = () => {
-  const [totalEndpoints, setTotalEndpoints] = useState<number>();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState();
-
-  const getTotalEndpoints = async () => {
-    try {
-      setIsLoading(true);
-      const {
-        data: {
-          data: { total_affected_items },
-        },
-      } = await WzRequest.apiReq('GET', '/agents', {
-        params: { limit: 1, q: 'id!=000' },
-      });
-      setTotalEndpoints(total_affected_items);
-      setError(undefined);
-    } catch (error: any) {
-      setError(error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getTotalEndpoints();
-  }, []);
-
-  return {
-    isLoading,
-    totalEndpoints,
-    error,
-  };
-};
diff --git a/plugins/main/public/components/endpoints-summary/hooks/groups.ts b/plugins/main/public/components/endpoints-summary/hooks/groups.ts
new file mode 100644
index 0000000000..8c83e9dec3
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/hooks/groups.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { getGroupsService } from '../services';
+
+export const useGetGroups = () => {
+  const [groups, setGroups] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
+
+  const getGroups = async () => {
+    try {
+      setIsLoading(true);
+      const { affected_items } = await getGroupsService();
+      const groups = affected_items.map(item => item.name);
+      setGroups(groups);
+      setError(undefined);
+    } catch (error: any) {
+      setError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getGroups();
+  }, []);
+
+  return {
+    isLoading,
+    groups,
+    error,
+  };
+};
diff --git a/plugins/main/public/components/endpoints-summary/hooks/index.ts b/plugins/main/public/components/endpoints-summary/hooks/index.ts
index c63b479ae4..e1fdae97a1 100644
--- a/plugins/main/public/components/endpoints-summary/hooks/index.ts
+++ b/plugins/main/public/components/endpoints-summary/hooks/index.ts
@@ -1 +1 @@
-export { useGetTotalEndpoints } from './endpoints';
+export { useGetTotalAgents } from './agents';
diff --git a/plugins/main/public/components/endpoints-summary/index.tsx b/plugins/main/public/components/endpoints-summary/index.tsx
index 045ff0a14c..fe25b7dd95 100644
--- a/plugins/main/public/components/endpoints-summary/index.tsx
+++ b/plugins/main/public/components/endpoints-summary/index.tsx
@@ -6,7 +6,6 @@ import {
   EuiProgress,
 } from '@elastic/eui';
 import { EndpointsSummary } from './endpoints-summary';
-import { WzRequest } from '../../react-services/wz-request';
 import { endpointSumary } from '../../utils/applications';
 import {
   withErrorBoundary,
@@ -19,23 +18,23 @@ import { getCore } from '../../kibana-services';
 import { UI_LOGGER_LEVELS } from '../../../common/constants';
 import { UI_ERROR_SEVERITIES } from '../../react-services/error-orchestrator/types';
 import { getErrorOrchestrator } from '../../react-services/common-services';
-import { useGetTotalEndpoints } from './hooks';
+import { useGetTotalAgents } from './hooks';
 
 export const MainEndpointsSummary = compose(
   withErrorBoundary,
   withReduxProvider,
   withGlobalBreadcrumb([{ text: endpointSumary.title }]),
 )(() => {
-  const { isLoading, totalEndpoints, error } = useGetTotalEndpoints();
+  const { isLoading, totalAgents, error } = useGetTotalAgents();
 
   if (error) {
     const options = {
-      context: `MainEndpointsSummary.getTotalEndpoints`,
+      context: `MainEndpointsSummary.getTotalAgents`,
       level: UI_LOGGER_LEVELS.ERROR,
       severity: UI_ERROR_SEVERITIES.CRITICAL,
       store: true,
       error: {
-        error: error,
+        error,
         message: error.message || error,
         title: `Could not get agents summary`,
       },
@@ -53,7 +52,7 @@ export const MainEndpointsSummary = compose(
     );
   }
 
-  if (totalEndpoints === 0) {
+  if (totalAgents === 0) {
     return (
       <EuiEmptyPrompt
         iconType='watchesApp'
diff --git a/plugins/main/public/components/endpoints-summary/services/add-agent-to-group.tsx b/plugins/main/public/components/endpoints-summary/services/add-agent-to-group.tsx
new file mode 100644
index 0000000000..d32a186f14
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/services/add-agent-to-group.tsx
@@ -0,0 +1,4 @@
+import { WzRequest } from '../../../react-services/wz-request';
+
+export const addAgentToGroupService = async (agentId: string, group: string) =>
+  await WzRequest.apiReq('PUT', `/agents/${agentId}/group/${group}`, {});
diff --git a/plugins/main/public/components/endpoints-summary/services/get-groups.tsx b/plugins/main/public/components/endpoints-summary/services/get-groups.tsx
new file mode 100644
index 0000000000..1b463c163d
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/services/get-groups.tsx
@@ -0,0 +1,8 @@
+import { WzRequest } from '../../../react-services/wz-request';
+
+export const getGroupsService = async () => {
+  const {
+    data: { data },
+  } = await WzRequest.apiReq('GET', '/groups', {});
+  return data;
+};
diff --git a/plugins/main/public/components/endpoints-summary/services/get-total-agents.tsx b/plugins/main/public/components/endpoints-summary/services/get-total-agents.tsx
new file mode 100644
index 0000000000..b75c59725e
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/services/get-total-agents.tsx
@@ -0,0 +1,12 @@
+import { WzRequest } from '../../../react-services/wz-request';
+
+export const getTotalAgentsService = async () => {
+  const {
+    data: {
+      data: { total_affected_items },
+    },
+  } = await WzRequest.apiReq('GET', '/agents', {
+    params: { limit: 1, q: 'id!=000' },
+  });
+  return total_affected_items;
+};
diff --git a/plugins/main/public/components/endpoints-summary/services/index.tsx b/plugins/main/public/components/endpoints-summary/services/index.tsx
new file mode 100644
index 0000000000..6615483443
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/services/index.tsx
@@ -0,0 +1,5 @@
+export { getTotalAgentsService } from './get-total-agents';
+export { removeAgentFromGroupService } from './remove-agent-from-group';
+export { removeAgentFromGroupsService } from './remove-agent-from-groups';
+export { addAgentToGroupService } from './add-agent-to-group';
+export { getGroupsService } from './get-groups';
diff --git a/plugins/main/public/components/endpoints-summary/services/remove-agent-from-group.tsx b/plugins/main/public/components/endpoints-summary/services/remove-agent-from-group.tsx
new file mode 100644
index 0000000000..633d49fe41
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/services/remove-agent-from-group.tsx
@@ -0,0 +1,6 @@
+import { WzRequest } from '../../../react-services/wz-request';
+
+export const removeAgentFromGroupService = async (
+  agentId: string,
+  group: string,
+) => await WzRequest.apiReq('DELETE', `/agents/${agentId}/group/${group}`, {});
diff --git a/plugins/main/public/components/endpoints-summary/services/remove-agent-from-groups.tsx b/plugins/main/public/components/endpoints-summary/services/remove-agent-from-groups.tsx
new file mode 100644
index 0000000000..2784d026aa
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/services/remove-agent-from-groups.tsx
@@ -0,0 +1,11 @@
+import { WzRequest } from '../../../react-services/wz-request';
+
+export const removeAgentFromGroupsService = async (
+  agentId: string,
+  groups: string[],
+) =>
+  await WzRequest.apiReq('DELETE', `/agents/${agentId}/group`, {
+    params: {
+      groups_list: groups.join(','),
+    },
+  });
diff --git a/plugins/main/public/components/endpoints-summary/table/__snapshots__/agents-table.test.tsx.snap b/plugins/main/public/components/endpoints-summary/table/__snapshots__/agents-table.test.tsx.snap
index 4465bb6899..6f3a290170 100644
--- a/plugins/main/public/components/endpoints-summary/table/__snapshots__/agents-table.test.tsx.snap
+++ b/plugins/main/public/components/endpoints-summary/table/__snapshots__/agents-table.test.tsx.snap
@@ -477,10 +477,8 @@ exports[`AgentsTable component Renders correctly to match the snapshot 1`] = `
                   </th>
                   <th
                     class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_actions_8"
                     role="columnheader"
                     scope="col"
-                    style="width:5%"
                   >
                     <span
                       class="euiTableCellContent euiTableCellContent--alignRight"
@@ -982,10 +980,8 @@ exports[`AgentsTable component Renders correctly to match the snapshot with cust
                   </th>
                   <th
                     class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_actions_6"
                     role="columnheader"
                     scope="col"
-                    style="width:5%"
                   >
                     <span
                       class="euiTableCellContent euiTableCellContent--alignRight"
@@ -1535,10 +1531,8 @@ exports[`AgentsTable component Renders correctly to match the snapshot with no p
                   </th>
                   <th
                     class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_actions_8"
                     role="columnheader"
                     scope="col"
-                    style="width:5%"
                   >
                     <span
                       class="euiTableCellContent euiTableCellContent--alignRight"
diff --git a/plugins/main/public/components/endpoints-summary/table/actions.tsx b/plugins/main/public/components/endpoints-summary/table/actions.tsx
new file mode 100644
index 0000000000..dbf03a0b54
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/table/actions.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { EuiToolTip } from '@elastic/eui';
+import { API_NAME_AGENT_STATUS } from '../../../../common/constants';
+import { getCore } from '../../../kibana-services';
+import { itHygiene } from '../../../utils/applications';
+import { WzElementPermissions } from '../../common/permissions/element';
+
+export const agentsTableActions = (
+  allowEditGroups: boolean,
+  setAgent: (agent) => void,
+  setIsEditGroupsVisible: (visible: boolean) => void,
+) => [
+  {
+    name: agent => {
+      const name = 'View agent details';
+
+      if (agent.status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED) {
+        return name;
+      }
+
+      return (
+        <EuiToolTip content='Since the agent never connected, it is not possible to access its details'>
+          <span>{name}</span>
+        </EuiToolTip>
+      );
+    },
+    description: 'View agent details',
+    icon: 'eye',
+    type: 'icon',
+    isPrimary: true,
+    enabled: agent => agent.status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED,
+    onClick: agent =>
+      getCore().application.navigateToApp(itHygiene.id, {
+        path: `#/agents?tab=welcome&agent=${agent.id}`,
+      }),
+  },
+  {
+    name: agent => {
+      const name = 'Agent configuration';
+
+      if (agent.status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED) {
+        return name;
+      }
+
+      return (
+        <EuiToolTip content='Since the agent never connected, it is not possible to access its configuration'>
+          <span>{name}</span>
+        </EuiToolTip>
+      );
+    },
+    description: 'Agent configuration',
+    icon: 'wrench',
+    type: 'icon',
+    onClick: agent =>
+      getCore().application.navigateToApp(itHygiene.id, {
+        path: `#/agents?tab=configuration&agent=${agent.id}`,
+      }),
+    enabled: agent => agent.status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED,
+    'data-test-subj': 'action-configuration',
+  },
+  {
+    name: (
+      <WzElementPermissions
+        permissions={[
+          { action: 'group:modify_assignments', resource: 'group:id:*' },
+        ]}
+      >
+        <span>Edit groups</span>
+      </WzElementPermissions>
+    ),
+    description: 'Edit groups',
+    icon: 'pencil',
+    type: 'icon',
+    onClick: agent => {
+      setAgent(agent);
+      setIsEditGroupsVisible(true);
+    },
+    'data-test-subj': 'action-groups',
+    enabled: () => !allowEditGroups,
+  },
+];
diff --git a/plugins/main/public/components/endpoints-summary/table/agents-table.js b/plugins/main/public/components/endpoints-summary/table/agents-table.js
deleted file mode 100644
index 8d0d51fbca..0000000000
--- a/plugins/main/public/components/endpoints-summary/table/agents-table.js
+++ /dev/null
@@ -1,523 +0,0 @@
-/*
- * Wazuh app - React component for building the agents table.
- *
- * Copyright (C) 2015-2022 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, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  EuiButton,
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  EuiToolTip,
-  EuiIconTip,
-} from '@elastic/eui';
-import { GroupTruncate } from '../../common/util';
-import { WzButtonPermissions } from '../../common/permissions/button';
-import { formatUIDate } from '../../../react-services/time-service';
-import { withErrorBoundary } from '../../common/hocs';
-import {
-  API_NAME_AGENT_STATUS,
-  UI_ORDER_AGENT_STATUS,
-  AGENT_SYNCED_STATUS,
-  SEARCH_BAR_WQL_VALUE_SUGGESTIONS_COUNT,
-} from '../../../../common/constants';
-import { AgentStatus } from '../../agents/agent-status';
-import { AgentSynced } from '../../agents/agent-synced';
-import { TableWzAPI } from '../../common/tables';
-import { WzRequest } from '../../../react-services/wz-request';
-import { get as getLodash } from 'lodash';
-import { getCore } from '../../../kibana-services';
-import { itHygiene, endpointSumary } from '../../../utils/applications';
-import { RedirectAppLinks } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { updateCurrentAgentData } from '../../../redux/actions/appStateActions';
-const searchBarWQLOptions = {
-  implicitQuery: {
-    query: 'id!=000',
-    conjunction: ';',
-  },
-};
-const mapDispatchToProps = dispatch => ({
-  updateCurrentAgentData: data => dispatch(updateCurrentAgentData(data)),
-});
-export const AgentsTable = compose(
-  withErrorBoundary,
-  connect(null, mapDispatchToProps),
-)(
-  class AgentsTable extends Component {
-    _isMount = false;
-    constructor(props) {
-      super(props);
-      this.state = {
-        filters: {
-          default: { q: 'id!=000' },
-          ...(sessionStorage.getItem('wz-agents-overview-table-filter')
-            ? JSON.parse(
-                sessionStorage.getItem('wz-agents-overview-table-filter'),
-              )
-            : {}),
-        },
-        reloadTable: 0,
-      };
-    }
-
-    async componentDidMount() {
-      this._isMount = true;
-    }
-
-    componentWillUnmount() {
-      this._isMount = false;
-      if (sessionStorage.getItem('wz-agents-overview-table-filter')) {
-        sessionStorage.removeItem('wz-agents-overview-table-filter');
-      }
-    }
-
-    async componentDidUpdate(prevProps) {
-      if (
-        // TODO: external filters
-        !_.isEqual(prevProps.filters, this.props.filters)
-      ) {
-        this.setState({ filters: this.props.filters });
-      }
-    }
-
-    actionButtonsRender(agent) {
-      return (
-        <div className={'icon-box-action'}>
-          <RedirectAppLinks application={getCore().application}>
-            <EuiToolTip
-              content='Open summary panel for this agent'
-              position='left'
-            >
-              <EuiButtonIcon
-                href={getCore().application.getUrlForApp(itHygiene.id, {
-                  path: `#/agents?tab=welcome&agent=${agent.id}`,
-                })}
-                iconType='eye'
-                color={'primary'}
-                aria-label='Open summary panel for this agent'
-              />
-            </EuiToolTip>
-          </RedirectAppLinks>
-          &nbsp;
-          {agent.status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED && (
-            <RedirectAppLinks application={getCore().application}>
-              <EuiToolTip
-                content='Open configuration for this agent'
-                position='left'
-              >
-                <EuiButtonIcon
-                  href={getCore().application.getUrlForApp(itHygiene.id, {
-                    path: `#/agents?tab=configuration&agent=${agent.id}`,
-                  })}
-                  color={'primary'}
-                  iconType='wrench'
-                  aria-label='Open configuration for this agent'
-                />
-              </EuiToolTip>
-            </RedirectAppLinks>
-          )}
-        </div>
-      );
-    }
-
-    addIconPlatformRender(agent) {
-      let icon = '';
-      const os = agent?.os || {};
-
-      if ((os?.uname || '').includes('Linux')) {
-        icon = 'linux';
-      } else if (os?.platform === 'windows') {
-        icon = 'windows';
-      } else if (os?.platform === 'darwin') {
-        icon = 'apple';
-      }
-      const os_name = `${agent?.os?.name || ''} ${agent?.os?.version || ''}`;
-
-      return (
-        <EuiFlexGroup gutterSize='xs'>
-          <EuiFlexItem grow={false}>
-            <i
-              className={`fa fa-${icon} AgentsTable__soBadge AgentsTable__soBadge--${icon}`}
-              aria-hidden='true'
-            ></i>
-          </EuiFlexItem>{' '}
-          <EuiFlexItem>{os_name.trim() || '-'}</EuiFlexItem>
-        </EuiFlexGroup>
-      );
-    }
-
-    // Columns with the property truncateText: true won't wrap the text
-    // This is added to prevent the wrap because of the table-layout: auto
-    defaultColumns = [
-      {
-        field: 'id',
-        name: 'ID',
-        sortable: true,
-        show: true,
-        searchable: true,
-      },
-      {
-        field: 'name',
-        name: 'Name',
-        sortable: true,
-        show: true,
-        searchable: true,
-      },
-      {
-        field: 'ip',
-        name: 'IP address',
-        sortable: true,
-        show: true,
-        searchable: true,
-      },
-      {
-        field: 'group',
-        name: 'Group(s)',
-        sortable: true,
-        show: true,
-        render: groups => (groups !== '-' ? this.renderGroups(groups) : '-'),
-        searchable: true,
-      },
-      {
-        field: 'os.name,os.version',
-        composeField: ['os.name', 'os.version'],
-        name: 'Operating system',
-        sortable: true,
-        show: true,
-        render: (field, agentData) => this.addIconPlatformRender(agentData),
-        searchable: true,
-      },
-      {
-        field: 'node_name',
-        name: 'Cluster node',
-        sortable: true,
-        show: true,
-        searchable: true,
-      },
-      {
-        field: 'version',
-        name: 'Version',
-        sortable: true,
-        show: true,
-        searchable: true,
-      },
-      {
-        field: 'dateAdd',
-        name: (
-          <span>
-            Registration date{' '}
-            <EuiIconTip
-              content='This is not searchable through a search term.'
-              size='s'
-              color='subdued'
-              type='alert'
-            />
-          </span>
-        ),
-        render: dateAdd => formatUIDate(dateAdd),
-        sortable: true,
-        show: false,
-        searchable: false,
-      },
-      {
-        field: 'lastKeepAlive',
-        name: (
-          <span>
-            Last keep alive{' '}
-            <EuiIconTip
-              content='This is not searchable through a search term.'
-              size='s'
-              color='subdued'
-              type='alert'
-            />
-          </span>
-        ),
-        render: lastKeepAlive => formatUIDate(lastKeepAlive),
-        sortable: true,
-        show: false,
-        searchable: false,
-      },
-      {
-        field: 'status',
-        name: 'Status',
-        truncateText: true,
-        sortable: true,
-        show: true,
-        render: (status, agent) => (
-          <AgentStatus status={status} agent={agent} />
-        ),
-      },
-      {
-        field: 'group_config_status',
-        name: 'Synced',
-        sortable: true,
-        show: false,
-        render: synced => <AgentSynced synced={synced} />,
-        searchable: true,
-      },
-      {
-        align: 'right',
-        width: '5%',
-        field: 'actions',
-        name: 'Actions',
-        show: true,
-        render: (field, agentData) => this.actionButtonsRender(agentData),
-        searchable: false,
-      },
-    ];
-
-    tableRender() {
-      const getRowProps = item => {
-        const { id } = item;
-        return {
-          'data-test-subj': `row-${id}`,
-          className: 'customRowClass',
-          onClick: () => {},
-        };
-      };
-
-      const getCellProps = (item, column) => {
-        if (column.field == 'actions') {
-          return;
-        }
-        return {
-          onClick: ev => {
-            this.props.updateCurrentAgentData(item);
-            getCore().application.navigateToApp(itHygiene.id, {
-              path: `#/agents?tab=welcome&agent=${item.id}`,
-            });
-          },
-        };
-      };
-
-      // The EuiBasicTable tableLayout is set to "auto" to improve the use of empty space in the component.
-      // Previously the tableLayout is set to "fixed" with percentage width for each column, but the use of space was not optimal.
-      // Important: If all the columns have the truncateText property set to true, the table cannot adjust properly when the viewport size is small.
-      return (
-        <EuiFlexGroup className='wz-overflow-auto'>
-          <EuiFlexItem>
-            <TableWzAPI
-              title='Agents'
-              actionButtons={[
-                <WzButtonPermissions
-                  buttonType='empty'
-                  permissions={[{ action: 'agent:create', resource: '*:*:*' }]}
-                  iconType='plusInCircle'
-                  href={getCore().application.getUrlForApp(endpointSumary.id, {
-                    path: `#${endpointSumary.redirectTo()}deploy`,
-                  })}
-                >
-                  Deploy new agent
-                </WzButtonPermissions>,
-              ]}
-              endpoint='/agents'
-              tableColumns={this.defaultColumns}
-              tableInitialSortingField='id'
-              tablePageSizeOptions={[10, 25, 50, 100]}
-              reload={this.state.reloadTable}
-              mapResponseItem={item => {
-                return {
-                  ...item,
-                  ...(item.ip ? { ip: item.ip } : { ip: '-' }),
-                  ...(item.node_name !== 'unknown'
-                    ? { node_name: item.node_name }
-                    : { node_name: '-' }),
-                  /*
-                  The agent version contains the Wazuh word, this gets the string starting with
-                  v<NUMBER><ANYTHING>
-                  */
-                  ...(typeof item.version === 'string'
-                    ? { version: item.version.match(/(v\d.+)/)?.[1] }
-                    : { version: '-' }),
-                };
-              }}
-              rowProps={getRowProps}
-              filters={this.state.filters}
-              downloadCsv
-              showReload
-              showFieldSelector
-              searchTable
-              searchBarWQL={{
-                options: searchBarWQLOptions,
-                suggestions: {
-                  field(currentValue) {
-                    return [
-                      {
-                        label: 'dateAdd',
-                        description: 'filter by registration date',
-                      },
-                      { label: 'id', description: 'filter by id' },
-                      { label: 'ip', description: 'filter by IP address' },
-                      { label: 'group', description: 'filter by group' },
-                      {
-                        label: 'group_config_status',
-                        description: 'filter by group configuration status',
-                      },
-                      {
-                        label: 'lastKeepAlive',
-                        description: 'filter by last keep alive',
-                      },
-                      { label: 'manager', description: 'filter by manager' },
-                      { label: 'name', description: 'filter by name' },
-                      {
-                        label: 'node_name',
-                        description: 'filter by cluster name',
-                      },
-                      {
-                        label: 'os.name',
-                        description: 'filter by operating system name',
-                      },
-                      {
-                        label: 'os.platform',
-                        description: 'filter by operating platform',
-                      },
-                      {
-                        label: 'os.version',
-                        description: 'filter by operating system version',
-                      },
-                      { label: 'status', description: 'filter by status' },
-                      { label: 'version', description: 'filter by version' },
-                    ];
-                  },
-                  value: async (currentValue, { field }) => {
-                    try {
-                      switch (field) {
-                        case 'status':
-                          return UI_ORDER_AGENT_STATUS.map(status => ({
-                            label: status,
-                          }));
-                        case 'group_config_status':
-                          return [
-                            AGENT_SYNCED_STATUS.SYNCED,
-                            AGENT_SYNCED_STATUS.NOT_SYNCED,
-                          ].map(label => ({
-                            label,
-                          }));
-                        default: {
-                          const response = await WzRequest.apiReq(
-                            'GET',
-                            '/agents',
-                            {
-                              params: {
-                                distinct: true,
-                                limit: SEARCH_BAR_WQL_VALUE_SUGGESTIONS_COUNT,
-                                select: field,
-                                sort: `+${field}`,
-                                ...(currentValue
-                                  ? {
-                                      q: `${searchBarWQLOptions.implicitQuery.query}${searchBarWQLOptions.implicitQuery.conjunction}${field}~${currentValue}`,
-                                    }
-                                  : {
-                                      q: `${searchBarWQLOptions.implicitQuery.query}`,
-                                    }),
-                              },
-                            },
-                          );
-                          if (field === 'group') {
-                            /* the group field is returned as an string[],
-                            example: ['group1', 'group2']
-
-                            Due the API request done to get the distinct values for the groups is
-                            not returning the exepected values, as workaround, the values are
-                            extracted in the frontend using the returned results.
-
-                            This API request to get the distint values of groups doesn't
-                            return the unique values for the groups, else the unique combination
-                            of groups.
-                            */
-                            return response?.data?.data.affected_items
-                              .map(item => getLodash(item, field))
-                              .flat()
-                              .filter(
-                                (item, index, array) =>
-                                  array.indexOf(item) === index,
-                              )
-                              .sort()
-                              .map(group => ({ label: group }));
-                          }
-                          return response?.data?.data.affected_items.map(
-                            item => ({
-                              label: getLodash(item, field),
-                            }),
-                          );
-                        }
-                      }
-                    } catch (error) {
-                      return [];
-                    }
-                  },
-                },
-                validate: {
-                  value: ({ formattedValue, value: rawValue }, { field }) => {
-                    const value = formattedValue ?? rawValue;
-                    if (value) {
-                      if (['dateAdd', 'lastKeepAlive'].includes(field)) {
-                        return /^\d{4}-\d{2}-\d{2}([ T]\d{2}:\d{2}:\d{2}(.\d{1,6})?Z?)?$/.test(
-                          value,
-                        )
-                          ? undefined
-                          : `"${value}" is not a expected format. Valid formats: YYYY-MM-DD, YYYY-MM-DD HH:mm:ss, YYYY-MM-DDTHH:mm:ss, YYYY-MM-DDTHH:mm:ssZ.`;
-                      }
-                    }
-                  },
-                },
-              }}
-              saveStateStorage={{
-                system: 'localStorage',
-                key: 'wz-agents-overview-table',
-              }}
-              tableProps={{
-                tableLayout: 'auto',
-                cellProps: getCellProps,
-              }}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      );
-    }
-
-    filterGroupBadge = group => {
-      this.setState({
-        filters: {
-          default: { q: 'id!=000' },
-          q: `id!=000;group=${group}`,
-        },
-      });
-    };
-
-    renderGroups(groups) {
-      return Array.isArray(groups) ? (
-        <GroupTruncate
-          groups={groups}
-          length={25}
-          label={'more'}
-          action={'filter'}
-          filterAction={this.filterGroupBadge}
-          {...this.props}
-        />
-      ) : undefined;
-    }
-    render() {
-      const table = this.tableRender();
-
-      return (
-        <div>
-          <EuiPanel paddingSize='m'>{table}</EuiPanel>
-        </div>
-      );
-    }
-  },
-);
diff --git a/plugins/main/public/components/endpoints-summary/table/agents-table.tsx b/plugins/main/public/components/endpoints-summary/table/agents-table.tsx
new file mode 100644
index 0000000000..2a724140a8
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/table/agents-table.tsx
@@ -0,0 +1,484 @@
+/*
+ * Wazuh app - React component for building the agents table.
+ *
+ * Copyright (C) 2015-2022 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, { useState, useEffect } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiIconTip } from '@elastic/eui';
+import { GroupTruncate } from '../../common/util';
+import { WzButtonPermissions } from '../../common/permissions/button';
+import { formatUIDate } from '../../../react-services/time-service';
+import { withErrorBoundary } from '../../common/hocs';
+import {
+  UI_ORDER_AGENT_STATUS,
+  AGENT_SYNCED_STATUS,
+  SEARCH_BAR_WQL_VALUE_SUGGESTIONS_COUNT,
+} from '../../../../common/constants';
+import { AgentStatus } from '../../agents/agent-status';
+import { AgentSynced } from '../../agents/agent-synced';
+import { TableWzAPI } from '../../common/tables';
+import { WzRequest } from '../../../react-services/wz-request';
+import { get as getLodash } from 'lodash';
+import { getCore } from '../../../kibana-services';
+import { itHygiene, endpointSumary } from '../../../utils/applications';
+import { EditAgentGroupsModal } from './edit-groups-modal';
+import { useUserPermissionsRequirements } from '../../common/hooks/useUserPermissions';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { updateCurrentAgentData } from '../../../redux/actions/appStateActions';
+import { agentsTableActions } from './actions';
+
+const searchBarWQLOptions = {
+  implicitQuery: {
+    query: 'id!=000',
+    conjunction: ';',
+  },
+};
+
+const mapDispatchToProps = dispatch => ({
+  updateCurrentAgentData: data => dispatch(updateCurrentAgentData(data)),
+});
+
+interface AgentsTableProps {
+  filters: any;
+  updateCurrentAgentData: (agent) => void;
+}
+
+export const AgentsTable = compose(
+  withErrorBoundary,
+  connect(null, mapDispatchToProps),
+)((props: AgentsTableProps) => {
+  const defaultFilters = {
+    default: { q: 'id!=000' },
+    ...(sessionStorage.getItem('wz-agents-overview-table-filter')
+      ? JSON.parse(sessionStorage.getItem('wz-agents-overview-table-filter'))
+      : {}),
+  };
+  const [filters, setFilters] = useState(defaultFilters);
+  const [reloadTable, setReloadTable] = useState(0);
+  const [agent, setAgent] = useState();
+  const [isEditGroupsVisible, setIsEditGroupsVisible] = useState(false);
+
+  const [userPermissionRequirements] = useUserPermissionsRequirements([
+    { action: 'group:modify_assignments', resource: 'group:id:*' },
+  ]);
+
+  useEffect(() => {
+    if (props.filters && Object.keys(props.filters).length) {
+      setFilters(props.filters);
+    }
+  }, [props.filters]);
+
+  useEffect(() => {
+    //Unmount component
+    return () => {
+      if (sessionStorage.getItem('wz-agents-overview-table-filter')) {
+        sessionStorage.removeItem('wz-agents-overview-table-filter');
+      }
+    };
+  }, []);
+
+  const reloadAgents = async () => {
+    await setReloadTable(Date.now());
+  };
+
+  const addIconPlatformRender = agent => {
+    let icon = '';
+    const os = agent?.os || {};
+
+    if ((os?.uname || '').includes('Linux')) {
+      icon = 'linux';
+    } else if (os?.platform === 'windows') {
+      icon = 'windows';
+    } else if (os?.platform === 'darwin') {
+      icon = 'apple';
+    }
+    const os_name = `${agent?.os?.name || ''} ${agent?.os?.version || ''}`;
+
+    return (
+      <EuiFlexGroup gutterSize='xs'>
+        <EuiFlexItem grow={false}>
+          <i
+            className={`fa fa-${icon} AgentsTable__soBadge AgentsTable__soBadge--${icon}`}
+            aria-hidden='true'
+          ></i>
+        </EuiFlexItem>{' '}
+        <EuiFlexItem>{os_name.trim() || '-'}</EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  // Columns with the property truncateText: true won't wrap the text
+  // This is added to prevent the wrap because of the table-layout: auto
+  const defaultColumns = [
+    {
+      field: 'id',
+      name: 'ID',
+      sortable: true,
+      show: true,
+      searchable: true,
+    },
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+      show: true,
+      searchable: true,
+    },
+    {
+      field: 'ip',
+      name: 'IP address',
+      sortable: true,
+      show: true,
+      searchable: true,
+    },
+    {
+      field: 'group',
+      name: 'Group(s)',
+      sortable: true,
+      show: true,
+      render: groups => renderGroups(groups),
+      searchable: true,
+    },
+    {
+      field: 'os.name,os.version',
+      composeField: ['os.name', 'os.version'],
+      name: 'Operating system',
+      sortable: true,
+      show: true,
+      render: (field, agentData) => addIconPlatformRender(agentData),
+      searchable: true,
+    },
+    {
+      field: 'node_name',
+      name: 'Cluster node',
+      sortable: true,
+      show: true,
+      searchable: true,
+    },
+    {
+      field: 'version',
+      name: 'Version',
+      sortable: true,
+      show: true,
+      searchable: true,
+    },
+    {
+      field: 'dateAdd',
+      name: (
+        <span>
+          Registration date{' '}
+          <EuiIconTip
+            content='This is not searchable through a search term.'
+            size='s'
+            color='subdued'
+            type='alert'
+          />
+        </span>
+      ),
+      render: dateAdd => formatUIDate(dateAdd),
+      sortable: true,
+      show: false,
+      searchable: false,
+    },
+    {
+      field: 'lastKeepAlive',
+      name: (
+        <span>
+          Last keep alive{' '}
+          <EuiIconTip
+            content='This is not searchable through a search term.'
+            size='s'
+            color='subdued'
+            type='alert'
+          />
+        </span>
+      ),
+      render: lastKeepAlive => formatUIDate(lastKeepAlive),
+      sortable: true,
+      show: false,
+      searchable: false,
+    },
+    {
+      field: 'status',
+      name: 'Status',
+      truncateText: true,
+      sortable: true,
+      show: true,
+      render: (status, agent) => <AgentStatus status={status} agent={agent} />,
+    },
+    {
+      field: 'group_config_status',
+      name: 'Synced',
+      sortable: true,
+      show: false,
+      render: synced => <AgentSynced synced={synced} />,
+      searchable: true,
+    },
+    {
+      field: 'actions',
+      name: 'Actions',
+      show: true,
+      actions: agentsTableActions(
+        userPermissionRequirements,
+        setAgent,
+        setIsEditGroupsVisible,
+      ),
+    },
+  ];
+
+  const tableRender = () => {
+    const getRowProps = item => {
+      const { id } = item;
+      return {
+        'data-test-subj': `row-${id}`,
+        className: 'customRowClass',
+        onClick: () => {},
+      };
+    };
+
+    const getCellProps = (item, column) => {
+      if (column.field == 'actions') {
+        return;
+      }
+      return {
+        onClick: ev => {
+          props.updateCurrentAgentData(item);
+          getCore().application.navigateToApp(itHygiene.id, {
+            path: `#/agents?tab=welcome&agent=${item.id}`,
+          });
+        },
+      };
+    };
+
+    // The EuiBasicTable tableLayout is set to "auto" to improve the use of empty space in the component.
+    // Previously the tableLayout is set to "fixed" with percentage width for each column, but the use of space was not optimal.
+    // Important: If all the columns have the truncateText property set to true, the table cannot adjust properly when the viewport size is small.
+    return (
+      <EuiFlexGroup className='wz-overflow-auto'>
+        <EuiFlexItem>
+          <TableWzAPI
+            title='Agents'
+            actionButtons={[
+              <WzButtonPermissions
+                buttonType='empty'
+                permissions={[{ action: 'agent:create', resource: '*:*:*' }]}
+                iconType='plusInCircle'
+                href={getCore().application.getUrlForApp(endpointSumary.id, {
+                  path: `#${endpointSumary.redirectTo()}deploy`,
+                })}
+              >
+                Deploy new agent
+              </WzButtonPermissions>,
+            ]}
+            endpoint='/agents'
+            tableColumns={defaultColumns}
+            tableInitialSortingField='id'
+            tablePageSizeOptions={[10, 25, 50, 100]}
+            reload={reloadTable}
+            mapResponseItem={item => {
+              return {
+                ...item,
+                ...(item.ip ? { ip: item.ip } : { ip: '-' }),
+                ...(item.node_name !== 'unknown'
+                  ? { node_name: item.node_name }
+                  : { node_name: '-' }),
+                /*
+                  The agent version contains the Wazuh word, this gets the string starting with
+                  v<NUMBER><ANYTHING>
+                  */
+                ...(typeof item.version === 'string'
+                  ? { version: item.version.match(/(v\d.+)/)?.[1] }
+                  : { version: '-' }),
+              };
+            }}
+            rowProps={getRowProps}
+            filters={filters}
+            downloadCsv
+            showReload
+            showFieldSelector
+            searchTable
+            searchBarWQL={{
+              options: searchBarWQLOptions,
+              suggestions: {
+                field(currentValue) {
+                  return [
+                    {
+                      label: 'dateAdd',
+                      description: 'filter by registration date',
+                    },
+                    { label: 'id', description: 'filter by id' },
+                    { label: 'ip', description: 'filter by IP address' },
+                    { label: 'group', description: 'filter by group' },
+                    {
+                      label: 'group_config_status',
+                      description: 'filter by group configuration status',
+                    },
+                    {
+                      label: 'lastKeepAlive',
+                      description: 'filter by last keep alive',
+                    },
+                    { label: 'manager', description: 'filter by manager' },
+                    { label: 'name', description: 'filter by name' },
+                    {
+                      label: 'node_name',
+                      description: 'filter by cluster name',
+                    },
+                    {
+                      label: 'os.name',
+                      description: 'filter by operating system name',
+                    },
+                    {
+                      label: 'os.platform',
+                      description: 'filter by operating platform',
+                    },
+                    {
+                      label: 'os.version',
+                      description: 'filter by operating system version',
+                    },
+                    { label: 'status', description: 'filter by status' },
+                    { label: 'version', description: 'filter by version' },
+                  ];
+                },
+                value: async (currentValue, { field }) => {
+                  try {
+                    switch (field) {
+                      case 'status':
+                        return UI_ORDER_AGENT_STATUS.map(status => ({
+                          label: status,
+                        }));
+                      case 'group_config_status':
+                        return [
+                          AGENT_SYNCED_STATUS.SYNCED,
+                          AGENT_SYNCED_STATUS.NOT_SYNCED,
+                        ].map(label => ({
+                          label,
+                        }));
+                      default: {
+                        const response = await WzRequest.apiReq(
+                          'GET',
+                          '/agents',
+                          {
+                            params: {
+                              distinct: true,
+                              limit: SEARCH_BAR_WQL_VALUE_SUGGESTIONS_COUNT,
+                              select: field,
+                              sort: `+${field}`,
+                              ...(currentValue
+                                ? {
+                                    q: `${searchBarWQLOptions.implicitQuery.query}${searchBarWQLOptions.implicitQuery.conjunction}${field}~${currentValue}`,
+                                  }
+                                : {
+                                    q: `${searchBarWQLOptions.implicitQuery.query}`,
+                                  }),
+                            },
+                          },
+                        );
+                        if (field === 'group') {
+                          /* the group field is returned as an string[],
+                            example: ['group1', 'group2']
+
+                            Due the API request done to get the distinct values for the groups is
+                            not returning the exepected values, as workaround, the values are
+                            extracted in the frontend using the returned results.
+
+                            This API request to get the distint values of groups doesn't
+                            return the unique values for the groups, else the unique combination
+                            of groups.
+                            */
+                          return response?.data?.data.affected_items
+                            .map(item => getLodash(item, field))
+                            .flat()
+                            .filter(
+                              (item, index, array) =>
+                                array.indexOf(item) === index,
+                            )
+                            .sort()
+                            .map(group => ({ label: group }));
+                        }
+                        return response?.data?.data.affected_items.map(
+                          item => ({
+                            label: getLodash(item, field),
+                          }),
+                        );
+                      }
+                    }
+                  } catch (error) {
+                    return [];
+                  }
+                },
+              },
+              validate: {
+                value: ({ formattedValue, value: rawValue }, { field }) => {
+                  const value = formattedValue ?? rawValue;
+                  if (value) {
+                    if (['dateAdd', 'lastKeepAlive'].includes(field)) {
+                      return /^\d{4}-\d{2}-\d{2}([ T]\d{2}:\d{2}:\d{2}(.\d{1,6})?Z?)?$/.test(
+                        value,
+                      )
+                        ? undefined
+                        : `"${value}" is not a expected format. Valid formats: YYYY-MM-DD, YYYY-MM-DD HH:mm:ss, YYYY-MM-DDTHH:mm:ss, YYYY-MM-DDTHH:mm:ssZ.`;
+                    }
+                  }
+                },
+              },
+            }}
+            saveStateStorage={{
+              system: 'localStorage',
+              key: 'wz-agents-overview-table',
+            }}
+            tableProps={{
+              tableLayout: 'auto',
+              cellProps: getCellProps,
+            }}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const filterGroupBadge = (group: string) => {
+    setFilters({
+      default: { q: 'id!=000' },
+      q: `id!=000;group=${group}`,
+    });
+  };
+
+  const renderGroups = (groups: string[]) => {
+    return groups?.length ? (
+      <GroupTruncate
+        groups={groups}
+        length={25}
+        label={'more'}
+        action={'filter'}
+        filterAction={filterGroupBadge}
+      />
+    ) : null;
+  };
+
+  const table = tableRender();
+
+  return (
+    <div>
+      <EuiPanel paddingSize='m'>{table}</EuiPanel>
+      {isEditGroupsVisible ? (
+        <EditAgentGroupsModal
+          agent={agent}
+          reloadAgents={() => reloadAgents()}
+          onClose={() => {
+            setIsEditGroupsVisible(false);
+            setAgent(undefined);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+});
diff --git a/plugins/main/public/components/endpoints-summary/table/edit-groups-modal.tsx b/plugins/main/public/components/endpoints-summary/table/edit-groups-modal.tsx
new file mode 100644
index 0000000000..b14b91753a
--- /dev/null
+++ b/plugins/main/public/components/endpoints-summary/table/edit-groups-modal.tsx
@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import {
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiForm,
+  EuiFormRow,
+  EuiComboBox,
+  EuiText,
+} from '@elastic/eui';
+import { compose } from 'redux';
+import { withErrorBoundary, withReduxProvider } from '../../common/hocs';
+import { UI_LOGGER_LEVELS } from '../../../../common/constants';
+import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
+import { getErrorOrchestrator } from '../../../react-services/common-services';
+import { useGetGroups } from '../hooks/groups';
+import {
+  addAgentToGroupService,
+  removeAgentFromGroupsService,
+} from '../services';
+
+interface EditAgentGroupsModalProps {
+  agent: { id: string; name: string; group: string[] };
+  onClose: () => void;
+  reloadAgents: () => void;
+}
+
+export const EditAgentGroupsModal = compose(
+  withErrorBoundary,
+  withReduxProvider,
+)(({ agent, onClose, reloadAgents }: EditAgentGroupsModalProps) => {
+  const [selectedGroups, setSelectedGroups] = useState(
+    agent.group?.map(group => ({ label: group })) || [],
+  );
+  const [isSaving, setIsSaving] = useState(false);
+
+  const {
+    groups,
+    isLoading: isGroupsLoading,
+    error: errorGroups,
+  } = useGetGroups();
+
+  if (errorGroups) {
+    const options = {
+      context: `EditAgentGroupsModal.useGetGroups`,
+      level: UI_LOGGER_LEVELS.ERROR,
+      severity: UI_ERROR_SEVERITIES.BUSINESS,
+      store: true,
+      error: {
+        error,
+        message: error.message || error,
+        title: `Could not get groups`,
+      },
+    };
+    getErrorOrchestrator().handleError(options);
+  }
+
+  const handleOnSave = async () => {
+    setIsSaving(true);
+
+    const flatSelectedGroups = selectedGroups.map(group => group.label);
+    const addedGroups =
+      flatSelectedGroups.filter(group => !agent.group?.includes(group)) || [];
+    const removedGroups =
+      agent.group?.filter(group => !flatSelectedGroups.includes(group)) || [];
+
+    if (!removedGroups.length && !addedGroups.length) {
+      setIsSaving(false);
+      onClose();
+      return;
+    }
+
+    try {
+      addedGroups.length &&
+        (await Promise.all(
+          addedGroups?.map(group => addAgentToGroupService(agent.id, group)),
+        ));
+      removedGroups.length &&
+        (await removeAgentFromGroupsService(agent.id, removedGroups));
+      reloadAgents();
+    } catch (error) {
+      const options = {
+        context: `EditAgentGroupsModal.handleOnSave`,
+        level: UI_LOGGER_LEVELS.ERROR,
+        severity: UI_ERROR_SEVERITIES.BUSINESS,
+        store: true,
+        error: {
+          error,
+          message: error.message || error,
+          title: `Could not save agent groups`,
+        },
+      };
+      getErrorOrchestrator().handleError(options);
+    } finally {
+      setIsSaving(false);
+      onClose();
+    }
+  };
+
+  const form = (
+    <EuiForm component='form'>
+      <EuiFormRow label='Agent'>
+        <EuiText>
+          <b>{agent.name}</b>
+        </EuiText>
+      </EuiFormRow>
+      <EuiFormRow
+        label='Groups'
+        isRequired
+        isInvalid={!selectedGroups?.length}
+        error={['You must add at least one group']}
+      >
+        <EuiComboBox
+          placeholder='Select groups'
+          options={groups?.map(group => ({ label: group })) || []}
+          selectedOptions={selectedGroups}
+          onChange={selectedGroups => setSelectedGroups(selectedGroups)}
+          isLoading={isGroupsLoading}
+        />
+      </EuiFormRow>
+    </EuiForm>
+  );
+
+  return (
+    <EuiModal
+      onClose={onClose}
+      initialFocus='[name=popswitch]'
+      onClick={ev => {
+        ev.stopPropagation();
+      }}
+    >
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>Edit agent groups</EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>{form}</EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
+        <EuiButton
+          onClick={handleOnSave}
+          fill
+          isLoading={isSaving}
+          disabled={isGroupsLoading || !selectedGroups?.length}
+        >
+          Save
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+});