EPMRPP-85843 || Add API Key Link to documentation on Profile page (#3587

) * EPMRPP-85843 || Add API Key Link to documentation on Profile page * refactor: create a link using createExternalLink
reportportal · Sep 14, 2023 · 5a36210 · 5a36210
1 parent 6fbaac1
commit 5a36210
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 7 deletions.
diff --git a/app/localization/translated/be.json b/app/localization/translated/be.json
@@ -160,12 +160,13 @@
   "ApiKeyGeneratedModal.header": "Створаны ключ API",
   "ApiKeyGeneratedModal.loaderText": "ГЕНЕРЫРУЮЦЬ",
   "ApiKeyGeneratedModal.successNotification": "Ключ API быў паспяхова скапіраваны",
-  "ApiKeys.ApiKeysBlock.description": "Каб забяспечыць бяспеку пароля вашага ўласнага дамена, вы можаце выкарыстоўваць ключ карыстальніка — каб пацвердзіць свой уліковы запіс і мець магчымасць адпраўляць вынікі пры дапамозе агента.",
+  "ApiKeys.ApiKeysBlock.description": "Каб забяспечыць бяспеку пароля вашага ўласнага дамена, вы можаце выкарыстоўваць ключ карыстальніка — каб пацвердзіць свой уліковы запіс і мець магчымасць увайсці ў сістэму пры дапамозе агента. Больш падрабязную інфармацыю аб ключах API вы можаце прачытаць у <a>Дакументацыі</a>",
   "ApiKeys.ApiKeysBlock.generateButton": "Стварыць ключ API",
   "ApiKeys.ApiKeysBlock.headerDateCol": "створаны",
   "ApiKeys.ApiKeysBlock.headerNameCol": "Назва ключа API",
   "ApiKeys.ApiKeysBlock.revoke": "Адклікаць",
   "ApiKeys.noApiKeys.description": "Каб забяспечыць бяспеку пароля вашага ўласнага дамена, вы можаце выкарыстоўваць ключ карыстальніка — каб пацвердзіць свой уліковы запіс і мець магчымасць адпраўляць вынікі пры дапамозе агента.",
+  "ApiKeys.noApiKeys.documentation": "Дакументацыя",
   "ApiKeys.noApiKeys.generateButton": "Стварыць ключ API",
   "ApiKeys.noApiKeys.header": "Няма ключоў API",
   "ApiPage.title": "Дакументацыя API",

diff --git a/app/localization/translated/ru.json b/app/localization/translated/ru.json
@@ -160,12 +160,13 @@
   "ApiKeyGeneratedModal.header": "Ключ API сгенерирован",
   "ApiKeyGeneratedModal.loaderText": "ГЕНЕРАЦИЯ",
   "ApiKeyGeneratedModal.successNotification": "Ключ API успешно скопирован",
-  "ApiKeys.ApiKeysBlock.description": "Чтобы обеспечить безопасность вашего собственного доменного пароля, вы можете использовать ключ пользователя — чтобы подтвердить свою учетную запись, чтобы иметь возможность отправлять результаты при помощи агента.",
+  "ApiKeys.ApiKeysBlock.description": "Чтобы обеспечить безопасность вашего собственного доменного пароля, вы можете использовать ключ пользователя — чтобы подтвердить свою учетную запись, чтобы иметь возможность войти в систему при помощи агента. Более подробную информацию о ключах API вы можете прочитать в <a>Документации</a>",
   "ApiKeys.ApiKeysBlock.generateButton": "Создать ключ API",
   "ApiKeys.ApiKeysBlock.headerDateCol": "создан",
   "ApiKeys.ApiKeysBlock.headerNameCol": "Имя ключа API",
   "ApiKeys.ApiKeysBlock.revoke": "Отозвать",
   "ApiKeys.noApiKeys.description": "Чтобы обеспечить безопасность вашего собственного доменного пароля, вы можете использовать ключ пользователя — чтобы подтвердить свою учетную запись, чтобы иметь возможность отправлять результаты при помощи агента.",
+  "ApiKeys.noApiKeys.documentation": "Документация",
   "ApiKeys.noApiKeys.generateButton": "Сгенерировать API-ключ",
   "ApiKeys.noApiKeys.header": "Нет ключей API",
   "ApiPage.title": "Документация API",

diff --git a/app/localization/translated/uk.json b/app/localization/translated/uk.json
@@ -160,12 +160,13 @@
   "ApiKeyGeneratedModal.header": "Ключ API створено",
   "ApiKeyGeneratedModal.loaderText": "ГЕНЕРУЮЧИЙ",
   "ApiKeyGeneratedModal.successNotification": "Ключ API успішно скопійовано",
-  "ApiKeys.ApiKeysBlock.description": "Щоб забезпечити безпеку власного пароля домену, ви можете використовувати ключ користувача — щоб підтвердити свій обліковий запис і мати можливість надсилати результати за допомогою агента.",
+  "ApiKeys.ApiKeysBlock.description": "Щоб забезпечити безпеку власного пароля домену, ви можете використовувати ключ користувача — щоб підтвердити свій обліковий запис і мати можливість увійти за допомогою агента. Більш детальну інформацію про ключі API ви можете прочитати в <a>Документації</a>",
   "ApiKeys.ApiKeysBlock.generateButton": "Створити ключ API",
   "ApiKeys.ApiKeysBlock.headerDateCol": "створений",
   "ApiKeys.ApiKeysBlock.headerNameCol": "Назва ключа API",
   "ApiKeys.ApiKeysBlock.revoke": "Відкликати",
   "ApiKeys.noApiKeys.description": "Щоб забезпечити безпеку власного пароля домену, ви можете використовувати ключ користувача — щоб підтвердити свій обліковий запис і мати можливість надсилати результати за допомогою агента.",
