From 5c3a031133722e2007412435ffc5496e81a856ad Mon Sep 17 00:00:00 2001
From: Jean-Baptiste WATENBERG <jean-baptiste.watenberg@scality.com>
Date: Wed, 22 Jun 2022 22:47:55 +0200
Subject: [PATCH] ZKUI-184: UI, UX and style review

---
 package-lock.json                             |  10 +-
 package.json                                  |   2 +-
 src/js/IAMClient.ts                           |  18 +
 src/react/account/AccountContent.tsx          |  11 +-
 src/react/account/AccountCreateUser.tsx       |   3 +-
 src/react/account/AccountPoliciesList.tsx     |  14 +-
 src/react/account/AccountUserList.tsx         |  27 ++
 .../AttachmentConfirmationModal.tsx           | 361 ++++++++++-----
 .../account/iamAttachment/AttachmentTable.tsx | 416 ++++++++++++------
 .../account/iamAttachment/AttachmentTabs.tsx  | 222 +++++++++-
 .../account/iamAttachment/AttachmentTypes.ts  |   2 +-
 .../account/iamAttachment/Attachments.tsx     |  84 +++-
 src/react/queries.ts                          |  48 +-
 tsconfig.json                                 |   2 +-
 14 files changed, 916 insertions(+), 304 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7db0419bd..803dc7739 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@hapi/joi": "^17.1.1",
         "@hapi/joi-date": "^2.0.1",
         "@hookform/resolvers": "^2.8.8",
-        "@scality/core-ui": "github:scality/core-ui.git#v0.38.11",
+        "@scality/core-ui": "github:scality/core-ui.git#v0.39.0",
         "@types/react-table": "^7.7.10",
         "@types/react-virtualized": "^9.21.20",
         "@types/react-window": "^1.8.5",
@@ -3139,8 +3139,8 @@
       }
     },
     "node_modules/@scality/core-ui": {
-      "version": "0.38.11",
-      "resolved": "git+ssh://git@github.com/scality/core-ui.git#1b602bb094453d70193c1b1a87e49e9a9917ea30",
+      "version": "0.39.0",
+      "resolved": "git+ssh://git@github.com/scality/core-ui.git#d6d7fbe5c09f5e7c511e9355a1390712f2ada9e5",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@floating-ui/dom": "^0.1.10"
@@ -25853,8 +25853,8 @@
       }
     },
     "@scality/core-ui": {
-      "version": "git+ssh://git@github.com/scality/core-ui.git#1b602bb094453d70193c1b1a87e49e9a9917ea30",
-      "from": "@scality/core-ui@github:scality/core-ui.git#v0.38.11",
+      "version": "git+ssh://git@github.com/scality/core-ui.git#d6d7fbe5c09f5e7c511e9355a1390712f2ada9e5",
+      "from": "@scality/core-ui@github:scality/core-ui.git#v0.39.0",
       "requires": {
         "@floating-ui/dom": "^0.1.10"
       }
diff --git a/package.json b/package.json
index 52984b410..b73121ddf 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "@hapi/joi": "^17.1.1",
     "@hapi/joi-date": "^2.0.1",
     "@hookform/resolvers": "^2.8.8",
-    "@scality/core-ui": "github:scality/core-ui.git#v0.38.11",
+    "@scality/core-ui": "github:scality/core-ui.git#v0.39.0",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",
     "@types/react-window": "^1.8.5",
diff --git a/src/js/IAMClient.ts b/src/js/IAMClient.ts
index 6925555ea..f869e8143 100644
--- a/src/js/IAMClient.ts
+++ b/src/js/IAMClient.ts
@@ -321,6 +321,24 @@ export default class IAMClient implements IAMClientInterface {
       })
       .promise();
   }
+
+  listGroups(maxItems?: number, marker?: string) {
+    return notFalsyTypeGuard(this.client)
+      .listGroups({
+        MaxItems: maxItems,
+        Marker: marker,
+      })
+      .promise();
+  }
+
+  listRoles(maxItems?: number, marker?: string) {
+    return notFalsyTypeGuard(this.client)
+      .listRoles({
+        MaxItems: maxItems,
+        Marker: marker,
+      })
+      .promise();
+  }
 } // OFFLINE
 // export default class IAMClient {
 //     constructor() {
diff --git a/src/react/account/AccountContent.tsx b/src/react/account/AccountContent.tsx
index 28c9ae449..9a7b75b45 100644
--- a/src/react/account/AccountContent.tsx
+++ b/src/react/account/AccountContent.tsx
@@ -10,8 +10,7 @@ import CreateWorkflow from '../workflow/CreateWorkflow';
 import Workflows from '../workflow/Workflows';
 import { useCurrentAccount } from '../DataServiceRoleProvider';
 import CreateAccountPolicy from './CreateAccountPolicy';
