[Search][Onboarding] api-key plugin

.github/CODEOWNERS

@@ -748,6 +748,7 @@ packages/kbn-search-errors @elastic/kibana-data-discovery
 examples/search_examples @elastic/kibana-data-discovery
 x-pack/plugins/search_homepage @elastic/search-kibana
 packages/kbn-search-index-documents @elastic/search-kibana
+x-pack/plugins/search_api_keys @elastic/search-kibana
 x-pack/plugins/search_indices @elastic/search-kibana
 x-pack/plugins/search_inference_endpoints @elastic/search-kibana
 x-pack/plugins/search_notebooks @elastic/search-kibana

package.json

@@ -757,6 +757,7 @@
     "@kbn/screenshotting-example-plugin": "link:x-pack/examples/screenshotting_example",
     "@kbn/screenshotting-plugin": "link:x-pack/plugins/screenshotting",
     "@kbn/screenshotting-server": "link:packages/kbn-screenshotting-server",
+    "@kbn/search-api-keys": "link:x-pack/plugins/search_api_keys",
     "@kbn/search-api-panels": "link:packages/kbn-search-api-panels",
     "@kbn/search-assistant": "link:x-pack/plugins/search_assistant",
     "@kbn/search-connectors": "link:packages/kbn-search-connectors",

tsconfig.base.json

@@ -1474,6 +1474,8 @@
       "@kbn/screenshotting-plugin/*": ["x-pack/plugins/screenshotting/*"],
       "@kbn/screenshotting-server": ["packages/kbn-screenshotting-server"],
       "@kbn/screenshotting-server/*": ["packages/kbn-screenshotting-server/*"],
+      "@kbn/search-api-keys": ["x-pack/plugins/search_api_keys"],
+      "@kbn/search-api-keys/*": ["x-pack/plugins/search_api_keys/*"],
       "@kbn/search-api-panels": ["packages/kbn-search-api-panels"],
       "@kbn/search-api-panels/*": ["packages/kbn-search-api-panels/*"],
       "@kbn/search-assistant": ["x-pack/plugins/search_assistant"],

x-pack/.i18nrc.json

@@ -104,6 +104,7 @@
     "xpack.screenshotting": "plugins/screenshotting",
     "xpack.searchHomepage": "plugins/search_homepage",
     "xpack.searchIndices": "plugins/search_indices",
+    "xpack.searchApiKeys": "plugins/search_api_keys",
     "xpack.searchNotebooks": "plugins/search_notebooks",
     "xpack.searchPlayground": "plugins/search_playground",
     "xpack.searchInferenceEndpoints": "plugins/search_inference_endpoints",

x-pack/plugins/search_api_keys/README.md

@@ -0,0 +1,3 @@
+# Search API Keys
+
+The Search API Keys plugin is a shared components and utilities to simplify managing the API Keys experience for elasticsearch users across stack and serverless search solutions.

x-pack/plugins/search_api_keys/common/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export const PLUGIN_ID = 'searchApiKeys';
+export const PLUGIN_NAME = 'searchApiKeys';
+export const PLUGIN_PATH = '/app/api_key';

x-pack/plugins/search_api_keys/common/types.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+export enum APIRoutes {
+  API_KEYS = '/internal/search_api_keys',
+  API_KEY_VALIDITY = '/internal/search_api_keys/validity',
+}
+
+export interface APIKey {
+  id: string;
+  name: string;
+  expiration?: number;
+  invalidated?: boolean;
+}
+
+export interface APIKeyCreationResponse extends Pick<APIKey, 'id' | 'name' | 'expiration'> {
+  api_key: string;
+  encoded: string;
+}
+
+export type GetApiKeyResponse = APIKey;

x-pack/plugins/search_api_keys/jest.config.js

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/x-pack/plugins/search_playground'],
+  coverageDirectory: '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/search_playground',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: ['<rootDir>/x-pack/plugins/search_playground/{public,server}/**/*.{ts,tsx}'],
+};

x-pack/plugins/search_api_keys/kibana.jsonc

