Added ability to create API keys

src/plugins/kibana_react/public/code_editor/code_editor.tsx

@@ -9,7 +9,6 @@
 import React from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import MonacoEditor from 'react-monaco-editor';
-
 import { monaco } from '@kbn/monaco';
 
 import { LIGHT_THEME, DARK_THEME } from './editor_theme';
@@ -152,20 +151,33 @@ export class CodeEditor extends React.Component<Props, {}> {
     const { languageId, value, onChange, width, height, options } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <MonacoEditor
           theme="euiColors"
           language={languageId}
           value={value}
           onChange={onChange}
-          editorWillMount={this._editorWillMount}
-          editorDidMount={this._editorDidMount}
           width={width}
           height={height}
-          options={options}
+          editorWillMount={this._editorWillMount}
+          editorDidMount={this._editorDidMount}
+          options={{
+            renderLineHighlight: 'none',
+            scrollBeyondLastLine: false,
+            minimap: {
+              enabled: false,
+            },
+            scrollbar: {
+              useShadows: false,
+            },
+            wordBasedSuggestions: false,
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
+            ...options,
+          }}
         />
         <ReactResizeDetector handleWidth handleHeight onResize={this._updateDimensions} />
-      </React.Fragment>
+      </>
     );
   }
 

src/plugins/kibana_react/public/code_editor/editor_theme.ts

@@ -87,7 +87,7 @@ export function createTheme(
     ],
     colors: {
       'editor.foreground': euiTheme.euiColorDarkestShade,
-      'editor.background': euiTheme.euiFormBackgroundColor,
+      'editor.background': '#00000000', // transparent
       'editorLineNumber.foreground': euiTheme.euiColorDarkShade,
       'editorLineNumber.activeForeground': euiTheme.euiColorDarkShade,
       'editorIndentGuide.background': euiTheme.euiColorLightShade,

src/plugins/kibana_react/public/code_editor/index.tsx

@@ -7,23 +7,51 @@
  */
 
 import React from 'react';
-import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
+import {
+  EuiDelayRender,
+  EuiErrorBoundary,
+  EuiLoadingContent,
+  EuiFormControlLayout,
+} from '@elastic/eui';
+import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
+import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
 import { useUiSetting } from '../ui_settings';
 import type { Props } from './code_editor';
 
 const LazyBaseEditor = React.lazy(() => import('./code_editor'));
 
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiLoadingContent lines={3} />
-  </EuiDelayRender>
-);
-
 export const CodeEditor: React.FunctionComponent<Props> = (props) => {
+  const { width, height, options } = props;
+
   const darkMode = useUiSetting<boolean>('theme:darkMode');
+  const theme = darkMode ? euiThemeDark : euiThemeLight;
+  const style = {
+    width,
+    height,
+    backgroundColor: options?.readOnly
+      ? theme.euiFormBackgroundReadOnlyColor
+      : theme.euiFormBackgroundColor,
+  };
+
   return (
-    <React.Suspense fallback={<Fallback />}>
-      <LazyBaseEditor {...props} useDarkTheme={darkMode} />
-    </React.Suspense>
+    <EuiErrorBoundary>
+      <React.Suspense
+        fallback={
+          <EuiFormControlLayout
+            append={<div hidden />}
+            style={{ ...style, padding: theme.paddingSizes.m }}
+            readOnly={options?.readOnly}
+          >
+            <EuiDelayRender>
+              <EuiLoadingContent />
+            </EuiDelayRender>
+          </EuiFormControlLayout>
+        }
+      >
+        <EuiFormControlLayout append={<div hidden />} style={style} readOnly={options?.readOnly}>
+          <LazyBaseEditor {...props} useDarkTheme={darkMode} />
+        </EuiFormControlLayout>
+      </React.Suspense>
+    </EuiErrorBoundary>
   );
 };

x-pack/plugins/security/common/model/api_key.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import type { Role } from './role';
+
 export interface ApiKey {
   id: string;
   name: string;
@@ -19,3 +21,5 @@ export interface ApiKeyToInvalidate {
   id: string;
   name: string;
 }
+
+export type RoleDescriptors = Record<string, Role['elasticsearch']>;

x-pack/plugins/security/common/model/index.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-export { ApiKey, ApiKeyToInvalidate } from './api_key';
+export { ApiKey, ApiKeyToInvalidate, RoleDescriptors } from './api_key';
 export { User, EditUser, getUserDisplayName } from './user';
 export { AuthenticatedUser, canUserChangePassword } from './authenticated_user';
 export { AuthenticationProvider, shouldProviderUseLoginForm } from './authentication_provider';

x-pack/plugins/security/public/components/breadcrumb.tsx

@@ -10,6 +10,7 @@ import type { FunctionComponent } from 'react';
 import React, { createContext, useContext, useEffect, useRef } from 'react';
 
 import { useKibana } from '../../../../../src/plugins/kibana_react/public';
+import type { ChromeStart } from '../../../../../src/core/public';
 
 interface BreadcrumbsContext {
   parents: BreadcrumbProps[];
@@ -81,8 +82,8 @@ export const BreadcrumbsProvider: FunctionComponent<BreadcrumbsProviderProps> =
     if (onChange) {
       onChange(breadcrumbs);
     } else if (services.chrome) {
-      services.chrome.setBreadcrumbs(breadcrumbs);
-      services.chrome.docTitle.change(getDocTitle(breadcrumbs));
+      const setBreadcrumbs = createBreadcrumbsChangeHandler(services.chrome);
+      setBreadcrumbs(breadcrumbs);
     }
   };
 
@@ -138,3 +139,17 @@ export function getDocTitle(breadcrumbs: BreadcrumbProps[], maxBreadcrumbs = 2)
     .reverse()
     .map(({ text }) => text);
 }