-import AttachmentTabs from './iamAttachment/AttachmentTabs';
-import AttachmentConfirmationModal from './iamAttachment/AttachmentConfirmationModal';
+import Attachments from './iamAttachment/Attachments';
 
 function AccountContent() {
   const { path } = useRouteMatch();
@@ -33,11 +32,11 @@ function AccountContent() {
         <Route path={`${path}/users/:IAMUserName/access-keys`}>
           <AccountUserAccessKeys />
         </Route>
-        {/* <Route path={`${path}/users/:IAMUserName/attachments`}>
-          <AttachmentTabs />
-        </Route> */}
+        <Route path={`${path}/users/:IAMUserName/attachments`}>
+          <Attachments />
+        </Route>
         <Route path={`${path}/policies/:policyArn/attachments`}>
-          <AttachmentConfirmationModal />
+          <Attachments />
         </Route>
         <Route path={`${path}/workflows/create-workflow`}>
           <CreateWorkflow />
diff --git a/src/react/account/AccountCreateUser.tsx b/src/react/account/AccountCreateUser.tsx
index 614672938..e5941b89b 100644
--- a/src/react/account/AccountCreateUser.tsx
+++ b/src/react/account/AccountCreateUser.tsx
@@ -132,8 +132,7 @@ const AccountCreateUser = () => {
           <F.Input
             type="text"
             id="name"
-            {...register('name')}
-            onChange={clearServerError}
+            {...register('name', { onChange: clearServerError })}
             autoComplete="new-password"
           />
           <F.ErrorInput id="error-name" hasError={errors.name}>
diff --git a/src/react/account/AccountPoliciesList.tsx b/src/react/account/AccountPoliciesList.tsx
index cf80cd9a7..8f7ad3510 100644
--- a/src/react/account/AccountPoliciesList.tsx
+++ b/src/react/account/AccountPoliciesList.tsx
@@ -256,13 +256,6 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
   };
 
   const columns = [
-    {
-      Header: 'Policy Path',
-      accessor: 'policyPath',
-      cellStyle: {
-        minWidth: '10rem',
-      },
-    },
     {
       Header: 'Policy Name',
       accessor: 'policyName',
@@ -271,6 +264,13 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
       },
       Cell: (value) => <AccessPolicyNameCell rowValues={value.row.original} />,
     },
+    {
+      Header: 'Policy Path',
+      accessor: 'policyPath',
+      cellStyle: {
+        minWidth: '10rem',
+      },
+    },
     {
       Header: 'Last Modified',
       accessor: 'modifiedOn',
diff --git a/src/react/account/AccountUserList.tsx b/src/react/account/AccountUserList.tsx
index 6035fa1ba..a072b5a26 100644
--- a/src/react/account/AccountUserList.tsx
+++ b/src/react/account/AccountUserList.tsx
@@ -124,6 +124,32 @@ const EditButton = ({ userName }: { userName: string }) => {
   );
 };
 
+const AttachButton = ({
+  userName,
+  accountName,
+}: {
+  userName: string;
+  accountName: string;
+}) => {
+  const history = useHistory();
+  return (
+    <SpacedBox ml={12}>
+      <Button
+        style={{ height: spacing.sp24 }}
+        variant="secondary"
+        label="Attach"
+        icon={<i className="fas fa-link"></i>}
+        onClick={() =>
+          history.push(
+            `/accounts/${accountName}/users/${userName}/attachments`,
+          )
+        }
+        aria-label={`Attach ${userName}`}
+      />
+    </SpacedBox>
+  );
+};
+
 const ActionButtons = ({
   rowValues,
   accountName,
@@ -134,6 +160,7 @@ const ActionButtons = ({
   const { arn, userName } = rowValues;
   return (
     <Box display={'flex'}>
+      <AttachButton userName={userName} accountName={accountName || ''} />
       <EditButton userName={userName} />
       <CopyButton text={arn} labelName={'ARN'} />
       <DeleteUserAction userName={userName} accountName={accountName} />
diff --git a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
index fcc75eebf..a7ca839bc 100644
--- a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
+++ b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
-import { Button } from '@scality/core-ui/dist/next';
+import { Box, Button } from '@scality/core-ui/dist/next';
 import { CustomModal as Modal, ModalBody } from '../../ui-elements/Modal';
-import { useMutation } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { useIAMClient } from '../../IAMProvider';
 import { notFalsyTypeGuard } from '../../../types/typeGuards';
 import { AppState } from '../../../types/state';
@@ -13,148 +13,221 @@ import {
   ResourceType,
   EntityType,
 } from './AttachmentTypes';
+import styled, { DefaultTheme, useTheme } from 'styled-components';
+import { useHistory } from 'react-router';
+import { InlineButton } from '../../ui-elements/Table';
+import {
+  getListAttachedUserPoliciesQuery,
+  getListEntitiesForPolicyQuery,
+  getListPoliciesQuery,
+  getUserListGroupsQuery,
+} from '../../queries';
+import { useCurrentAccount } from '../../DataServiceRoleProvider';
+import { LargerText, SecondaryText } from '@scality/core-ui';
 
 type AttachmentStatus = 'Waiting for confirmation' | 'Error' | 'Success';
 
+const ColoredIcon = styled.i<{ color: keyof DefaultTheme['brand'] }>`
+  color: ${(props) => props.theme.brand[props.color]};
+`;
+
+const EntityIcon = ({ type }: { type: EntityType }) => {
+  return type === 'user' ? (
+    <span>
+      <i className="fas fa-user" /> User
+    </span>
+  ) : type === 'group' ? (
+    <span>
+      <i className="fas fa-users" /> Group
+    </span>
+  ) : type === 'policy' ? (
+    <span>
+      <i className="fas fa-file-signature" /> Policy
+    </span>
+  ) : (
+    <span>
+      <i className="fas fa-hat-cowboy" /> Role
+    </span>
+  );
+};
+
 //The entity is the "thing" you want to attach to the resource, sorry about the naming :(
 function AttachmentConfirmationModal({
   attachmentOperations,
   resourceId,
   resourceType,
   resourceName,
+  redirectUrl,
 }: {
   attachmentOperations: AttachmentOperation[];
   resourceId: string;
   resourceName: string;
   resourceType: ResourceType;
+  redirectUrl: string;
 }) {
+  const history = useHistory();
+  const queryClient = useQueryClient();
+  const { account } = useCurrentAccount();
   const loading = useSelector(
     (state: AppState) => state.networkActivity.counter > 0,
   );
 
-  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleClose = () => {
     setIsModalOpen(false);
   };
   const IAMClient = useIAMClient();
 
+  const [attachmentOperationsStatuses, setAttachmentOperationsStatuses] =
+    useState<Record<string, AttachmentStatus>>({});
+
   const attachUserPolicyMutation = useMutation(
     ({
       action,
       type,
-      entityName,
+      id,
     }: {
       action: AttachmentAction;
       type: EntityType;
       entityName: string;
+      id: string;
     }) => {
       if (action === AttachmentAction.ADD && type === 'user') {
-        return notFalsyTypeGuard(IAMClient).attachUserPolicy(
-          entityName,
-          resourceId,
-        );
+        return notFalsyTypeGuard(IAMClient).attachUserPolicy(id, resourceId);
       } else if (action === AttachmentAction.REMOVE && type === 'user') {
-        return notFalsyTypeGuard(IAMClient).detachUserPolicy(
-          entityName,
-          resourceId,
-        );
+        return notFalsyTypeGuard(IAMClient).detachUserPolicy(id, resourceId);
       } else if (action === AttachmentAction.ADD && type === 'group') {
-        return notFalsyTypeGuard(IAMClient).attachGroupPolicy(
-          entityName,
-          resourceId,
-        );
+        if (resourceType === 'policy') {
+          return notFalsyTypeGuard(IAMClient).attachGroupPolicy(id, resourceId);
+        } else {
+          return notFalsyTypeGuard(IAMClient).addUserToGroup(id, resourceId);
+        }
       } else if (action === AttachmentAction.REMOVE && type === 'group') {
-        return notFalsyTypeGuard(IAMClient).detachGroupPolicy(
-          entityName,
-          resourceId,
-        );
+        if (resourceType === 'policy') {
+          return notFalsyTypeGuard(IAMClient).detachGroupPolicy(id, resourceId);
+        } else {
+          return notFalsyTypeGuard(IAMClient).removeUserFromGroup(
+            id,
+            resourceId,
+          );
+        }
       } else if (action === AttachmentAction.ADD && type === 'role') {
-        return notFalsyTypeGuard(IAMClient).attachRolePolicy(
-          entityName,
-          resourceId,
-        );
+        return notFalsyTypeGuard(IAMClient).attachRolePolicy(id, resourceId);
       } else if (action === AttachmentAction.REMOVE && type === 'role') {
-        return notFalsyTypeGuard(IAMClient).detachRolePolicy(
-          entityName,
-          resourceId,
-        );
+        return notFalsyTypeGuard(IAMClient).detachRolePolicy(id, resourceId);
+      } else if (action === AttachmentAction.ADD && type === 'policy') {
+        return notFalsyTypeGuard(IAMClient).attachUserPolicy(resourceId, id);
+      } else if (action === AttachmentAction.REMOVE && type === 'policy') {
+        return notFalsyTypeGuard(IAMClient).detachUserPolicy(resourceId, id);
       }
       throw new Error(`Attachment to ${type} is not yet supported`);
     },
-  );
-  const [attachmentOperationsFlat, setAttachmentOperationsFlat] = useState<
     {
-      action: AttachmentAction;
-      type: EntityType;
-      entityName: string;
-      arn: string;
-      attachmentStatus: AttachmentStatus;
-    }[]
-  >(
-    attachmentOperations.map((attachmentOperation: AttachmentOperation) => {
-      return {
-        action: attachmentOperation.action,
-        type: attachmentOperation.entity.type,
-        entityName: attachmentOperation.entity.name,
-        arn: attachmentOperation.entity.arn,
-        attachmentStatus: 'Waiting for confirmation',
-      };
-    }),
+      onSettled: (_, error, flatEntity) => {
+        setAttachmentOperationsStatuses((statuses) => ({
+          ...statuses,
+          [flatEntity.id]: error ? 'Error' : 'Success',
+        }));
+        if (resourceType === 'policy') {
+          queryClient.invalidateQueries(
+            getListEntitiesForPolicyQuery(resourceId, IAMClient),
+          );
+          if (flatEntity.type === 'user') {
+            queryClient.refetchQueries(
+              getListAttachedUserPoliciesQuery(
+                flatEntity.id,
+                notFalsyTypeGuard(account).Name,
+                IAMClient,
+              ),
+            );
+          }
+        }
+        if (resourceType === 'user') {
+          queryClient.invalidateQueries(
+            getListAttachedUserPoliciesQuery(
+              resourceId,
+              notFalsyTypeGuard(account).Name,
+              IAMClient,
+            ),
+          );
+          queryClient.invalidateQueries(
+            getUserListGroupsQuery(resourceId, IAMClient),
+          );
+          if (flatEntity.type === 'policy') {
+            queryClient.refetchQueries(
+              getListEntitiesForPolicyQuery(flatEntity.id, IAMClient),
+            );
+            queryClient.invalidateQueries(
+              getListPoliciesQuery(
+                notFalsyTypeGuard(account).Name,
+                notFalsyTypeGuard(IAMClient),
+              ).queryKey,
+            );
+          }
+        }
+      },
+    },
   );
 
+  const attachmentOperationsFlat: {
+    action: AttachmentAction;
+    type: EntityType;
+    entityName: string;
+    id: string;
+  }[] = attachmentOperations.map((attachmentOperation: AttachmentOperation) => {
+    return {
+      action: attachmentOperation.action,
+      type: attachmentOperation.entity.type,
+      entityName: attachmentOperation.entity.name,
+      id: attachmentOperation.entity.id,
+    };
+  });
+
   const attach = () => {
     attachmentOperationsFlat.forEach((attachmentOperationFlat) => {
       if (
-        attachmentOperationFlat.attachmentStatus ===
+        attachmentOperationsStatuses[attachmentOperationFlat.id] ===
           'Waiting for confirmation' ||
-        attachmentOperationFlat.attachmentStatus === 'Error'
+        attachmentOperationsStatuses[attachmentOperationFlat.id] === 'Error' ||
+        !attachmentOperationsStatuses[attachmentOperationFlat.id]
       ) {
-        attachUserPolicyMutation.mutate(
-          {
-            ...attachmentOperationFlat,
-          },
-          {
-            onSettled: (_, error) => {
-              setAttachmentOperationsFlat((attachmentOperationsFlat) => {
-                return attachmentOperationsFlat.map((attachmentOperation) => {
-                  if (attachmentOperation.arn === attachmentOperationFlat.arn) {
-                    return {
-                      ...attachmentOperation,
-                      attachmentStatus: error ? 'Error' : 'Success',
-                    };
-                  }
-                  return attachmentOperation;
-                });
-              });
-            },
-          },
-        );
+        setAttachmentOperationsStatuses((attachmentOperationsStatuses) => {
+          return {
+            ...attachmentOperationsStatuses,
+            [attachmentOperationFlat.id]: 'Waiting for confirmation',
+          };
+        });
+        attachUserPolicyMutation.mutate({
+          ...attachmentOperationFlat,
+        });
       }
     });
   };
   const isAttachNotDone = attachmentOperationsFlat.find(
     (attachmentOperation) =>
-      attachmentOperation.attachmentStatus === 'Waiting for confirmation',
+      !attachmentOperationsStatuses[attachmentOperation.id],
   );
   const modalFooter = () => {
     return (
       <div>
-        <Button variant="outline" onClick={handleClose} label="Cancel" />
         {isAttachNotDone ? (
-          <Button
-            icon={<i className="fas fa-arrow-right"></i>}
-            variant="primary"
-            onClick={attach}
-            label="Confirm"
-            disabled={loading}
-          />
+          <>
+            <Button variant="outline" onClick={handleClose} label="Cancel" />
+            <Button
+              icon={<i className="fas fa-arrow-right"></i>}
+              variant="primary"
+              onClick={attach}
+              label="Confirm"
+              disabled={loading}
+            />
+          </>
         ) : (
           <Button
             icon={<i className="fas fa-arrow-right"></i>}
             variant="primary"
-            onClick={handleClose}
-            label="Continue"
+            onClick={() => history.push(redirectUrl)}
+            label="Exit"
             disabled={loading}
           />
         )}
@@ -163,71 +236,98 @@ function AttachmentConfirmationModal({
   };
 
   function AttachmentList() {
+    const theme = useTheme();
     const columns = [
       {
         Header: 'Action',
         accessor: 'action',
+        cellStyle: {
+          width: '12.5%',
+        },
         Cell: ({ value }: { value: AttachmentAction }) => {
           return value === AttachmentAction.ADD ? (
             <span>
               <i className="fas fa-link" /> Attach
             </span>
           ) : (
-            <span>
-              <i className="fas fa-link-slash" /> Detach
-            </span>
+            <Box color={theme.brand.statusCritical}>
+              <i className="fas fa-unlink" /> Detach
+            </Box>
           );
         },
       },
       {
         Header: 'Type',
         accessor: 'type',
+        cellStyle: {
+          width: '12.5%',
+        },
         Cell: ({ value }: { value: EntityType }) => {
-          return value === 'user' ? (
-            <span>
-              <i className="fas fa-user" /> User
-            </span>
-          ) : value === 'group' ? (
-            <span>
-              <i className="fas fa-users" /> Group
-            </span>
-          ) : (
-            <span>
-              <i className="fas fa-hat-cowboy" /> Role
-            </span>
-          );
+          return <EntityIcon type={value} />;
         },
       },
       {
         Header: 'Entity name',
         accessor: 'entityName',
+        cellStyle: {
+          width: '42.5%',
+        },
       },
       {
         Header: 'Attachment status',
-        accessor: 'attachmentStatus',
+        accessor: 'id',
         cellStyle: {
-          width: '15rem',
+          width: '32.5%',
         },
-        Cell: ({ value }: { value: AttachmentStatus }) => {
-          if (value === 'Error') {
+        Cell: ({ value: resourceId }: { value: string }) => {
+          if (attachmentOperationsStatuses[resourceId] === 'Error') {
             return (
-              <>
-                {value}{' '}
-                <Button onClick={attach} variant="danger" label="Retry" />
-              </>
+              <Box display="flex" gap={8} alignItems="center">
+                <ColoredIcon
+                  color="statusCritical"
+                  className="fas fa-times-circle"
+                />
+                {attachmentOperationsStatuses[resourceId]}{' '}
+                <InlineButton
+                  onClick={attach}
+                  variant="outline"
+                  label="Retry"
+                />
+              </Box>
             );
           }
-          return <>{value}</>;
+          if (attachmentOperationsStatuses[resourceId] === 'Success') {
+            return (
+              <Box display="flex" gap={8} alignItems="center">
+                <ColoredIcon
+                  color="statusHealthy"
+                  className="fas fa-check-circle"
+                />
+                {attachmentOperationsStatuses[resourceId]}
+              </Box>
+            );
+          }
+          return (
+            <>
+              {attachmentOperationsStatuses[resourceId] ||
+                'Waiting for confirmation'}
+            </>
+          );
         },
       },
     ];
 
     return (
-      <div style={{ height: '25rem' }}>
+      <div style={{ height: '25rem', width: '50rem' }}>
         <div>The following entities will be attached or detached: </div>
-        <div>
-          {resourceType} {resourceName}
-        </div>
+        <Box display="flex" gap={24} alignItems="center">
+          <SecondaryText>
+            <EntityIcon type={resourceType} />
+          </SecondaryText>
+          <p>
+            {resourceName}
+          </p>
+        </Box>
         <Table
           columns={columns}
           data={attachmentOperationsFlat}
@@ -247,17 +347,40 @@ function AttachmentConfirmationModal({
   }
 
   return (
-    <Modal
-      //@ts-expect-error TODO core-ui typing is incorrect here. It should return void.
-      close={handleClose}
-      footer={modalFooter()}
-      isOpen={isModalOpen}
-      title="Attachment"
-    >
-      <ModalBody>
-        <AttachmentList />
-      </ModalBody>
-    </Modal>
+    <>
+      <Box display="flex" justifyContent="flex-end" gap={8}>
+        <Button
+          label="Cancel"
+          variant="outline"
+          onClick={() => history.push(redirectUrl)}
+        />
+        <Button
+          icon={<i className="fas fa-save"></i>}
+          label="Save"
+          onClick={() => setIsModalOpen(true)}
+          variant="primary"
+          disabled={attachmentOperations.length === 0}
+        />
+      </Box>
+      {/*@ts-expect-error TODO core-ui typing is incorrect here.*/}
+      <Modal
+        close={handleClose}
+        footer={modalFooter()}
+        isOpen={isModalOpen}
+        title={
+          <Box display="flex" gap={8}>
+            <LargerText>
+              <i className="fas fa-link" />
+            </LargerText>
+            <LargerText>Attachment</LargerText>
+          </Box>
+        }
+      >
+        <ModalBody>
+          <AttachmentList />
+        </ModalBody>
+      </Modal>
+    </>
   );
 }
 
diff --git a/src/react/account/iamAttachment/AttachmentTable.tsx b/src/react/account/iamAttachment/AttachmentTable.tsx
index 08660db6b..b0fdace4e 100644
--- a/src/react/account/iamAttachment/AttachmentTable.tsx
+++ b/src/react/account/iamAttachment/AttachmentTable.tsx
@@ -6,15 +6,18 @@ import {
 } from '../../utils/IAMhooks';
 import { Box, Table } from '@scality/core-ui/dist/next';
 import { InlineButton } from '../../ui-elements/Table';
-import { Loader, SearchInput, Tooltip } from '@scality/core-ui';
+import { Loader, SearchInput, SecondaryText, Tooltip } from '@scality/core-ui';
 import styled from 'styled-components';
 import { spacing } from '@scality/core-ui/dist/style/theme';
-import { tableRowHeight } from '@scality/core-ui/dist/components/tablev2/TableUtils';
-import { AttachableEntity, AttachmentOperation, AttachmentAction } from './AttachmentTypes';
+import {
+  AttachableEntity,
+  AttachmentOperation,
+  AttachmentAction,
+} from './AttachmentTypes';
 
 type AttachableEntityWithPendingStatus = {
   isPending?: boolean;
-} & AttachableEntity
+} & AttachableEntity;
 
 export type AttachmentTableProps<
   API_RESPONSE extends {
@@ -27,6 +30,7 @@ export type AttachmentTableProps<
     AttachableEntity
   >;
   getEntitiesFromResult: (response: API_RESPONSE) => AttachableEntity[];
+  initialAttachmentOperations: AttachmentOperation[];
   onAttachmentsOperationsChanged: (
     attachmentOperations: AttachmentOperation[],
   ) => void;
@@ -39,9 +43,8 @@ const MenuContainer = styled.ul<{
   isOpen: boolean;
   searchInputIsFocused: boolean;
 }>`
-  max-height: ${parseFloat(tableRowHeight[rowHeight]) * 5}rem;
-  overflow-y: scroll;
   background-color: ${(props) => props.theme.brand.backgroundLevel1};
+  background-clip: content-box;
   padding: 0;
   list-style: none;
   position: absolute;
@@ -54,9 +57,11 @@ const MenuContainer = styled.ul<{
   ${(props) =>
     props.isOpen
       ? `
-  border-left: 1px solid ${props.theme.brand.secondary};
-  border-right: 1px solid ${props.theme.brand.secondary};
-  border-bottom: 1px solid ${props.theme.brand.secondary};
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border: 1px solid ${props.theme.brand.secondary};
   `
       : props.searchInputIsFocused
       ? `border-bottom: 1px solid ${props.theme.brand.secondary};`
@@ -64,7 +69,8 @@ const MenuContainer = styled.ul<{
   border-top: 0;
   li {
     padding: ${spacing.sp8};
-    border: 1px solid ${(props) => props.theme.brand.backgroundLevel2};
+    cursor: pointer;
+    border-top: 1px solid ${(props) => props.theme.brand.backgroundLevel2};
     &[aria-selected='true'] {
       background: ${(props) => props.theme.brand.highlight};
     }
@@ -73,6 +79,7 @@ const MenuContainer = styled.ul<{
 
 const SearchBoxContainer = styled.div`
   margin-bottom: ${spacing.sp24};
+  width: 78%;
   .sc-tooltip {
     width: 100%;
   }
@@ -82,15 +89,42 @@ const StyledSearchInput = styled(SearchInput)`
   flex-grow: 1;
   .sc-input-type:focus {
     border-bottom: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
   }
 `;
 
 const AttachmentTableContainer = styled.div`
-  height: 100%;
+  height: 80%;
   background: ${(props) => props.theme.brand.backgroundLevel3};
   padding: ${spacing.sp24};
 `;
 
+const GentleEmphaseSecondaryText = styled(SecondaryText)<{
+  alignRight?: boolean;
+}>`
+  font-style: italic;
+  ${(props) =>
+    props.alignRight
+      ? `
+    text-align: right;
+    display: block;
+  `
+      : ''}
+`;
+
+const StyledTable = styled.div`
+  background: ${(props) => props.theme.brand.backgroundLevel4};
+  height: 100%;
+`;
+
+const CenterredSecondaryText = styled(SecondaryText)`
+  display: block;
+  text-align: center;
+`;
+
 export const AttachmentTable = <
   API_RESPONSE extends {
     Marker?: string;
@@ -99,6 +133,7 @@ export const AttachmentTable = <
   initiallyAttachedEntities,
   getAllEntitiesPaginatedQuery,
   getEntitiesFromResult,
+  initialAttachmentOperations,
   onAttachmentsOperationsChanged,
 }: AttachmentTableProps<API_RESPONSE>) => {
   //Desired attached entities and onAttachmentsOperationsChanged handling
@@ -117,25 +152,52 @@ export const AttachmentTable = <
         case AttachmentAction.ADD:
           if (
             !state.desiredAttachedEntities.find(
-              (entity) => entity.arn === action.entity.arn,
+              (entity) => entity.id === action.entity.id,
             )
           ) {
-            const newState = {
-              ...state,
-              desiredAttachedEntities: [
-                { ...action.entity, isPending: true },
-                ...state.desiredAttachedEntities,
-              ],
-              attachmentsOperations: [...state.attachmentsOperations, action],
-            };
-            onAttachmentsOperationsChanged(newState.attachmentsOperations);
-            return newState;
+            const newAttachmentsOperations = [...state.attachmentsOperations];
+            const existingOperationIndexOnThisEntity =
+              state.attachmentsOperations.findIndex(
+                (operation) => operation.entity.id === action.entity.id,
+              );
+            //When ADD, we check if it's already exist in operations. If so, we delete the previous operation and not proceed to the ADD.
+            if (
+              existingOperationIndexOnThisEntity !== -1 &&
+              state.attachmentsOperations[existingOperationIndexOnThisEntity]
+                .action === AttachmentAction.REMOVE
+            ) {
+              newAttachmentsOperations.splice(
+                existingOperationIndexOnThisEntity,
+                1,
+              );
+              const newState = {
+                ...state,
+                desiredAttachedEntities: [
+                  { ...action.entity },
+                  ...state.desiredAttachedEntities,
+                ],
+                attachmentsOperations: [...newAttachmentsOperations],
+              };
+              onAttachmentsOperationsChanged(newState.attachmentsOperations);
+              return newState;
+            } else {
+              const newState = {
+                ...state,
+                desiredAttachedEntities: [
+                  { ...action.entity, isPending: true },
+                  ...state.desiredAttachedEntities,
+                ],
+                attachmentsOperations: [...newAttachmentsOperations, action],
+              };
+              onAttachmentsOperationsChanged(newState.attachmentsOperations);
+              return newState;
+            }
           }
           break;
         case AttachmentAction.REMOVE:
           if (
             state.desiredAttachedEntities.find(
-              (entity) => entity.arn === action.entity.arn,
+              (entity) => entity.id === action.entity.id,
             )
           ) {
             const newDesiredAttachedEntities = [
@@ -143,14 +205,14 @@ export const AttachmentTable = <
             ];
             newDesiredAttachedEntities.splice(
               state.desiredAttachedEntities.findIndex(
-                (entity) => entity.arn === action.entity.arn,
+                (entity) => entity.id === action.entity.id,
               ),
               1,
             );
             const newAttachmentsOperations = [...state.attachmentsOperations];
             const existingOperationIndexOnThisEntity =
               state.attachmentsOperations.findIndex(
-                (operation) => operation.entity.arn === action.entity.arn,
+                (operation) => operation.entity.id === action.entity.id,
               );
             if (
               existingOperationIndexOnThisEntity !== -1 &&
@@ -183,18 +245,40 @@ export const AttachmentTable = <
       return state;
     },
     {
-      desiredAttachedEntities: initiallyAttachedEntities,
-      attachmentsOperations: [],
+      desiredAttachedEntities: [
+        ...initiallyAttachedEntities
+          .filter(
+            (attachedEntities) =>
+              !initialAttachmentOperations.find(
+                (op) => op.entity.id === attachedEntities.id,
+              ),
+          )
+          .map((entity) => ({
+            ...entity,
+            isPending: false,
+            action: null,
+          })),
+        ...initialAttachmentOperations
+          .filter((op) => op.action !== AttachmentAction.REMOVE)
+          .map((op) => ({
+            ...op.entity,
+            isPending: true,
+            action: op.action,
+          })),
+      ],
+      attachmentsOperations: initialAttachmentOperations,
     },
   );
 
   const resetRef = useRef<() => void | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   const onSelectedItemChange = useCallback(
     ({ selectedItem }) => {
       if (selectedItem) {
         dispatch({ action: AttachmentAction.ADD, entity: selectedItem });
         if (resetRef.current) resetRef.current();
+        if (searchInputRef.current) searchInputRef.current.blur();
       }
     },
     [resetRef],
@@ -202,7 +286,10 @@ export const AttachmentTable = <
 
   //Search box and entities fetching logic
 
-  const [{ filteredEntities }, dispatchEntitiesEvent] = useReducer(
+  const [
+    { filteredEntities, numberOfFilteredEntities },
+    dispatchEntitiesEvent,
+  ] = useReducer(
     (
       state: {
         allEntities: AttachableEntity[];
@@ -221,7 +308,7 @@ export const AttachmentTable = <
           );
           return {
             ...state,
-            filteredEntities: allFilteredEntities.slice(0, 10),
+            filteredEntities: allFilteredEntities.slice(0, 6),
             numberOfFilteredEntities: allFilteredEntities.length,
             allEntities: action.entities,
           };
@@ -235,7 +322,7 @@ export const AttachmentTable = <
           return {
             ...state,
             query: action.query || '',
-            filteredEntities: allFilteredEntities.slice(0, 10),
+            filteredEntities: allFilteredEntities.slice(0, 6),
             numberOfFilteredEntities: allFilteredEntities.length,
           };
         }
@@ -286,59 +373,69 @@ export const AttachmentTable = <
 
   return (
     <AttachmentTableContainer>
-      <div {...getComboboxProps()}>
-        <SearchBoxContainer
-          ref={(element) => {
+      <SearchBoxContainer
+        {...getComboboxProps({
+          ref: (element) => {
             if (element) {
-              setSearchWidth(element.getBoundingClientRect().width - 1 + 'px');
+              setSearchWidth(element.getBoundingClientRect().width - 2 + 'px');
             }
-          }}
-        >
-          {firstPageStatus === 'error' || firstPageStatus === 'loading' ? (
-            <Tooltip
-              overlay={
-                firstPageStatus === 'error' ? (
-                  <>We failed to load the entities, hence search is disabled</>
-                ) : firstPageStatus === 'loading' ? (
-                  <>Search is disabled while loading entities</>
-                ) : (
-                  <></>
-                )
-              }
-            >
-              <Box display="flex" alignItems="center" width="100%" gap={8}>
-                <StyledSearchInput
-                  {...getInputProps()}
-                  onFocus={() => {
-                    openMenu();
-                    setSearchInputIsFocused(true);
-                  }}
-                  onBlur={() => {
-                    setSearchInputIsFocused(false);
-                  }}
-                  disableToggle
-                  disabled={
-                    firstPageStatus === 'error' || firstPageStatus === 'loading'
-                  }
-                />
-                <Loader />
-              </Box>
-            </Tooltip>
-          ) : (
-            <StyledSearchInput
-              {...getInputProps()}
-              onFocus={() => {
-                openMenu();
-                setSearchInputIsFocused(true);
-              }}
-              onBlur={() => {
-                setSearchInputIsFocused(false);
-              }}
-              disableToggle
-            />
-          )}
-        </SearchBoxContainer>
-      </div>
+          },
+        })}
+      >
+        {firstPageStatus === 'error' || firstPageStatus === 'loading' ? (
+          <Tooltip
+            overlay={
+              firstPageStatus === 'error' ? (
+                <>We failed to load the entities, hence search is disabled</>
+              ) : firstPageStatus === 'loading' ? (
+                <>Search is disabled while loading entities</>
+              ) : (
+                <></>
+              )
+            }
+          >
+            <Box display="flex" alignItems="center" width="100%" gap={8}>
+              <StyledSearchInput
+                placeholder="Search by entity name"
+                {...getInputProps({
+                  ref: (element) => {
+                    if (element) searchInputRef.current = element;
+                  },
+                })}
+                onFocus={() => {
+                  openMenu();
+                  setSearchInputIsFocused(true);
+                }}
+                onBlur={() => {
+                  setSearchInputIsFocused(false);
+                }}
+                disableToggle
+                disabled={
+                  firstPageStatus === 'error' || firstPageStatus === 'loading'
+                }
+              />
+              <Loader />
+            </Box>
+          </Tooltip>
+        ) : (
+          <StyledSearchInput
+            placeholder="Search by entity name"
+            {...getInputProps({
+              ref: (element) => {
+                if (element) searchInputRef.current = element;
+              },
+            })}
+            onFocus={() => {
+              openMenu();
+              setSearchInputIsFocused(true);
+            }}
+            onBlur={() => {
+              setSearchInputIsFocused(false);
+            }}
+            disableToggle
+          />
+        )}
+      </SearchBoxContainer>
       <MenuContainer
         {...getMenuProps()}
         width={searchWidth}
@@ -346,77 +443,116 @@ export const AttachmentTable = <
         searchInputIsFocused={searchInputIsFocused}
       >
         {isOpen &&
-          filteredEntities.slice(0, 10).map((item, index) => (
-            <li key={`${item.arn}${index}`} {...getItemProps({ item, index })}>
+          filteredEntities.map((item, index) => (
+            <li key={`${item.id}${index}`} {...getItemProps({ item, index })}>
               {item.name}
             </li>
           ))}
         {isOpen && filteredEntities.length === 0 && status === 'loading' && (
           <li>Searching...</li>
         )}
+        {isOpen && numberOfFilteredEntities > filteredEntities.length && (
+          <li>
+            <GentleEmphaseSecondaryText alignRight>
+              There{' '}
+              {numberOfFilteredEntities - filteredEntities.length === 1
+                ? 'is'
+                : 'are'}{' '}
+              {numberOfFilteredEntities - filteredEntities.length} more{' '}
+              {numberOfFilteredEntities - filteredEntities.length === 1
+                ? 'entity'
+                : 'entities'}{' '}
+              matching your search. Suggestion: try more specific search
+              expression.
+            </GentleEmphaseSecondaryText>
+          </li>
+        )}
         {isOpen && filteredEntities.length === 0 && status === 'success' && (
-          <li>No entities found matching your search.</li>
+          <li>
+            <GentleEmphaseSecondaryText>
+              No entities found matching your search.
+            </GentleEmphaseSecondaryText>
+          </li>
         )}
       </MenuContainer>
-      <Table
-        columns={[
-          {
-            Header: 'Name',
-            accessor: 'name',
-            cellStyle: {
-              minWidth: '20rem',
+      <StyledTable>
+        <Table
+          columns={[
+            {
+              Header: 'Name',
+              accessor: 'name',
+              cellStyle: {
+                minWidth: '20rem',
+                marginLeft: '3rem',
+              },
             },
-          },
-          {
-            Header: 'Attachment status',
-            accessor: 'isPending',
-            cellStyle: {
-              minWidth: '40rem',
+            {
+              Header: 'Attachment status',
+              accessor: 'isPending',
+              cellStyle: {
+                minWidth: '20rem',
+              },
+              Cell: ({ value }: { value?: boolean }) => {
+                return value ? 'Pending' : 'Attached';
+              },
             },
-            Cell: ({ value }: { value?: boolean }) => {
-              return value ? 'Pending' : 'Attached';
-            },
-          },
-          {
-            Header: '',
-            accessor: 'action',
-            cellStyle: {
-              textAlign: 'right',
-              minWidth: '10rem',
-              marginLeft: 'auto',
+            {
+              Header: '',
+              accessor: 'action',
+              cellStyle: {
+                textAlign: 'right',
+                minWidth: '10rem',
+                marginLeft: 'auto',
+                marginRight: '0.5rem',
+              },
+              Cell: ({
+                row: { original: entity },
+              }: {
+                row: { original: AttachableEntity };
+              }) => (
+                <InlineButton
+                  onClick={() => {
+                    dispatch({
+                      action: AttachmentAction.REMOVE,
+                      entity: {
+                        name: entity.name,
+                        id: entity.id,
+                        type: entity.type,
+                      },
+                    });
+                  }}
+                  icon={<i className="fas fa-times"></i>}
+                  label="Remove"
+                  variant="danger"
+                />
+              ),
             },
-            Cell: ({
-              row: { original: entity },
-            }: {
-              row: { original: AttachableEntity };
-            }) => (
-              <InlineButton
-                onClick={() => {
-                  dispatch({
-                    action: AttachmentAction.REMOVE,
-                    entity: { name: entity.name, arn: entity.arn },
-                  });
-                }}
-                icon={<i className="fas fa-times"></i>}
-                label="Remove"
-                variant="danger"
-              />
-            ),
-          },
-        ]}
-        data={desiredAttachedEntities.map((entity) => ({
-          ...entity,
-          isPending: entity.isPending || false,
-          action: null,
-        }))}
-        defaultSortingKey="name"
-      >
-        <Table.SingleSelectableContent
-          backgroundVariant="backgroundLevel4"
-          rowHeight={rowHeight}
-          separationLineVariant="backgroundLevel2"
-        />
-      </Table>
+          ]}
+          data={desiredAttachedEntities.map((entity) => ({
+            ...entity,
+            isPending: entity.isPending || false,
+            action: null,
+          }))}
+          defaultSortingKey="name"
+        >
+          <Table.SingleSelectableContent
+            backgroundVariant="backgroundLevel4"
+            rowHeight={rowHeight}
+            separationLineVariant="backgroundLevel2"
+          >
+            {(rows) => (
+              <>
+                {desiredAttachedEntities.length === 0 && (
+                  <CenterredSecondaryText>
+                    No entities attached
+                  </CenterredSecondaryText>
+                )}
+                {desiredAttachedEntities.length > 0 && rows}
+              </>
+            )}
+          </Table.SingleSelectableContent>
+        </Table>
+      </StyledTable>
     </AttachmentTableContainer>
   );
 };
diff --git a/src/react/account/iamAttachment/AttachmentTabs.tsx b/src/react/account/iamAttachment/AttachmentTabs.tsx
index 4a6b94dd6..236d7a734 100644
--- a/src/react/account/iamAttachment/AttachmentTabs.tsx
+++ b/src/react/account/iamAttachment/AttachmentTabs.tsx
@@ -1,8 +1,16 @@
+import { Loader } from '@scality/core-ui';
+import { useReducer } from 'react';
 import { useLocation, useParams } from 'react-router';
 import { useTheme } from 'styled-components';
+import { useIAMClient } from '../../IAMProvider';
 import {
+  getListAttachedUserPoliciesQuery,
   getListEntitiesForPolicyQuery,
+  getListGroupsQuery,
+  getListPoliciesQuery,
+  getListRolesQuery,
   getListUsersQuery,
+  getUserListGroupsQuery,
 } from '../../queries';
 import { CustomTabs } from '../../ui-elements/Tabs';
 import { useQueryParams } from '../../utils/hooks';
@@ -14,6 +22,7 @@ import { AttachmentTable, AttachmentTableProps } from './AttachmentTable';
 import {
   AttachableEntity,
   AttachmentOperation,
+  EntityType,
   ResourceType,
 } from './AttachmentTypes';
 
@@ -50,20 +59,35 @@ const AttachmentTableProxy = <
   getInitiallyAttachedEntitesQuery,
   getAttachedEntitesFromResult,
   onAttachmentsOperationsChanged,
+  initialAttachmentOperations,
 }: TableProxyProps<ENTITIES_API_RESPONSE, ATTACHED_ENTITIES_API_RESPONSE>) => {
-  const { data } = useAwsPaginatedEntities(
+  const { data, status } = useAwsPaginatedEntities(
     getInitiallyAttachedEntitesQuery(),
     getAttachedEntitesFromResult,
   );
 
-  if (!data) return <></>;
+  if (status === 'idle' || status === 'loading') {
+    return (
+      <Loader>
+        <div>Loading</div>
+      </Loader>
+    );
+  }
+  if (status === 'error')
+    return (
+      <>
+        An error occured while loading entities, please retry later and if the
+        error persists, contact your support.
+      </>
+    );
   ///TODO handle loading and errors
   return (
     <AttachmentTable
       getAllEntitiesPaginatedQuery={getAllEntitiesPaginatedQuery}
       getEntitiesFromResult={getEntitiesFromResult}
-      initiallyAttachedEntities={data}
+      initiallyAttachedEntities={data || []}
       onAttachmentsOperationsChanged={onAttachmentsOperationsChanged}
+      initialAttachmentOperations={initialAttachmentOperations}
     />
   );
 };
@@ -83,7 +107,24 @@ const AttachmentTabs = ({
   const { pathname } = useLocation();
   const theme = useTheme();
   const queryObject = Object.fromEntries(query.entries());
+  const IAMClient = useIAMClient();
   const { accountName } = useParams<{ accountName: string }>();
+  const [attachmentOperations, setAttachmentOperations] = useReducer(
+    (
+      state: Record<EntityType, AttachmentOperation[]>,
+      action: { type: EntityType; attachmentOperations: AttachmentOperation[] },
+    ) => {
+      const newState = { ...state, [action.type]: action.attachmentOperations };
+      onAttachmentsOperationsChanged(
+        Object.values(newState).reduce(
+          (agg, current) => [...agg, ...current],
+          [],
+        ),
+      );
+      return newState;
+    },
+    { user: [], role: [], policy: [], group: [] },
+  );
   const { backgroundLevel3, backgroundLevel4 } = theme.brand;
   const customTabStyle = {
     inactiveTabColor: backgroundLevel4,
@@ -91,50 +132,132 @@ const AttachmentTabs = ({
     tabContentColor: backgroundLevel3,
     tabLineColor: backgroundLevel4,
   };
+
   return (
     <CustomTabs {...customTabStyle}>
       {resourceType === 'policy' && (
         <CustomTabs.Tab
           label="Users"
           path={pathname}
-          query={{ ...queryObject, tab: 'users' }}
+          query={{ ...queryObject, tab: null }}
+          icon={<i className="fas fa-user" />}
         >
           <AttachmentTableProxy
-            getAllEntitiesPaginatedQuery={() => getListUsersQuery(accountName)}
+            getAllEntitiesPaginatedQuery={() =>
+              getListUsersQuery(accountName, IAMClient)
+            }
             getEntitiesFromResult={(response) => {
               return response.Users.map((user) => {
                 return {
                   name: user.UserName,
-                  arn: user.Arn,
+                  id: user.UserName,
                   type: 'user',
                 };
               });
             }}
             getInitiallyAttachedEntitesQuery={() =>
-              getListEntitiesForPolicyQuery(resourceId)
+              getListEntitiesForPolicyQuery(resourceId, IAMClient)
             }
             getAttachedEntitesFromResult={(response) => {
               return (
                 response.PolicyUsers?.map((user) => {
                   return {
                     name: user.UserName || '',
-                    arn: user.UserName || '', /// TODO think about it tomorow ;orning
+                    id: user.UserName || '',
                     type: 'user',
                   };
                 }) || []
               );
             }}
-            onAttachmentsOperationsChanged={console.log}
+            initialAttachmentOperations={attachmentOperations['user']}
+            onAttachmentsOperationsChanged={(attachmentOperations) =>
+              setAttachmentOperations({ type: 'user', attachmentOperations })
+            }
           />
         </CustomTabs.Tab>
       )}
-      {(resourceType === 'policy' || resourceType === 'user') && (
+      {resourceType === 'policy' && (
         <CustomTabs.Tab
           label="Groups"
           path={pathname}
           query={{ ...queryObject, tab: 'groups' }}
+          icon={<i className="fas fa-users" />}
         >
-          <>Attachment Table</>
+          <AttachmentTableProxy
+            getAllEntitiesPaginatedQuery={() =>
+              getListGroupsQuery(accountName, IAMClient)
+            }
+            getEntitiesFromResult={(response) => {
+              return (
+                response.Groups?.map((group) => {
+                  return {
+                    name: group.GroupName || '',
+                    id: group.GroupName || '',
+                    type: 'group',
+                  };
+                }) || []
+              );
+            }}
+            getInitiallyAttachedEntitesQuery={() =>
+              getListEntitiesForPolicyQuery(resourceId, IAMClient)
+            }
+            getAttachedEntitesFromResult={(response) => {
+              return (
+                response.PolicyGroups?.map((group) => {
+                  return {
+                    name: group.GroupName || '',
+                    id: group.GroupName || '',
+                    type: 'group',
+                  };
+                }) || []
+              );
+            }}
+            initialAttachmentOperations={attachmentOperations['group']}
+            onAttachmentsOperationsChanged={(attachmentOperations) =>
+              setAttachmentOperations({ type: 'group', attachmentOperations })
+            }
+          />
+        </CustomTabs.Tab>
+      )}
+      {resourceType === 'user' && (
+        <CustomTabs.Tab
+          label="Groups"
+          path={pathname}
+          query={{ ...queryObject, tab: null }}
+          icon={<i className="fas fa-users" />}
+        >
+          <AttachmentTableProxy
+            getAllEntitiesPaginatedQuery={() =>
+              getListGroupsQuery(accountName, IAMClient)
+            }
+            getEntitiesFromResult={(response) => {
+              return (
+                response.Groups?.map((group) => {
+                  return {
+                    name: group.GroupName || '',
+                    id: group.GroupName || '',
+                    type: 'group',
+                  };
+                }) || []
+              );
+            }}
+            getInitiallyAttachedEntitesQuery={() =>
+              getUserListGroupsQuery(resourceId, IAMClient)
+            }
+            getAttachedEntitesFromResult={(response) => {
+              return response.Groups.map((group) => {
+                return {
+                  name: group.GroupName,
+                  id: group.GroupName,
+                  type: 'group',
+                };
+              });
+            }}
+            initialAttachmentOperations={attachmentOperations['group']}
+            onAttachmentsOperationsChanged={(attachmentOperations) =>
+              setAttachmentOperations({ type: 'group', attachmentOperations })
+            }
+          />
         </CustomTabs.Tab>
       )}
       {resourceType === 'policy' && (
@@ -142,8 +265,43 @@ const AttachmentTabs = ({
           label="Roles"
           path={pathname}
           query={{ ...queryObject, tab: 'roles' }}
+          icon={<i className="fas fa-hat-cowboy" />}
         >
-          <>Attachment Table</>
+          <AttachmentTableProxy
+            getAllEntitiesPaginatedQuery={() =>
+              getListRolesQuery(accountName, IAMClient)
+            }
+            getEntitiesFromResult={(response) => {
+              return (
+                response.Roles?.map((role) => {
+                  return {
+                    name: role.RoleName || '',
+                    id: role.RoleName || '',
+                    arn: role.Arn,
+                    type: 'role',
+                  };
+                }) || []
+              );
+            }}
+            getInitiallyAttachedEntitesQuery={() =>
+              getListEntitiesForPolicyQuery(resourceId, IAMClient)
+            }
+            getAttachedEntitesFromResult={(response) => {
+              return (
+                response.PolicyRoles?.map((role) => {
+                  return {
+                    name: role.RoleName || '',
+                    id: role.RoleName || '',
+                    type: 'role',
+                  };
+                }) || []
+              );
+            }}
+            initialAttachmentOperations={attachmentOperations['role']}
+            onAttachmentsOperationsChanged={(attachmentOperations) =>
+              setAttachmentOperations({ type: 'role', attachmentOperations })
+            }
+          />
         </CustomTabs.Tab>
       )}
       {resourceType === 'user' && (
@@ -151,8 +309,46 @@ const AttachmentTabs = ({
           label="Policies"
           path={pathname}
           query={{ ...queryObject, tab: 'policies' }}
+          icon={<i className="fas fa-file-signature" />}
         >
-          <>Attachment Table</>
+          <AttachmentTableProxy
+            getAllEntitiesPaginatedQuery={() =>
+              getListPoliciesQuery(accountName, IAMClient)
+            }
+            getEntitiesFromResult={(response) => {
+              return (
+                response.Policies?.map((policy) => {
+                  return {
+                    name: policy.PolicyName || '',
+                    id: policy.Arn || '',
+                    type: 'policy',
+                  };
+                }) || []
+              );
+            }}
+            getInitiallyAttachedEntitesQuery={() =>
+              getListAttachedUserPoliciesQuery(
+                resourceId,
+                accountName,
+                IAMClient,
+              )
+            }
+            getAttachedEntitesFromResult={(response) => {
+              return (
+                response.AttachedPolicies?.map((policy) => {
+                  return {
+                    name: policy.PolicyName || '',
+                    id: policy.PolicyArn || '',
+                    type: 'policy',
+                  };
+                }) || []
+              );
+            }}
+            initialAttachmentOperations={attachmentOperations['policy']}
+            onAttachmentsOperationsChanged={(attachmentOperations) =>
+              setAttachmentOperations({ type: 'policy', attachmentOperations })
+            }
+          />
         </CustomTabs.Tab>
       )}
     </CustomTabs>
diff --git a/src/react/account/iamAttachment/AttachmentTypes.ts b/src/react/account/iamAttachment/AttachmentTypes.ts
index 52c552007..34a7dc693 100644
--- a/src/react/account/iamAttachment/AttachmentTypes.ts
+++ b/src/react/account/iamAttachment/AttachmentTypes.ts
@@ -3,7 +3,7 @@ export type ResourceType = 'policy' | 'user';
 
 export type AttachableEntity = {
   name: string;
-  arn: string;
+  id: string;
   type: EntityType;
 };
 
diff --git a/src/react/account/iamAttachment/Attachments.tsx b/src/react/account/iamAttachment/Attachments.tsx
index 10065e245..70d19f46b 100644
--- a/src/react/account/iamAttachment/Attachments.tsx
+++ b/src/react/account/iamAttachment/Attachments.tsx
@@ -1,22 +1,94 @@
+import { BasicText, EmphaseText, LargerText } from '@scality/core-ui';
+import { Button } from '@scality/core-ui/dist/next';
+import { useState } from 'react';
 import { useParams, useRouteMatch } from 'react-router';
+import styled from 'styled-components';
+import { useCurrentAccount } from '../../DataServiceRoleProvider';
 import { regexArn } from '../../utils/hooks';
-import { ResourceType } from './AttachmentTypes';
+import AttachmentConfirmationModal from './AttachmentConfirmationModal';
+import AttachmentTabs from './AttachmentTabs';
+import { AttachmentOperation, ResourceType } from './AttachmentTypes';
+
+const AttachmentContainer = styled.div`
+  padding-top: 1%;
+  padding-left: 18%;
+  padding-right: 18%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const AttachmentFooterContainer = styled.div`
+  border-top: 1px solid ${(props) => props.theme.brand.backgroundLevel2};
+  margin-top: 3%;
+  padding-top: 1%;
+  padding-left: 1%;
+  padding-right: 1%;
+  margin-left: 17%;
+  margin-right: 17%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const TitleBlock = styled(LargerText)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1rem 0;
+  margin-bottom: 1rem;
+  gap: 2rem;
+  border-bottom: 1px solid ${(props) => props.theme.brand.backgroundLevel2};
+`;
+
+const DescriptiveBlock = styled(BasicText)`
+  margin-bottom: 0.5rem;
+`;
 
 const Attachments = () => {
-  const isAttachToUser = useRouteMatch(
-    '/accounts/:accountName/users/:IAMUserName/attachments',
-  );
   const isAttachToPolicy = useRouteMatch(
     '/accounts/:accountName/policies/:policyArn/attachments',
   );
+  const [attachmentOperations, setAttachmentOperations] = useState<
+    AttachmentOperation[]
+  >([]);
   const resourceType: ResourceType = isAttachToPolicy ? 'policy' : 'user';
   const { policyArn: encodedPolicyArn } = useParams<{ policyArn: string }>();
   const policyArn = decodeURIComponent(encodedPolicyArn);
+  const { account } = useCurrentAccount();
   const { IAMUserName } = useParams<{ IAMUserName: string }>();
 
   const resourceId = resourceType === 'policy' ? policyArn : IAMUserName;
-  const resourceName = regexArn.exec(policyArn)?.groups?.name;
-  return <></>;
+  const resourceName = isAttachToPolicy
+    ? regexArn.exec(policyArn)?.groups?.name || ''
+    : IAMUserName;
+
+  return (
+    <>
+      <AttachmentContainer>
+        <TitleBlock>Attach entities</TitleBlock>
+        <DescriptiveBlock>
+          Select the entities you want to attach or detach to the{' '}
+          {isAttachToPolicy ? 'Policy' : 'User'}:{' '}
+          <EmphaseText>{resourceName}</EmphaseText>
+        </DescriptiveBlock>
+
+        <AttachmentTabs
+          resourceId={resourceId}
+          resourceType={resourceType}
+          onAttachmentsOperationsChanged={setAttachmentOperations}
+        />
+      </AttachmentContainer>
+      <AttachmentFooterContainer>
+        <AttachmentConfirmationModal
+          attachmentOperations={attachmentOperations}
+          resourceId={resourceId}
+          resourceName={resourceName}
+          resourceType={resourceType}
+          redirectUrl={isAttachToPolicy ? `/accounts/${account?.Name}/policies` : `/accounts/${account?.Name}/users`}
+        />
+      </AttachmentFooterContainer>
+    </>
+  );
 };
 
 export default Attachments;
diff --git a/src/react/queries.ts b/src/react/queries.ts
index 7451fc9d3..c4107bb85 100644
--- a/src/react/queries.ts
+++ b/src/react/queries.ts
@@ -76,11 +76,13 @@ export const getUserAccessKeysQuery = (
 
 export const getUserListGroupsQuery = (
   userName: string,
-  IAMClient: IAMClient,
+  IAMClient?: IAMClient | null,
 ) => ({
   queryKey: ['listIAMUserGroups', userName],
-  queryFn: () => IAMClient.listGroupsForUser(userName),
-  enabled: IAMClient !== null,
+  queryFn: () => notFalsyTypeGuard(IAMClient).listGroupsForUser(userName),
+  enabled: IAMClient !== null && IAMClient !== undefined,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
 });
 
 export const getListUsersQuery = (
@@ -119,3 +121,43 @@ export const getListEntitiesForPolicyQuery = (
   refetchOnMount: false,
   refetchOnWindowFocus: false,
 });
+
+export const getListGroupsQuery = (
+  accountName: string,
+  IAMClient?: IAMClient | null,
+) => ({
+  queryKey: ['listGroups', accountName],
+  queryFn: (_ctx: QueryFunctionContext, marker?: string) =>
+    notFalsyTypeGuard(IAMClient).listGroups(1000, marker),
+  staleTime: Infinity,
+  enabled: IAMClient !== null && IAMClient !== undefined,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+});
+
+export const getListRolesQuery = (
+  accountName: string,
+  IAMClient?: IAMClient | null,
+) => ({
+  queryKey: ['listRoles', accountName],
+  queryFn: (_ctx: QueryFunctionContext, marker?: string) =>
+    notFalsyTypeGuard(IAMClient).listRoles(1000, marker),
+  staleTime: Infinity,
+  enabled: IAMClient !== null && IAMClient !== undefined,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+});
+
+export const getListAttachedUserPoliciesQuery = (
+  userName: string,
+  accountName: string,
+  IAMClient?: IAMClient | null,
+) => ({
+  queryKey: ['listAttachedUserPolicies', userName, accountName],
+  queryFn: () =>
+    notFalsyTypeGuard(IAMClient).listAttachedUserPolicies(userName),
+  staleTime: Infinity,
+  enabled: IAMClient !== null && IAMClient !== undefined,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+});
diff --git a/tsconfig.json b/tsconfig.json
index 21fee2eb7..a7a5ed709 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-    "lib": ["es2021", "DOM"],                                   /* Specify library files to be included in the compilation. */
+    "lib": ["es2021", "DOM", "dom.iterable"],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,