diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DefaultButton/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DefaultButton/index.js
new file mode 100644
index 0000000000..fe0e0ae91e
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+};
+
+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;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/ReadButton/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/ReadButton/index.js
new file mode 100644
index 0000000000..2991407fe1
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+ReadButton.propTypes = {
+ tokenName: PropTypes.string.isRequired,
+ tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default ReadButton;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js
index 0c5a77ab5e..f781e03543 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js
+++ b/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 { 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};
- }
- }
- }
-`;
+import DefaultButton from '../DefaultButton';
const UpdateButton = ({ tokenName, tokenId }) => {
- const { formatMessage } = useIntl();
- const {
- location: { pathname },
- } = useHistory();
-
return (
-
+
-
+
);
};
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js
index 1e4a6ce6ad..fce83eced6 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js
+++ b/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
{canUpdate && }
+ {!canUpdate && canRead && (
+
+ )}
{canDelete && (
{},
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,
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js
index b8d5cff399..6add5886b4 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js
+++ b/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)}
>
)}
|