Account Management: Create API keys

[thomheymann]

Summary

This PR adds the ability to manage and create API keys directly from your user profile.

The account management page has been slightly redesigned with user avatar and tabs to cater for the new API keys section.

Empty Prompt

Authorisation error

Disabled error

Unknown error

Create API key form

API key successfully created

Invalidate API key confirmation

Implementation

• Updated react-use dependency since types in previous version where broken
• Use of context to access core services and router history (useKibana and useHistory) instead of manually passing these down the render tree
• Use of React Suspense instead of blocking rendering until dependencies have loaded
• Created Breadcrumb component that automatically sets breadcrumbs and page title based on render tree
• Added simple form hooks to manage state for inline validation (useForm, useSubmitHandler and useInlineValidation)
• ownFocus functionality in EuiFlyout is broken so had to render inside a portal

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[legrego]

I wanted to leave some quick feedback so you had something to look at in the meantime. I need to caveat this review by saying I haven't actually run this locally yet.

Overall this is looking great! I love seeing more "modern" approaches to React development in our codebase, and I think some of the abstractions you've come up with here have a lot of potential for reuse in other areas of the security plugin.

I also really like your attention to detail in the UI here. This is going to be really slick!

[legrego]

@streamich any concerns with updating react-use from 13.27 to 15.3?

[legrego]

Let's chat quick about this logic tomorrow. I have a couple of ideas that might simplify/standardize things a bit

[thomheymann]

So I've just noticed that the class you recommended me using is server-side code: x-pack/plugins/security/server/authentication/api_keys so not sure it's expected to be used on the client.

The class also requires a logger and cluster client instance, non of which I have access to in the browser so I will keep this simple for now and use a functional approach directly in the component source.

On top of that I can't even re-use the logic of the function itself as the error object has a different schema and I only get statusCode and message through in the error body but not the disabled features property.

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[legrego]

A bulk of the increase in bundle size is attributed to the introduction of react-use:

I don't know if this is the "correct" approach, but in my local testing, changing the import style to reference the necessary functions dropped the bundle size down significantly:

diff --git a/x-pack/plugins/security/public/account_management/api_keys_page/api_keys_page.tsx b/x-pack/plugins/security/public/account_management/api_keys_page/api_keys_page.tsx
index 7f70ab228cb..81ebf21ba97 100644
--- a/x-pack/plugins/security/public/account_management/api_keys_page/api_keys_page.tsx
+++ b/x-pack/plugins/security/public/account_management/api_keys_page/api_keys_page.tsx
@@ -6,7 +6,8 @@
 
 import React, { FunctionComponent, useState } from 'react';
 import { Route, useHistory } from 'react-router-dom';
-import { useAsyncFn, useMount } from 'react-use';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
+import useMount from 'react-use/lib/useMount';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';

[legrego]

Sorry for not including this piece in the initial review: I think we should add a search bar to this page, to help folks filter down the list of API Keys. Many users will only have a handful of API Keys, so search won't be terribly useful for them. However, users who are responsible for setting up the SIEM Detection engine, or who generally take advantage of Alerting could find themselves with many API Keys to manage, and paging through the list without a search function would be tedious:

Bonus points if we support bulk-invalidation, but I consider this outside the scope of your PR

---

I also think it'd be worthwhile to add a couple of end-to-end tests ("functional tests" in Kibana's parlance) to verify the basic functionality of viewing, creating, and invalidating your API Keys. I can help you get acquainted with the functional test runner so you're not stumbling through this part blindly.

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[legrego]

We had discussed adding a link or button from the Stack Management screen -- currently it sends you to Dev Tools instead. Can we change this to link to your new form?

[legrego]

LGTM! ❤️

[streamich]

AppArch changes LGTM.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 16848fb

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
ml	1243	1248	+5
security	469	486	+17
total			+22

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
apm	3.1MB	3.1MB	+156.0B
enterpriseSearch	682.7KB	682.7KB	-1.0B
infra	2.5MB	2.5MB	+264.0B
ml	6.7MB	6.7MB	+1.5KB
security	784.3KB	830.5KB	+46.2KB
transform	1.0MB	1.0MB	+34.0B
total			+48.2KB

Distributable file count

id	before	after	diff
default	42777	43451	+674
oss	22459	23129	+670

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
globalSearchBar	28.5KB	28.7KB	+155.0B
kibanaReact	131.9KB	132.5KB	+640.0B
security	162.4KB	173.8KB	+11.4KB
upgradeAssistant	74.5KB	74.5KB	-1.0B
total			+12.2KB

Unknown metric groups

@kbn/ui-shared-deps asset size

id	before	after	diff
kbn-ui-shared-deps.js	4.8MB	4.8MB	+729.0B

async chunk count

id	before	after	diff
security	18	19	+1

History

• 💚 Build #87101 succeeded 9f36566
• 💚 Build #87027 succeeded fe64fd9
• 💔 Build #87021 failed aeb0662
• 💚 Build #86809 succeeded dad4664
• 💔 Build #86723 failed 4f50010

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[thomheymann]

Closing this since API keys are not attached to a user account so don't belong in the profile page as originally thought.

[bytebilly]

This is what I think could be a good first iteration for this issue:

• Users can create a new API key in the existing Kibana view
• Users must specify a name for the new API key
• On success, show id and secret to the user, warning this is not retrievable again in the future

Possible additional features that can be included or postponed to a later release:

• Users can specify an expiration date
• On create, show also the base64 encoded string and a button to copy to clipboard

What do you think?

[jportner]

• On create, show also the base64 encoded string and a button to copy to clipboard

Once we figure out where we want to put API key management,I think this would be good to include in the MVP as well. It should be easy for us to add, and it's a common pain point for users (who can sometimes encode the string incorrectly)