-
{formatMessage(messages.description)}
+
+ {Parser(
+ formatMessage(messages.description, {
+ a: (data) =>
+ createExternalLink(data, docsReferences.authorizationWithUsersApiKeyForAgents),
+ }),
+ )}
+
{formatMessage(messages.generateApiKey)}
diff --git a/app/src/pages/inside/profilePage/apiKeys/apiKeysBlock/apiKeysBlock.scss b/app/src/pages/inside/profilePage/apiKeys/apiKeysBlock/apiKeysBlock.scss
index c121f4b43c..f66f551f93 100644
--- a/app/src/pages/inside/profilePage/apiKeys/apiKeysBlock/apiKeysBlock.scss
+++ b/app/src/pages/inside/profilePage/apiKeys/apiKeysBlock/apiKeysBlock.scss
@@ -24,6 +24,17 @@
font-size: 12px;
color: $COLOR--gray-60;
margin-bottom: 24px;
+ line-height: 17px;
+
+ a {
+ color: $COLOR--topaz;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ color: $COLOR--topaz-hover-2;
+ }
+ }
}
.api-keys {
diff --git a/app/src/pages/inside/profilePage/apiKeys/noApiKeysBlock/noApiKeysBlock.jsx b/app/src/pages/inside/profilePage/apiKeys/noApiKeysBlock/noApiKeysBlock.jsx
index 16ea1f2bc2..2c15ce97c6 100644
--- a/app/src/pages/inside/profilePage/apiKeys/noApiKeysBlock/noApiKeysBlock.jsx
+++ b/app/src/pages/inside/profilePage/apiKeys/noApiKeysBlock/noApiKeysBlock.jsx
@@ -20,6 +20,7 @@ import classNames from 'classnames/bind';
import { useDispatch } from 'react-redux';
import { showModalAction } from 'controllers/modal';
import { GhostButton } from 'components/buttons/ghostButton';
+import { docsReferences } from 'common/utils/referenceDictionary';
import styles from './noApiKeysBlock.scss';
const cx = classNames.bind(styles);
@@ -37,6 +38,10 @@ const messages = defineMessages({
defaultMessage:
'In order to provide security for your own domain password, you can use a user key — to verify your account to be able to report with agent.',
},
+ documentation: {
+ id: 'ApiKeys.noApiKeys.documentation',
+ defaultMessage: 'Documentation',
+ },
});
export const NoApiKeysBlock = () => {
@@ -55,6 +60,15 @@ export const NoApiKeysBlock = () => {
{formatMessage(messages.generateApiKey)}