[Fleet] Enrollment api key UI (#51495)

x-pack/legacy/plugins/fleet/public/hooks/use_input.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+export function useInput(defaultValue = '') {
+  const [value, setValue] = React.useState<string>(defaultValue);
+
+  return {
+    value,
+    props: {
+      onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        setValue(e.target.value);
+      },
+      value,
+    },
+    clear: () => {
+      setValue('');
+    },
+  };
+}

x-pack/legacy/plugins/fleet/public/hooks/use_pagination.tsx

@@ -7,11 +7,13 @@
 import { useState } from 'react';
 import { DEFAULT_AGENTS_PAGE_SIZE, AGENTS_PAGE_SIZE_OPTIONS } from '../../common/constants';
 
+export interface Pagination {
+  currentPage: number;
+  pageSize: number;
+}
+
 export function usePagination() {
-  const [pagination, setPagination] = useState<{
-    currentPage: number;
-    pageSize: number;
-  }>({
+  const [pagination, setPagination] = useState<Pagination>({
     currentPage: 1,
     pageSize: DEFAULT_AGENTS_PAGE_SIZE,
   });

x-pack/legacy/plugins/fleet/public/lib/compose/kibana.ts

@@ -25,6 +25,7 @@ import { FrontendLibs } from '../types';
 import { PLUGIN } from '../../../common/constants/plugin';
 import { FrameworkLib } from '../framework';
 import { INDEX_NAMES } from '../../../common/constants';
+import { EnrollmentApiKeyLib } from '../enrollment_api_key';
 
 // A super early spot in kibana loading that we can use to hook before most other things
 const onKibanaReady = chrome.dangerouslyGetActiveInjector;
@@ -35,6 +36,7 @@ export function compose(): FrontendLibs {
   const elasticsearchLib = new ElasticsearchLib(esAdapter);
   const agents = new AgentsLib(new RestAgentAdapter(api));
   const policies = new PoliciesLib(new RestPolicyAdapter(api));
+  const enrollmentApiKeys = new EnrollmentApiKeyLib(api);
 
   const framework = new FrameworkLib(
     new KibanaFrameworkAdapter(
@@ -54,6 +56,7 @@ export function compose(): FrontendLibs {
     elasticsearch: elasticsearchLib,
     agents,
     policies,
+    enrollmentApiKeys,
   };
   return libs;
 }

x-pack/legacy/plugins/fleet/public/lib/enrollment_api_key.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ReturnTypeList,
+  ReturnTypeGet,
+  ReturnTypeCreate,
+  ReturnTypeDelete,
+} from '../../common/return_types';
+import { RestAPIAdapter } from './adapters/rest_api/adapter_types';
+import { Pagination } from '../hooks/use_pagination';
+import { EnrollmentApiKey } from '../../common/types/domain_data';
+
+export class EnrollmentApiKeyLib {
+  constructor(private readonly rest: RestAPIAdapter) {}
+
+  public async listKeys(pagination: Pagination) {
+    return await this.rest.get<ReturnTypeList<EnrollmentApiKey>>('/api/fleet/enrollment-api-keys', {
+      page: pagination.currentPage,
+      perPage: pagination.pageSize,
+    });
+  }
+
+  public async get(keyId: string) {
+    return await this.rest.get<ReturnTypeGet<EnrollmentApiKey>>(
+      `/api/fleet/enrollment-api-keys/${keyId}`
+    );
+  }
+
+  public async delete(keyId: string) {
+    return await this.rest.delete<ReturnTypeDelete>(`/api/fleet/enrollment-api-keys/${keyId}`);
+  }
+
+  public async create(data: { name: string; policyId: string }) {
+    return await this.rest.post<ReturnTypeCreate<EnrollmentApiKey>>(
+      `/api/fleet/enrollment-api-keys`,
+      {
+        name: data.name,
+        policy_id: data.policyId,
+      }
+    );
+  }
+}

x-pack/legacy/plugins/fleet/public/lib/types.ts

@@ -10,12 +10,14 @@ import { AgentsLib } from './agent';
 import { PoliciesLib } from './policy';
 import { ElasticsearchLib } from './elasticsearch';
 import { FrameworkLib } from './framework';
+import { EnrollmentApiKeyLib } from './enrollment_api_key';
 
 export interface FrontendLibs {
   elasticsearch: ElasticsearchLib;
   framework: FrameworkLib;
   agents: AgentsLib;
   policies: PoliciesLib;
+  enrollmentApiKeys: EnrollmentApiKeyLib;
 }
 
 export type FramworkAdapterConstructable = new (uiModule: IModule) => FrameworkAdapter;

x-pack/legacy/plugins/fleet/public/pages/agent_details/components/metadata_form.tsx

@@ -21,20 +21,7 @@ import { AxiosError } from 'axios';
 import { Agent } from '../../../../common/types/domain_data';
 import { useLibs } from '../../../hooks/use_libs';
 import { useAgentRefresh } from '../hooks/use_agent';
-
-function useInput() {
-  const [value, setValue] = useState<string>('');
-
-  return {
-    value,
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
-      setValue(e.target.value);
-    },
-    clear: () => {
-      setValue('');
-    },
-  };
-}
+import { useInput } from '../../../hooks/use_input';
 
 function useAddMetadataForm(agent: Agent, done: () => void) {
   const libs = useLibs();
@@ -132,11 +119,7 @@ export const MetadataForm: SFC<{ agent: Agent }> = ({ agent }) => {
                     defaultMessage: 'Key',
                   })}
                 >
-                  <EuiFieldText
-                    required={true}
-                    onChange={keyInput.onChange}
-                    value={keyInput.value}
-                  />
+                  <EuiFieldText required={true} {...keyInput.props} />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
@@ -145,11 +128,7 @@ export const MetadataForm: SFC<{ agent: Agent }> = ({ agent }) => {
                     defaultMessage: 'Value',
                   })}
                 >
-                  <EuiFieldText
-                    required={true}
-                    onChange={valueInput.onChange}
-                    value={valueInput.value}
-                  />
+                  <EuiFieldText required={true} {...valueInput.props} />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>