@@ -0,0 +1,23 @@
+{
+  "type": "plugin",
+  "id": "@kbn/search-api-keys",
+  "owner": "@elastic/search-kibana",
+  "plugin": {
+    "id": "searchApiKeys",
+    "server": true,
+    "browser": true,
+    "configPath": [
+      "xpack",
+      "searchApiKeys"
+    ],
+    "requiredPlugins": [
+      "kibanaReact",
+    ],
+    "optionalPlugins": [
+      "cloud",
+      "console",
+      "usageCollection",
+    ],
+    "requiredBundles": []
+  }
+}

x-pack/plugins/search_api_keys/public/components/api_key_flyout_wrapper.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 { ApiKeyFlyout } from '@kbn/security-api-key-management';
+import React from 'react';
+import { useCurrentUser } from '../hooks/use_current_user';
+
+interface ApiKeyFlyoutWrapperProps {
+  onClose: () => void;
+  onSuccess: (apiKey: { id: string; encoded: string }) => void;
+}
+
+export const ApiKeyFlyoutWrapper: React.FC<ApiKeyFlyoutWrapperProps> = ({ onClose, onSuccess }) => {
+  const user = useCurrentUser();
+
+  return <ApiKeyFlyout onCancel={onClose} onSuccess={onSuccess} currentUser={user} />;
+};