+  "ApiKeys.noApiKeys.documentation": "Документація",
   "ApiKeys.noApiKeys.generateButton": "Створити ключ API",
   "ApiKeys.noApiKeys.header": "Немає ключів API",
   "ApiPage.title": "Документація API",

diff --git a/app/localization/translated/zh.json b/app/localization/translated/zh.json
@@ -159,12 +159,13 @@
   "ApiKeyGeneratedModal.header": "API key generated",
   "ApiKeyGeneratedModal.loaderText": "GENERATING",
   "ApiKeyGeneratedModal.successNotification": "API Key has been copied successfully",
-  "ApiKeys.ApiKeysBlock.description": "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.",
+  "ApiKeys.ApiKeysBlock.description": "In order to provide security for your own domain password, you can use a user key — to verify your account to be able to log with agent. More information about API Keys you can read in <a>Documentation</a>",
   "ApiKeys.ApiKeysBlock.generateButton": "Generate API Key",
   "ApiKeys.ApiKeysBlock.headerDateCol": "created",
   "ApiKeys.ApiKeysBlock.headerNameCol": "API key name",
   "ApiKeys.ApiKeysBlock.revoke": "Revoke",
   "ApiKeys.noApiKeys.description": "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.",
+  "ApiKeys.noApiKeys.documentation": "文档",
   "ApiKeys.noApiKeys.generateButton": "Generate API Key",
   "ApiKeys.noApiKeys.header": "No API Keys",
   "ApiPage.title": "接口文档",

diff --git a/app/src/common/utils/referenceDictionary.js b/app/src/common/utils/referenceDictionary.js
@@ -45,4 +45,6 @@ export const docsReferences = {
     'https://reportportal.io/docs/reportportal-configuration/ProjectConfiguration#e-mail-notifications',
   emptyStateIntegrationsDocs:
     'https://reportportal.io/docs/reportportal-configuration/IntegrationViaPlugin',
+  authorizationWithUsersApiKeyForAgents:
+    'https://reportportal.io/docs/reportportal-configuration/HowToGetAnAccessTokenInReportPortal/#2-authorization-with-users-api-key-for-agents',
 };
diff --git a/app/src/pages/inside/profilePage/apiKeys/apiKeysBlock/apiKeysBlock.jsx b/app/src/pages/inside/profilePage/apiKeys/apiKeysBlock/apiKeysBlock.jsx
@@ -15,15 +15,17 @@
  */
 
 import React from 'react';
+import Parser from 'html-react-parser';
 import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { useDispatch } from 'react-redux';
 import { showModalAction } from 'controllers/modal';
 import { BlockContainerBody, BlockContainerHeader } from 'pages/inside/profilePage/blockContainer';
 import { ScrollWrapper } from 'components/main/scrollWrapper';
-import { daysFromNow } from 'common/utils';
+import { daysFromNow, createExternalLink } from 'common/utils';
 import { GhostButton } from 'components/buttons/ghostButton';
+import { docsReferences } from 'common/utils/referenceDictionary';
 import styles from './apiKeysBlock.scss';
 
 const cx = classNames.bind(styles);
@@ -35,7 +37,7 @@ const messages = defineMessages({
   description: {
     id: 'ApiKeys.ApiKeysBlock.description',
     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.',
+      'In order to provide security for your own domain password, you can use a user key — to verify your account to be able to log with agent. More information about API Keys you can read in <a>Documentation</a>',
   },
   headerNameCol: {
     id: 'ApiKeys.ApiKeysBlock.headerNameCol',
@@ -60,7 +62,14 @@ export const ApiKeysBlock = ({ apiKeys }) => {
 
   return (
     <div className={cx('api-keys-block')}>
-      <div className={cx('description')}>{formatMessage(messages.description)}</div>
+      <div className={cx('description')}>
+        {Parser(
+          formatMessage(messages.description, {
+            a: (data) =>
+              createExternalLink(data, docsReferences.authorizationWithUsersApiKeyForAgents),
+          }),
+        )}
+      </div>
       <GhostButton onClick={onGenerateClick} title={formatMessage(messages.generateApiKey)}>
         {formatMessage(messages.generateApiKey)}
       </GhostButton>

diff --git 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
@@ -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)}
         </GhostButton>
       </div>
+      <div className={cx('documentation')} title={formatMessage(messages.documentation)}>
+        <a
+          className={cx('documentation-link')}
+          href={docsReferences.authorizationWithUsersApiKeyForAgents}
+          target="_blank"
+        >
+          {formatMessage(messages.documentation)}
+        </a>
+      </div>
     </div>
   );
 };
diff --git a/app/src/pages/inside/profilePage/apiKeys/noApiKeysBlock/noApiKeysBlock.scss b/app/src/pages/inside/profilePage/apiKeys/noApiKeysBlock/noApiKeysBlock.scss
@@ -47,3 +47,17 @@
   width: fit-content;
   margin: 0 auto 24px;
 }
+
+.documentation {
+  width: fit-content;
+  margin: 0 auto 24px;
+}
+
+.documentation-link {
+  font-family: $FONT-REGULAR;
+  font-size: 13px;
+  line-height: 18px;
+  text-align: center;
+  color: $COLOR--topaz;
+  text-decoration: none;
+}