+
+export function createBreadcrumbsChangeHandler(
+  chrome: ChromeStart,
+  setBreadcrumbs = chrome.setBreadcrumbs
+) {
+  return (breadcrumbs: BreadcrumbProps[]) => {
+    setBreadcrumbs(breadcrumbs);
+    if (breadcrumbs.length === 0) {
+      chrome.docTitle.reset();
+    } else {
+      chrome.docTitle.change(getDocTitle(breadcrumbs));
+    }
+  };
+}

x-pack/plugins/security/public/components/code_field.tsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { FunctionComponent, ReactElement } from 'react';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import type { EuiFieldTextProps } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiCopy,
+  EuiFormControlLayout,
+  EuiHorizontalRule,
+  EuiPopover,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { useTheme } from './use_theme';
+
+export interface CodeFieldProps extends Omit<EuiFieldTextProps, 'append'> {
+  value: string;
+}
+
+export const CodeField: FunctionComponent<CodeFieldProps> = (props) => {
+  const theme = useTheme();
+
+  return (
+    <EuiFormControlLayout
+      {...props}
+      append={
+        <EuiCopy textToCopy={props.value}>
+          {(copyText) => (
+            <EuiButtonIcon
+              aria-label={i18n.translate('xpack.security.copyCodeField.copyButton', {
+                defaultMessage: 'Copy code',
+              })}
+              iconType="copyClipboard"
+              color="success"
+              style={{ backgroundColor: 'transparent' }}
+              onClick={copyText}
+            />
+          )}
+        </EuiCopy>
+      }
+      style={{ backgroundColor: 'transparent' }}
+      readOnly
+    >
+      <input
+        type="text"
+        className="euiFieldText euiFieldText--inGroup"
+        value={props.value}
+        style={{ fontFamily: theme.euiCodeFontFamily, fontSize: theme.euiFontSizeXS }}
+        onFocus={(event) => event.currentTarget.select()}
+        readOnly
+      />
+    </EuiFormControlLayout>
+  );
+};
+
+export interface SelectableCodeFieldOption {
+  key: string;
+  value: string;
+  icon?: string;
+  label: string;
+  description?: string;
+}
+
+export interface SelectableCodeFieldProps extends Omit<EuiFieldTextProps, 'value' | 'prepend'> {
+  options: Array<SelectableCodeFieldOption>;
+}
+
+export const SelectableCodeField: FunctionComponent<SelectableCodeFieldProps> = (props) => {
+  const { options, ...rest } = props;
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const [selectedOption, setSelectedOption] = React.useState<SelectableCodeFieldOption>(options[0]);
+  const selectedIndex = options.findIndex((c) => c.key === selectedOption.key);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  return (
+    <CodeField
+      {...rest}
+      prepend={
+        <EuiPopover
+          button={
+            <EuiButtonEmpty
+              size="xs"
+              iconType="arrowDown"
+              iconSide="right"
+              color="success"
+              onClick={() => {
+                console.log('toggle');
+                setIsPopoverOpen(!isPopoverOpen);
+              }}
+            >
+              {selectedOption.label}
+            </EuiButtonEmpty>
+          }
+          isOpen={isPopoverOpen}
+          panelPaddingSize="none"
+          closePopover={closePopover}
+        >
+          <EuiContextMenuPanel
+            initialFocusedItemIndex={selectedIndex * 2}
+            items={options.reduce<Array<ReactElement>>((accumulator, option, i) => {
+              accumulator.push(
+                <EuiContextMenuItem
+                  key={option.key}
+                  icon={option.icon}
+                  layoutAlign="top"
+                  onClick={() => {
+                    closePopover();
+                    setSelectedOption(option);
+                  }}
+                >
+                  <strong>{option.label}</strong>
+                  <EuiSpacer size="xs" />
+                  <EuiText size="s" color="subdued">
+                    <p>{option.description}</p>
+                  </EuiText>
+                </EuiContextMenuItem>
+              );
+              if (i < options.length - 1) {
+                accumulator.push(
+                  <EuiHorizontalRule key={`${option.key}-seperator`} margin="none" />
+                );
+              }
+              return accumulator;
+            }, [])}
+          />
+        </EuiPopover>
+      }
+      value={selectedOption.value}
+    />
+  );
+};