[Fleet] Assign/Unassign data source from policy UI (#53058)

* Add index files to export various modules; normalize imports

* Clean up unused files; extract datasources table component from policy details page

* Expose http client to frontend libs; remove unused types; import ES UI's useRequest lib

* Adjust shape of rest api adapter interface to better match with rest of kibana; remove unused node adapter; change per_page param to perPage in agent events route

* Initial pass at assign data sources flyout

* Initial pass at unassigning data sources from policy

* Make data sources table searchable by package values

* Fix enrollment key lib for rest adapter param changes

* Fix imports and types

* `yarn.lock` changes after bootstrapping

x-pack/legacy/plugins/fleet/public/components/agent_unenroll_provider.tsx

@@ -8,7 +8,7 @@ import React, { Fragment, useRef, useState } from 'react';
 import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useLibs } from '../hooks/use_libs';
+import { useLibs } from '../hooks';
 
 interface Props {
   children: (unenrollAgents: UnenrollAgents) => React.ReactElement;
@@ -101,7 +101,7 @@ export const AgentUnenrollProvider: React.FunctionComponent<Props> = ({ children
     } catch (e) {
       libs.framework.notifications.addDanger(
         i18n.translate('xpack.fleet.unenrollAgents.fatalErrorNotificationTitle', {
-          defaultMessage: 'Fatal error unenrolling agents',
+          defaultMessage: 'Error unenrolling agents',
         })
       );
     }

x-pack/legacy/plugins/fleet/public/components/index.ts

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+export { AgentHealth } from './agent_health';
+export { AgentUnenrollProvider } from './agent_unenroll_provider';
+export { Loading } from './loading';
+export { PolicyForm } from './policy_form';
+export { SearchBar } from './search_bar';
+
+export { ChildRoutes } from './navigation/child_routes';
+export { ConnectedLink } from './navigation/connected_link';
+
+export { NoDataLayout } from './layouts/no_data';

x-pack/legacy/plugins/fleet/public/components/loading.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import * as React from 'react';
 
 export const Loading: React.FC<{}> = () => (
   <EuiFlexGroup justifyContent="spaceAround">

x-pack/legacy/plugins/fleet/public/components/navigation/child_routes.tsx

@@ -3,7 +3,7 @@
  * 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, { FC } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 interface RouteConfig {
@@ -12,7 +12,7 @@ interface RouteConfig {
   routes?: RouteConfig[];
 }
 
-export const ChildRoutes: FC<{
+export const ChildRoutes: React.FC<{
   routes?: RouteConfig[];
   useSwitch?: boolean;
   [other: string]: any;

x-pack/legacy/plugins/fleet/public/components/navigation/connected_link.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-
 import { EuiLink } from '@elastic/eui';
 import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 

x-pack/legacy/plugins/fleet/public/components/search_bar.tsx

@@ -4,13 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useState, useEffect } from 'react';
-import {
-  // @ts-ignore
-  EuiSuggest,
-} from '@elastic/eui';
-import { useDebounce } from '../hooks/use_debounce';
-import { useLibs } from '../hooks/use_libs';
+import React, { useState, useEffect } from 'react';
+// @ts-ignore
+import { EuiSuggest } from '@elastic/eui';
+import { useDebounce, useLibs } from '../hooks';
 
 const DEBOUNCE_SEARCH_MS = 150;
 
@@ -32,7 +29,7 @@ interface Props {
   onChange: (newValue: string) => void;
 }
 
-export const SearchBar: FC<Props> = ({ value, fieldPrefix, onChange }) => {
+export const SearchBar: React.FC<Props> = ({ value, fieldPrefix, onChange }) => {
   const { suggestions } = useSuggestions(fieldPrefix, value);
 
   const onAutocompleteClick = (suggestion: Suggestion) => {

x-pack/legacy/plugins/fleet/public/hooks/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+export { useDebounce } from './use_debounce';
+export { useInput } from './use_input';
+export { useLibs, LibsContext } from './use_libs';
+export { usePagination, Pagination } from './use_pagination';
+export { useRequest, sendRequest } from './use_request';
+export { WithUrlState, URLStateProps } from './with_url_state';

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

@@ -0,0 +1,27 @@
+/*
+ * 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 {
+  UseRequestConfig,
+  SendRequestConfig,
+  SendRequestResponse,
+  useRequest as _useRequest,
+  sendRequest as _sendRequest,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../src/plugins/es_ui_shared/public/request/np_ready_request';
+import { useLibs } from './';
+
+export const useRequest = (config: UseRequestConfig) => {
+  const { httpClient } = useLibs();
+  // @ts-ignore
+  return _useRequest(httpClient, config);
+};
+
+export const sendRequest = (
+  httpClient: any,
+  config: SendRequestConfig
+): Promise<SendRequestResponse> => {
+  return _sendRequest(httpClient, config);
+};

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

@@ -83,12 +83,4 @@ export class WithURLStateComponent<URLState extends object> extends React.Compon
     });
   };
 }
-export const WithURLState = withRouter(WithURLStateComponent);
-
-export function withUrlState<OP>(UnwrappedComponent: React.ComponentType<OP & URLStateProps>) {
-  return (origProps: OP) => (
-    <WithURLState>
-      {(URLProps: URLStateProps) => <UnwrappedComponent {...URLProps} {...origProps} />}
-    </WithURLState>
-  );
-}
+export const WithUrlState = withRouter(WithURLStateComponent);

x-pack/legacy/plugins/fleet/public/index.tsx

@@ -12,7 +12,7 @@ import { BASE_PATH } from '../common/constants';
 import { compose } from './lib/compose/kibana';
 import { FrontendLibs } from './lib/types';
 import { AppRoutes } from './routes';
-import { LibsContext } from './hooks/use_libs';
+import { LibsContext } from './hooks';
 
 async function startApp(libs: FrontendLibs) {
   libs.framework.renderUIAtPath(

x-pack/legacy/plugins/fleet/public/lib/adapters/agent/rest_agent_adapter.ts

@@ -39,7 +39,13 @@ export class RestAgentAdapter extends AgentAdapter {
   }> {
     const { total, list } = await this.REST.get<ReturnTypeList<AgentEvent>>(
       `/api/fleet/agents/${id}/events`,
-      { page, per_page: perPage, kuery: kuery !== '' ? kuery : undefined }
+      {
+        query: {
+          page,
+          perPage,
+          kuery: kuery !== '' ? kuery : undefined,
+        },
+      }
     );
 
     return {
@@ -66,10 +72,12 @@ export class RestAgentAdapter extends AgentAdapter {
   ): Promise<ReturnTypeList<Agent>> {
     try {
       return await this.REST.get<ReturnTypeList<Agent>>('/api/fleet/agents', {
-        page,
-        perPage,
-        kuery: kuery !== '' ? kuery : undefined,
-        showInactive,
+        query: {
+          page,
+          perPage,
+          kuery: kuery !== '' ? kuery : undefined,
+          showInactive,
+        },
       });
     } catch (e) {
       return {
@@ -91,19 +99,19 @@ export class RestAgentAdapter extends AgentAdapter {
   }
 
   public async update(id: string, beatData: Partial<Agent>): Promise<boolean> {
-    await this.REST.put<ReturnTypeUpdate<Agent>>(`/api/fleet/agents/${id}`, beatData);
+    await this.REST.put<ReturnTypeUpdate<Agent>>(`/api/fleet/agents/${id}`, { body: beatData });
     return true;
   }
 
   public async unenrollByIds(ids: string[]): Promise<ReturnTypeBulkUnenroll> {
     return await this.REST.post<ReturnTypeBulkUnenroll>(`/api/fleet/agents/unenroll`, {
-      ids,
+      body: { ids },
     });
   }
 
   public async unenrollByKuery(kuery: string): Promise<ReturnTypeBulkUnenroll> {
     return await this.REST.post<ReturnTypeBulkUnenroll>(`/api/fleet/agents/unenroll`, {
-      kuery,
+      body: { kuery },
     });
   }
 }

x-pack/legacy/plugins/fleet/public/lib/adapters/elasticsearch/rest.ts

@@ -64,9 +64,9 @@ export class RestElasticsearchAdapter implements ElasticsearchAdapter {
     if (this.cachedIndexPattern) {
       return this.cachedIndexPattern;
     }
-    const res = await this.api.get<any>(
-      `/api/index_patterns/_fields_for_wildcard?pattern=${this.indexPatternName}`
-    );
+    const res = await this.api.get<any>(`/api/index_patterns/_fields_for_wildcard`, {
+      query: { pattern: this.indexPatternName },
+    });
     if (isEmpty(res.fields)) {
       return;
     }

x-pack/legacy/plugins/fleet/public/lib/adapters/policy/rest_policy_adapter.ts

@@ -31,9 +31,11 @@ export class RestPolicyAdapter extends PolicyAdapter {
   public async getAll(page: number, perPage: number, kuery?: string) {
     try {
       return await this.REST.get<ReturnTypeList<Policy>>(`/api/ingest/policies`, {
-        page,
-        perPage,
-        kuery: kuery !== '' ? kuery : undefined,
+        query: {
+          page,
+          perPage,
+          kuery: kuery !== '' ? kuery : undefined,
+        },
       });
     } catch (e) {
       return {
@@ -47,11 +49,13 @@ export class RestPolicyAdapter extends PolicyAdapter {
   }
 
   public async create(policy: Partial<Policy>) {
-    return await this.REST.post<ReturnTypeCreate<Policy>>(`/api/ingest/policies`, policy);
+    return await this.REST.post<ReturnTypeCreate<Policy>>(`/api/ingest/policies`, { body: policy });
   }
 
   public async update(id: string, policy: Partial<Policy>) {
-    return await this.REST.put<ReturnTypeUpdate<Policy>>(`/api/ingest/policies/${id}`, policy);
+    return await this.REST.put<ReturnTypeUpdate<Policy>>(`/api/ingest/policies/${id}`, {
+      body: policy,
+    });
   }
 
   public async getAgentStatus(policyId: string) {