x-pack/plugins/search_api_keys/public/components/api_key_form.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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 React, { useCallback, useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiCode,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { ApiKeyFlyoutWrapper } from './api_key_flyout_wrapper';
+import { useSearchApiKey, Status } from '../hooks/use_search_api_key';
+
+export const ApiKeyForm = () => {
+  const { euiTheme } = useEuiTheme();
+  const [showFlyout, setShowFlyout] = useState(false);
+  const { apiKey, status, handleSaveKey } = useSearchApiKey();
+  const handleAddToClipboard = useCallback(
+    () => apiKey && navigator.clipboard.writeText(apiKey),
+    [apiKey]
+  );
+
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="flexStart" responsive={false}>
+      <EuiFlexItem grow={0}>
+        <EuiTitle size="xxxs" css={{ whiteSpace: 'nowrap' }}>
+          <h6>
+            <FormattedMessage id="xpack.searchIndices.apiKeyForm.title" defaultMessage="API Key" />
+          </h6>
+        </EuiTitle>
+      </EuiFlexItem>
+      {apiKey && (
+        <>
+          <EuiFlexItem grow={0}>
+            <EuiCode language="text" color="success" css={{ color: euiTheme.colors.successText }}>
+              {status === Status.showHiddenKey ? '•'.repeat(30) : apiKey}
+            </EuiCode>
+          </EuiFlexItem>
+          {status === Status.showPreviewKey && (
+            <EuiFlexItem grow={0}>
+              <EuiButtonIcon
+                iconType="copy"
+                color="success"
+                onClick={handleAddToClipboard}
+                aria-label={i18n.translate('xpack.searchIndices.apiKeyForm.copyButton', {
+                  defaultMessage: 'Copy button',
+                })}
+              />
+            </EuiFlexItem>
+          )}
+        </>
+      )}
+      {status === Status.showCreateButton && (
+        <EuiFlexItem grow={0}>
+          <EuiButton
+            color="warning"
+            size="s"
+            iconSide="left"
+            iconType="key"
+            onClick={() => setShowFlyout(true)}
+          >
+            <FormattedMessage
+              id="xpack.searchIndices.apiKeyForm.createButton"
+              defaultMessage="Create an API Key"
+            />
+          </EuiButton>
+          {showFlyout && (
+            <ApiKeyFlyoutWrapper onClose={() => setShowFlyout(false)} onSuccess={handleSaveKey} />
+          )}
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/search_api_keys/public/hooks/use_current_user.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { useState, useEffect } from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { AuthenticatedUser } from '@kbn/core-security-common';
+
+export const useCurrentUser = () => {
+  const { security } = useKibana().services;
+  const [user, setUser] = useState<AuthenticatedUser | undefined>(undefined);
+
+  useEffect(() => {
+    const getCurrentUser = async () => {
+      try {
+        const authenticatedUser = await security!.authc.getCurrentUser();
+        setUser(authenticatedUser);
+      } catch {
+        setUser(undefined);
+      }
+    };
+    getCurrentUser();
+  }, [security]);
+
+  return user;
+};

x-pack/plugins/search_api_keys/public/hooks/use_search_api_key.ts

@@ -0,0 +1,136 @@
+/*
+ * 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 { useEffect, useCallback, useReducer } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { APIKeyCreationResponse, APIRoutes } from '../../common/types';
+
+const API_KEY_STORAGE_KEY = 'searchApiKey';
+
+export enum Status {
+  loading = 'loading',
+  showCreateButton = 'showCreateButton',
+  showHiddenKey = 'showHiddenKey',
+  showPreviewKey = 'showPreviewKey',
+}
+
+interface ApiKeyState {
+  status: Status;
+  apiKey: string | null;
+}
+
+type Action =
+  | { type: 'SET_API_KEY'; apiKey: string; status: Status }
+  | { type: 'SET_STATUS'; status: Status }
+  | { type: 'CLEAR_API_KEY' };
+
+const initialState: ApiKeyState = {
+  apiKey: null,
+  status: Status.loading,
+};
+
+const reducer = (state: ApiKeyState, action: Action): ApiKeyState => {
+  switch (action.type) {
+    case 'SET_API_KEY':
+      return { ...state, apiKey: action.apiKey, status: action.status };
+    case 'SET_STATUS':
+      return { ...state, status: action.status };
+    case 'CLEAR_API_KEY':
+      return { ...state, apiKey: null, status: Status.showCreateButton };
+    default:
+      return state;
+  }
+};
+
+export const useSearchApiKey = () => {
+  const { http } = useKibana().services;
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const handleSaveKey = useCallback(({ id, encoded }: { id: string; encoded: string }) => {
+    sessionStorage.setItem(API_KEY_STORAGE_KEY, JSON.stringify({ id, encoded }));
+    dispatch({ type: 'SET_API_KEY', apiKey: encoded, status: Status.showPreviewKey });
+  }, []);
+  const { mutateAsync: validateApiKey } = useMutation(async (id: string) => {
+    try {
+      if (!http?.post) {
+        throw new Error('HTTP service is unavailable');
+      }
+
+      const response = await http.post<{ isValid: boolean }>(APIRoutes.API_KEY_VALIDITY, {
+        body: JSON.stringify({ id }),
+      });
+
+      return response.isValid;
+    } catch (err) {
+      return false;
+    }
+  });
+  const { mutateAsync: createApiKey } = useMutation<APIKeyCreationResponse | undefined>({
+    mutationFn: async () => {
+      try {
+        if (!http?.post) {
+          throw new Error('HTTP service is unavailable');
+        }
+
+        return await http.post<APIKeyCreationResponse>(APIRoutes.API_KEYS);
+      } catch (err) {
+        if (err.response?.status === 400) {
+          dispatch({ type: 'SET_STATUS', status: Status.showCreateButton });
+        } else {
+          throw err;
+        }
+      }
+    },
+    onSuccess: (receivedApiKey) => {
+      if (receivedApiKey) {
+        sessionStorage.setItem(
+          API_KEY_STORAGE_KEY,
+          JSON.stringify({ id: receivedApiKey.id, encoded: receivedApiKey.encoded })
+        );
+        dispatch({
+          type: 'SET_API_KEY',
+          apiKey: receivedApiKey.encoded,
+          status: Status.showHiddenKey,
+        });
+      }
+    },
+  });
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const storedKey = sessionStorage.getItem(API_KEY_STORAGE_KEY);
+
+        if (storedKey) {
+          const { id, encoded } = JSON.parse(storedKey);
+
+          if (await validateApiKey(id)) {
+            dispatch({
+              type: 'SET_API_KEY',
+              apiKey: encoded,
+              status: Status.showHiddenKey,
+            });
+          } else {
+            sessionStorage.removeItem(API_KEY_STORAGE_KEY);
+            dispatch({
+              type: 'CLEAR_API_KEY',
+            });
+          }
+        } else {
+          await createApiKey();
+        }
+      } catch (e) {
+        throw e;
+      }
+    })();
+  }, [validateApiKey, createApiKey]);
+
+  return {
+    apiKey: state.apiKey,
+    handleSaveKey,
+    status: state.status,
+  };
+};