add the read icon to see the read view with enabled fields

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DefaultButton/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from '@strapi/helper-plugin';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
+const MESSAGES_MAP = {
+  edit: {
+    id: 'app.component.table.edit',
+    defaultMessage: 'Edit {target}',
+  },
+  read: {
+    id: 'app.component.table.read',
+    defaultMessage: 'Read {target}',
+  },
+};
+
+const LinkStyled = styled(Link)`
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+
+const DefaultButton = ({ tokenName, tokenId, buttonType, children }) => {
+  const { formatMessage } = useIntl();
+  const {
+    location: { pathname },
+  } = useHistory();
+
+  return (
+    <LinkStyled
+      to={`${pathname}/${tokenId}`}
+      title={formatMessage(MESSAGES_MAP[buttonType], { target: `${tokenName}` })}
+    >
+      {children}
+    </LinkStyled>
+  );
+};
+
+DefaultButton.propTypes = {
+  tokenName: PropTypes.string.isRequired,
+  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  buttonType: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+DefaultButton.defaultProps = {
+  buttonType: 'edit',
+};
+
+export default DefaultButton;

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/ReadButton/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Eye from '@strapi/icons/Eye';
+import PropTypes from 'prop-types';
+import DefaultButton from '../DefaultButton';
+
+const ReadButton = ({ tokenName, tokenId }) => {
+  return (
+    <DefaultButton tokenName={tokenName} tokenId={tokenId}>
+      <Eye />
+    </DefaultButton>
+  );
+};
+
+ReadButton.propTypes = {
+  tokenName: PropTypes.string.isRequired,
+  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default ReadButton;

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js

@@ -1,46 +1,13 @@
 import React from 'react';
 import Pencil from '@strapi/icons/Pencil';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Link } from '@strapi/helper-plugin';
+import DefaultButton from '../DefaultButton';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-
-const LinkUpdate = styled(Link)`
-  svg {
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral800};
-      }
-    }
-  }
-`;
 
 const UpdateButton = ({ tokenName, tokenId }) => {
-  const { formatMessage } = useIntl();
-  const {
-    location: { pathname },
-  } = useHistory();
-
   return (
-    <LinkUpdate
+    <DefaultButton tokenName={tokenName} tokenId={tokenId}>
-      to={`${pathname}/${tokenId}`}
-      title={formatMessage(
-        {
-          id: 'app.component.table.edit',
-          defaultMessage: 'Edit {target}',
-        },
-        { target: `${tokenName}` }
-      )}
-    >
       <Pencil />
-    </LinkUpdate>
+    </DefaultButton>
   );
 };
 

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js

@@ -14,8 +14,9 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import DeleteButton from './DeleteButton';
 import UpdateButton from './UpdateButton';
+import ReadButton from './ReadButton';
 
-const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows }) => {
+const TableRows = ({ canDelete, canUpdate, canRead, onClickDelete, withBulkActions, rows }) => {
   const { formatMessage } = useIntl();
   const [{ query }] = useQueryParams();
   const [, sortOrder] = query.sort.split(':');
@@ -73,6 +74,9 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
               <Td>
                 <Flex justifyContent="end">
                   {canUpdate && <UpdateButton tokenName={apiToken.name} tokenId={apiToken.id} />}
+                  {!canUpdate && canRead && (
+                    <ReadButton tokenName={apiToken.name} tokenId={apiToken.id} />
+                  )}
                   {canDelete && (
                     <DeleteButton
                       tokenName={apiToken.name}
@@ -92,6 +96,7 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
 TableRows.defaultProps = {
   canDelete: false,
   canUpdate: false,
+  canRead: false,
   onClickDelete: () => {},
   rows: [],
   withBulkActions: false,
@@ -100,6 +105,7 @@ TableRows.defaultProps = {
 TableRows.propTypes = {
   canDelete: PropTypes.bool,
   canUpdate: PropTypes.bool,
+  canRead: PropTypes.bool,
   onClickDelete: PropTypes.func,
   rows: PropTypes.array,
   withBulkActions: PropTypes.bool,

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js

@@ -135,15 +135,16 @@ const ApiTokenListView = () => {
             headers={tableHeaders}
             contentType="api-tokens"
             rows={apiTokens}
-            withBulkActions={canDelete || canUpdate}
+            withBulkActions={canDelete || canUpdate || canRead}
             isLoading={isLoading}
             onConfirmDelete={id => deleteMutation.mutateAsync(id)}
           >
             <TableRows
+              canRead={canRead}
               canDelete={canDelete}
               canUpdate={canUpdate}
               rows={apiTokens}
-              withBulkActions={canDelete || canUpdate}
+              withBulkActions={canDelete || canUpdate || canRead}
             />
           </DynamicTable>
         )}