add 'user-managed' label to the rule details page for the api keys cr…

…eated by users (#155699) Resolves: #154581 This PR adds 'user-managed' label next to the API key owner name when the API key is created by the user. <img width="813" alt="Screenshot 2023-05-06 at 19 02 08" src="https://user-images.githubusercontent.com/92688503/236637767-d0c0ee00-1314-4824-b97a-b7bdf1b7f43b.png">
elastic · May 17, 2023 · 83379ec · 83379ec
1 parent 554edd1
commit 83379ec
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/rule_api/common_transformations.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/rule_api/common_transformations.ts
@@ -63,6 +63,7 @@ export const transformRule: RewriteRequestCase<Rule> = ({
   created_at: createdAt,
   updated_at: updatedAt,
   api_key_owner: apiKeyOwner,
+  api_key_created_by_user: apiKeyCreatedByUser,
   notify_when: notifyWhen,
   mute_all: muteAll,
   muted_alert_ids: mutedInstanceIds,
@@ -95,6 +96,7 @@ export const transformRule: RewriteRequestCase<Rule> = ({
   activeSnoozes,
   ...(lastRun ? { lastRun: transformLastRun(lastRun) } : {}),
   ...(nextRun ? { nextRun } : {}),
+  ...(apiKeyCreatedByUser !== undefined ? { apiKeyCreatedByUser } : {}),
   ...rest,
 });
 

diff --git a/...gers_actions_ui/public/application/sections/rule_details/components/rule_details.test.tsx b/...gers_actions_ui/public/application/sections/rule_details/components/rule_details.test.tsx
@@ -22,8 +22,6 @@ import {
 import { useKibana } from '../../../../common/lib/kibana';
 import { ruleTypeRegistryMock } from '../../../rule_type_registry.mock';
 
-export const DATE_9999 = '9999-12-31T12:34:56.789Z';
-
 jest.mock('../../../../common/lib/kibana');
 
 jest.mock('../../../../common/lib/config_api', () => ({
@@ -110,12 +108,21 @@ describe('rule_details', () => {
     });
 
     it('renders the API key owner badge when user can manage API keys', () => {
-      const rule = mockRule();
-      expect(
-        shallow(
-          <RuleDetails rule={rule} ruleType={ruleType} actionTypes={[]} {...mockRuleApis} />
-        ).find(<EuiBadge>{rule.apiKeyOwner}</EuiBadge>)
-      ).toBeTruthy();
+      const rule = mockRule({ apiKeyOwner: 'elastic' });
+      const wrapper = mountWithIntl(
+        <RuleDetails rule={rule} ruleType={ruleType} actionTypes={[]} {...mockRuleApis} />
+      );
+      expect(wrapper.find('[data-test-subj="apiKeyOwnerLabel"]').first().text()).toBe('elastic');
+    });
+
+    it('renders the user-managed icon when apiKeyCreatedByUser is true', async () => {
+      const rule = mockRule({ apiKeyOwner: 'elastic', apiKeyCreatedByUser: true });
+      const wrapper = mountWithIntl(
+        <RuleDetails rule={rule} ruleType={ruleType} actionTypes={[]} {...mockRuleApis} />
+      );
+      expect(wrapper.find('[data-test-subj="apiKeyOwnerLabel"]').first().text()).toBe(
+        'elastic Info'
+      );
     });
 
     it(`doesn't render the API key owner badge when user can't manage API keys`, () => {
@@ -819,6 +826,7 @@ describe('rule_details', () => {
         lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
       },
       revision: 0,
+      apiKeyCreatedByUser: false,
       ...overloads,
     };
   }

diff --git a/.../triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx b/.../triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx
@@ -21,6 +21,7 @@ import {
   EuiButton,
   EuiIcon,
   EuiLink,
+  EuiIconTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { toMountPoint } from '@kbn/kibana-react-plugin/public';
@@ -367,6 +368,20 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
                   <EuiFlexItem grow={false}>
                     <EuiText size="s" data-test-subj="apiKeyOwnerLabel">
                       <b>{rule.apiKeyOwner}</b>
+                      {rule.apiKeyCreatedByUser ? (
+                        <>
+                          &nbsp;
+                          <EuiIconTip
+                            position="right"
+                            content={i18n.translate(
+                              'xpack.triggersActionsUI.sections.ruleDetails.userManagedApikey',
+                              {
+                                defaultMessage: 'This rule is associated with an API key.',
+                              }
+                            )}
+                          />
+                        </>
+                      ) : null}
                     </EuiText>
                   </EuiFlexItem>
                 </EuiFlexGroup>