ZKUI-184: UI, UX and style review

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",

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() {

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 />

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}>

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',

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} />