Merge branch 'bugfix/ZKUI-269/fix-account-list-user-and-policies-regr…

…ession' into q/1.6
scality · Oct 10, 2022 · 15d81e5 · 15d81e5
2 parents 808fe89 + 0edc36d
commit 15d81e5
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 74 deletions.
diff --git a/src/react/account/AccountPoliciesList.tsx b/src/react/account/AccountPoliciesList.tsx
@@ -1,11 +1,10 @@
-import { PropsWithChildren, useState } from 'react';
+import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import { formatShortDate } from '../utils';
 import { useIAMClient } from '../IAMProvider';
 import { Icon, Tooltip } from '@scality/core-ui';
-import { SpacedBox } from '@scality/core-ui/dist/components/spacedbox/SpacedBox';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { useMutation, useQuery } from 'react-query';
 import { queryClient } from '../App';
@@ -46,10 +45,11 @@ const EditButton = ({
     policyPath === 'scality-internal/' || !isLatestVersionTheDefaultOne;
 
   return (
-    <Box ml={12}>
+    <Box>
       {isEditPolicyDisabled && (
         <Button
-          style={{ height: spacing.sp24, width: '5rem' }}
+          size="inline"
+          style={{ width: '5rem' }}
           variant="secondary"
           label="View"
           icon={<Icon name="Eye" />}
@@ -76,7 +76,8 @@ const EditButton = ({
       )}
       {!isEditPolicyDisabled && (
         <Button
-          style={{ height: spacing.sp24, width: '5rem' }}
+          size="inline"
+          style={{ width: '5rem' }}
           disabled={
             status === 'idle' ||
             status === 'loading' ||
@@ -121,22 +122,20 @@ const AttachButton = ({
 }) => {
   const history = useHistory();
   return (
-    <SpacedBox ml={12}>
-      <Button
-        style={{ height: spacing.sp24 }}
-        variant="secondary"
-        label="Attach"
-        icon={<Icon name="Link" />}
-        onClick={() =>
-          history.push(
-            `/accounts/${accountName}/policies/${encodeURIComponent(
-              policyArn,
-            )}/attachments`,
-          )
-        }
-        aria-label={`Attach ${policyName}`}
-      />
-    </SpacedBox>
+    <Button
+      size="inline"
+      variant="secondary"
+      label="Attach"
+      icon={<Icon name="Link" />}
+      onClick={() =>
+        history.push(
+          `/accounts/${accountName}/policies/${encodeURIComponent(
+            policyArn,
+          )}/attachments`,
+        )
+      }
+      aria-label={`Attach ${policyName}`}
+    />
   );
 };
 
@@ -150,7 +149,12 @@ const ActionButtons = ({
   const { policyArn, policyName, policyPath, defaultVersionId, attachments } =
     rowValues;
   return (
-    <Box display="flex" marginLeft="auto">
+    <Box
+      gap={spacing.sp12}
+      alignSelf="flex-end"
+      display="flex"
+      alignItems="center"
+    >
       <AttachButton
         policyName={policyName}
         accountName={accountName}
@@ -164,6 +168,7 @@ const ActionButtons = ({
         defaultVersionId={defaultVersionId}
       />
       <CopyButton
+        size="inline"
         textToCopy={policyArn}
         label="ARN"
         variant="outline"
@@ -207,7 +212,7 @@ const DeletePolicyAction = ({
           getListPoliciesQuery(accountName, notFalsyTypeGuard(IAMClient))
             .queryKey,
         ),
-      onError: (error) => {
+      onError: (error: ApiError) => {
         try {
           dispatch(handleClientError(error));
         } catch (err) {
@@ -260,11 +265,15 @@ const AccessPolicyNameCell = ({ rowValues }: { rowValues: InternalPolicy }) => {
       {isInternalPolicy && (
         <Tooltip
           overlay={'This is a predefined Scality Policy'}
-          overlayStyle={{
-            width: '13rem',
-          }}
+          overlayStyle={{ width: '13rem' }}
         >
-          {policyName} <Icon name="Info" size="xs" />
+          {policyName}
+          <Icon
+            name="Info"
+            size="xs"
+            color="buttonSecondary"
+            style={{ marginLeft: spacing.sp16 }}
+          />
         </Tooltip>
       )}
       {!isInternalPolicy && <>{policyName} </>}
@@ -365,13 +374,7 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
       columns={columns}
       additionalHeaders={
         <Button
-          icon={
-            <Icon
-              name="Create-add"
-              color="buttonSecondary"
-              style={{ marginLeft: spacing.sp8 }}
-            />
-          }
+          icon={<Icon name="Create-add" color="textSecondary" />}
           label="Create Policy"
           variant="primary"
           onClick={() => history.push('create-policy')}

diff --git a/src/react/account/AccountUserList.tsx b/src/react/account/AccountUserList.tsx
@@ -38,11 +38,6 @@ type InternalUser = {
   actions: null;
 };
 
-const InlineButton = styled(Button)`
-  height: ${spacing.sp24};
-  margin-left: ${spacing.sp16};
-`;
-
 const AsyncRenderAccessKey = ({ userName }: { userName: string }) => {
   const IAMClient = useIAMClient();
   const history = useHistory();
@@ -89,17 +84,13 @@ const AsyncRenderAccessKey = ({ userName }: { userName: string }) => {
           )}
         </SpacedBox>
       ) : null}
-      <InlineButton
-        icon={<Icon name="Eye" />}
+      <Button
+        size="inline"
+        icon={<Icon name="Eye" color="textSecondary" />}
         variant="secondary"
         onClick={() => history.push(`users/${userName}/access-keys`)}
         type="button"
-        tooltip={{
-          overlayStyle: {
-            width: '14rem',
-          },
-          overlay: 'Checking or creating access keys',
-        }}
+        tooltip={{ overlay: 'Checking or creating access keys' }}
         disabled={userAccessKeyStatus === 'loading'}
       />
     </div>
@@ -113,15 +104,13 @@ const renderAccessKeyComponent = ({ row }) => (
 const EditButton = ({ userName }: { userName: string }) => {
   const history = useHistory();
   return (
-    <SpacedBox ml={12}>
-      <Button
-        style={{ height: spacing.sp24 }}
-        variant="secondary"
-        label="Edit"
-        icon={<Icon name="Pen" />}
-        onClick={() => history.push(`users/${userName}/update-user`)}
-      />
-    </SpacedBox>
+    <Button
+      size="inline"
+      variant="secondary"
+      label="Edit"
+      icon={<Icon name="Pen" color="textSecondary" />}
+      onClick={() => history.push(`users/${userName}/update-user`)}
+    />
   );
 };
 
@@ -134,18 +123,16 @@ const AttachButton = ({
 }) => {
   const history = useHistory();
   return (
-    <SpacedBox ml={12}>
-      <Button
-        style={{ height: spacing.sp24 }}
-        variant="secondary"
-        label="Attach"
-        icon={<Icon name="Link" />}
-        onClick={() =>
-          history.push(`/accounts/${accountName}/users/${userName}/attachments`)
-        }
-        aria-label={`Attach ${userName}`}
-      />
-    </SpacedBox>
+    <Button
+      size="inline"
+      variant="secondary"
+      label="Attach"
+      icon={<Icon name="Link" />}
+      onClick={() =>
+        history.push(`/accounts/${accountName}/users/${userName}/attachments`)
+      }
+      aria-label={`Attach ${userName}`}
+    />
   );
 };
 
@@ -158,10 +145,20 @@ const ActionButtons = ({
 }) => {
   const { arn, userName } = rowValues;
   return (
-    <Box display={'flex'} marginLeft="auto">
+    <Box
+      gap={spacing.sp12}
+      alignSelf="flex-end"
+      display="flex"
+      alignItems="center"
+    >
       <AttachButton userName={userName} accountName={accountName || ''} />
       <EditButton userName={userName} />
-      <CopyButton textToCopy={arn} label="ARN" variant="outline" />
+      <CopyButton
+        textToCopy={arn}
+        label="ARN"
+        variant="outline"
+        size="inline"
+      />
       <DeleteUserAction userName={userName} accountName={accountName} />
     </Box>
   );
@@ -223,8 +220,6 @@ const DeleteUserAction = ({
     },
   );
 
-  const isUserDeletionDisabled =
-    accessKeysResult && accessKeysResult?.length >= 1;
   return (
     <>
       <DeleteConfirmation
@@ -252,7 +247,7 @@ const DeleteUserAction = ({
         onClick={() => {
           setShowModal(true);
         }}
-        variant="statusCritical"
+        variant="danger"
         tooltip={
           accessKeysResult && accessKeysResult?.length >= 1
             ? {
@@ -357,7 +352,7 @@ const AccountUserList = ({ accountName }: { accountName?: string }) => {
       columns={columns}
       additionalHeaders={
         <Button
-          icon={<Icon name="Create-add" />}
+          icon={<Icon name="Create-add" color="textSecondary" />}
           label="Create User"
           variant="primary"
           onClick={() => history.push('create-user')}