[ENDPOINT] First version of the trusted apps list. (#76304)

* First version of the trusted apps list.

* Added proper visualisation of OS and Date Created columns.

* Small change in naming in middleware.

* Renamed function to avoid naming confusion.

* Migrated to usage of selectors and memo in list component.

* Added explicit return types.

* Changed to use server schema for service parameter.

* Removed some over generalisation in types.

* Renamed types and properties related to trusted apps page state.

* Renamed types and properties related to trusted apps page state.

* Renamed the action type to be namespaced to trusted apps.

* Merged the exports and declarations in reducer and used constants for defaults.

* Memoization of pagination data structure.

* Used a shared constant for REST API path.

* Improvements and consistency on pagination across tabs.

* Added a bit more typing and used Partial<>

* Made constants readonly and added some useMemo usages.

* Fixed extracting page index from URI.

* Fixed the case of infinite refreshes when there is loading failure (need to rethink a bit conditions when to refresh).

* Resetting state to initial when we navigate away from trusted apps list.

* Fixed mapping page index to the table pagination.

* Changed to using AppAction in reducer.

* Made ServerApiError a default error type for data binding.

* Renamed all types related to data binding to resource state.

* Created index file for state types.

* Fixed parameter extracting code to meet expectations of endpoints list behavior.

* Updated snapshot.

* Changed middleware to only use selectors.

* Added tests for routing.

* Added documentation to the types in async resource state module.

* Added tests for async resource state module.

* Added tests for store selectors.

* Added tests for reducer.

* Moved around imports.

* Added tests for the middleware.

* Added list component tests.

* Removed a redundant function.

* Commiting snapshots.

Author: efreeti

x-pack/plugins/security_solution/public/common/store/actions.ts

@@ -7,10 +7,16 @@
 import { EndpointAction } from '../../management/pages/endpoint_hosts/store/action';
 import { PolicyListAction } from '../../management/pages/policy/store/policy_list';
 import { PolicyDetailsAction } from '../../management/pages/policy/store/policy_details';
+import { TrustedAppsPageAction } from '../../management/pages/trusted_apps/store/action';
 
 export { appActions } from './app';
 export { dragAndDropActions } from './drag_and_drop';
 export { inputsActions } from './inputs';
 import { RoutingAction } from './routing';
 
-export type AppAction = EndpointAction | RoutingAction | PolicyListAction | PolicyDetailsAction;
+export type AppAction =
+  | EndpointAction
+  | RoutingAction
+  | PolicyListAction
+  | PolicyDetailsAction
+  | TrustedAppsPageAction;

x-pack/plugins/security_solution/public/common/store/routing/action.ts

@@ -6,7 +6,7 @@
 
 import { AppLocation, Immutable } from '../../../../common/endpoint/types';
 
-interface UserChangedUrl {
+export interface UserChangedUrl {
   readonly type: 'userChangedUrl';
   readonly payload: Immutable<AppLocation>;
 }

x-pack/plugins/security_solution/public/management/common/constants.ts

@@ -24,6 +24,12 @@ export const MANAGEMENT_STORE_POLICY_LIST_NAMESPACE = 'policyList';
 export const MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE = 'policyDetails';
 /** Namespace within the Management state where endpoint-host state is maintained */
 export const MANAGEMENT_STORE_ENDPOINTS_NAMESPACE = 'endpoints';
+/** Namespace within the Management state where trusted apps page state is maintained */
+export const MANAGEMENT_STORE_TRUSTED_APPS_NAMESPACE = 'trustedApps';
+
+export const MANAGEMENT_PAGE_SIZE_OPTIONS: readonly number[] = [10, 20, 50];
+export const MANAGEMENT_DEFAULT_PAGE = 0;
+export const MANAGEMENT_DEFAULT_PAGE_SIZE = 10;
 
 // --[ DEFAULTS ]---------------------------------------------------------------------------
 /** The default polling interval to start all polling pages */

x-pack/plugins/security_solution/public/management/common/routing.test.ts

@@ -0,0 +1,111 @@
+/*
+ * 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 { extractListPaginationParams, getTrustedAppsListPath } from './routing';
+import { MANAGEMENT_DEFAULT_PAGE, MANAGEMENT_DEFAULT_PAGE_SIZE } from './constants';
+
+describe('routing', () => {
+  describe('extractListPaginationParams()', () => {
+    it('extracts default page index when not provided', () => {
+      expect(extractListPaginationParams({}).page_index).toBe(MANAGEMENT_DEFAULT_PAGE);
+    });
+
+    it('extracts default page index when too small value provided', () => {
+      expect(extractListPaginationParams({ page_index: '-1' }).page_index).toBe(
+        MANAGEMENT_DEFAULT_PAGE
+      );
+    });
+
+    it('extracts default page index when not a number provided', () => {
+      expect(extractListPaginationParams({ page_index: 'a' }).page_index).toBe(
+        MANAGEMENT_DEFAULT_PAGE
+      );
+    });
+
+    it('extracts only last page index when multiple values provided', () => {
+      expect(extractListPaginationParams({ page_index: ['1', '2'] }).page_index).toBe(2);
+    });
+
+    it('extracts proper page index when single valid value provided', () => {
+      expect(extractListPaginationParams({ page_index: '2' }).page_index).toBe(2);
+    });
+
+    it('extracts default page size when not provided', () => {
+      expect(extractListPaginationParams({}).page_size).toBe(MANAGEMENT_DEFAULT_PAGE_SIZE);
+    });
+
+    it('extracts default page size when invalid option provided', () => {
+      expect(extractListPaginationParams({ page_size: '25' }).page_size).toBe(
+        MANAGEMENT_DEFAULT_PAGE_SIZE
+      );
+    });
+
+    it('extracts default page size when not a number provided', () => {
+      expect(extractListPaginationParams({ page_size: 'a' }).page_size).toBe(
+        MANAGEMENT_DEFAULT_PAGE_SIZE
+      );
+    });
+
+    it('extracts only last page size when multiple values provided', () => {
+      expect(extractListPaginationParams({ page_size: ['10', '20'] }).page_size).toBe(20);
+    });
+
+    it('extracts proper page size when single valid value provided', () => {
+      expect(extractListPaginationParams({ page_size: '20' }).page_size).toBe(20);
+    });
+  });
+
+  describe('getTrustedAppsListPath()', () => {
+    it('builds proper path when no parameters provided', () => {
+      expect(getTrustedAppsListPath()).toEqual('/trusted_apps');
+    });
+
+    it('builds proper path when empty parameters provided', () => {
+      expect(getTrustedAppsListPath({})).toEqual('/trusted_apps');
+    });
+
+    it('builds proper path when no page index provided', () => {
+      expect(getTrustedAppsListPath({ page_size: 20 })).toEqual('/trusted_apps?page_size=20');
+    });
+
+    it('builds proper path when no page size provided', () => {
+      expect(getTrustedAppsListPath({ page_index: 2 })).toEqual('/trusted_apps?page_index=2');
+    });
+
+    it('builds proper path when both page index and size provided', () => {
+      expect(getTrustedAppsListPath({ page_index: 2, page_size: 20 })).toEqual(
+        '/trusted_apps?page_index=2&page_size=20'
+      );
+    });
+
+    it('builds proper path when page index is equal to default', () => {
+      const path = getTrustedAppsListPath({
+        page_index: MANAGEMENT_DEFAULT_PAGE,
+        page_size: 20,
+      });
+
+      expect(path).toEqual('/trusted_apps?page_size=20');
+    });
+
+    it('builds proper path when page size is equal to default', () => {
+      const path = getTrustedAppsListPath({
+        page_index: 2,
+        page_size: MANAGEMENT_DEFAULT_PAGE_SIZE,
+      });
+
+      expect(path).toEqual('/trusted_apps?page_index=2');
+    });
+
+    it('builds proper path when both page index and size are equal to default', () => {
+      const path = getTrustedAppsListPath({
+        page_index: MANAGEMENT_DEFAULT_PAGE,
+        page_size: MANAGEMENT_DEFAULT_PAGE_SIZE,
+      });
+
+      expect(path).toEqual('/trusted_apps');
+    });
+  });
+});

x-pack/plugins/security_solution/public/management/common/routing.ts

@@ -10,6 +10,9 @@ import { generatePath } from 'react-router-dom';
 import querystring from 'querystring';
 
 import {
+  MANAGEMENT_DEFAULT_PAGE,
+  MANAGEMENT_DEFAULT_PAGE_SIZE,
+  MANAGEMENT_PAGE_SIZE_OPTIONS,
   MANAGEMENT_ROUTING_ENDPOINTS_PATH,
   MANAGEMENT_ROUTING_POLICIES_PATH,
   MANAGEMENT_ROUTING_POLICY_DETAILS_PATH,
@@ -86,8 +89,61 @@ export const getPolicyDetailPath = (policyId: string, search?: string) => {
   })}${appendSearch(search)}`;
 };
 
-export const getTrustedAppsListPath = (search?: string) => {
-  return `${generatePath(MANAGEMENT_ROUTING_TRUSTED_APPS_PATH, {
+interface ListPaginationParams {
+  page_index: number;
+  page_size: number;
+}
+
+const isDefaultOrMissing = (value: number | undefined, defaultValue: number) => {
+  return value === undefined || value === defaultValue;
+};
+
+const normalizeListPaginationParams = (
+  params?: Partial<ListPaginationParams>
+): Partial<ListPaginationParams> => {
+  if (params) {
+    return {
+      ...(!isDefaultOrMissing(params.page_index, MANAGEMENT_DEFAULT_PAGE)
+        ? { page_index: params.page_index }
+        : {}),
+      ...(!isDefaultOrMissing(params.page_size, MANAGEMENT_DEFAULT_PAGE_SIZE)
+        ? { page_size: params.page_size }
+        : {}),
+    };
+  } else {
+    return {};
+  }
+};
+
+const extractFirstParamValue = (query: querystring.ParsedUrlQuery, key: string): string => {
+  const value = query[key];
+
+  return Array.isArray(value) ? value[value.length - 1] : value;
+};
+
+const extractPageIndex = (query: querystring.ParsedUrlQuery): number => {
+  const pageIndex = Number(extractFirstParamValue(query, 'page_index'));
+
+  return !Number.isFinite(pageIndex) || pageIndex < 0 ? MANAGEMENT_DEFAULT_PAGE : pageIndex;
+};
+
+const extractPageSize = (query: querystring.ParsedUrlQuery): number => {
+  const pageSize = Number(extractFirstParamValue(query, 'page_size'));
+
+  return MANAGEMENT_PAGE_SIZE_OPTIONS.includes(pageSize) ? pageSize : MANAGEMENT_DEFAULT_PAGE_SIZE;
+};
+
+export const extractListPaginationParams = (
+  query: querystring.ParsedUrlQuery
+): ListPaginationParams => ({
+  page_index: extractPageIndex(query),
+  page_size: extractPageSize(query),
+});
+
+export const getTrustedAppsListPath = (params?: Partial<ListPaginationParams>): string => {
+  const path = generatePath(MANAGEMENT_ROUTING_TRUSTED_APPS_PATH, {
     tabName: AdministrationSubTab.trustedApps,
-  })}${appendSearch(search)}`;
+  });
+
+  return `${path}${appendSearch(querystring.stringify(normalizeListPaginationParams(params)))}`;
 };

x-pack/plugins/security_solution/public/management/index.ts

@@ -47,9 +47,7 @@ export class Management {
          * Cast the ImmutableReducer to a regular reducer for compatibility with
          * the subplugin architecture (which expects plain redux reducers.)
          */
-        reducer: {
-          management: managementReducer,
-        } as ManagementPluginReducer,
+        reducer: { management: managementReducer } as ManagementPluginReducer,
         middleware: managementMiddlewareFactory(core, plugins),
       },
     };

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

@@ -15,9 +15,12 @@ import {
   HostPolicyResponseActionStatus,
 } from '../../../../../common/endpoint/types';
 import { EndpointState, EndpointIndexUIQueryParams } from '../types';
-import { MANAGEMENT_ROUTING_ENDPOINTS_PATH } from '../../../common/constants';
-
-const PAGE_SIZES = Object.freeze([10, 20, 50]);
+import { extractListPaginationParams } from '../../../common/routing';
+import {
+  MANAGEMENT_DEFAULT_PAGE,
+  MANAGEMENT_DEFAULT_PAGE_SIZE,
+  MANAGEMENT_ROUTING_ENDPOINTS_PATH,
+} from '../../../common/constants';
 
 export const listData = (state: Immutable<EndpointState>) => state.hosts;
 
@@ -129,17 +132,17 @@ export const uiQueryParams: (
 ) => Immutable<EndpointIndexUIQueryParams> = createSelector(
   (state: Immutable<EndpointState>) => state.location,
   (location: Immutable<EndpointState>['location']) => {
-    const data: EndpointIndexUIQueryParams = { page_index: '0', page_size: '10' };
+    const data: EndpointIndexUIQueryParams = {
+      page_index: String(MANAGEMENT_DEFAULT_PAGE),
+      page_size: String(MANAGEMENT_DEFAULT_PAGE_SIZE),
+    };
+
     if (location) {
       // Removes the `?` from the beginning of query string if it exists
       const query = querystring.parse(location.search.slice(1));
+      const paginationParams = extractListPaginationParams(query);
 
-      const keys: Array<keyof EndpointIndexUIQueryParams> = [
-        'selected_endpoint',
-        'page_size',
-        'page_index',
-        'show',
-      ];
+      const keys: Array<keyof EndpointIndexUIQueryParams> = ['selected_endpoint', 'show'];
 
       for (const key of keys) {
         const value: string | undefined =
@@ -160,17 +163,10 @@ export const uiQueryParams: (
         }
       }
 
-      // Check if page size is an expected size, otherwise default to 10
-      if (!PAGE_SIZES.includes(Number(data.page_size))) {
-        data.page_size = '10';
-      }
-
-      // Check if page index is a valid positive integer, otherwise default to 0
-      const pageIndexAsNumber = Number(data.page_index);
-      if (!Number.isFinite(pageIndexAsNumber) || pageIndexAsNumber < 0) {
-        data.page_index = '0';
-      }
+      data.page_size = String(paginationParams.page_size);
+      data.page_index = String(paginationParams.page_index);
     }
+
     return data;
   }
 );

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx

@@ -33,7 +33,7 @@ import {
 import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { CreateStructuredSelector } from '../../../../common/store';
 import { Immutable, HostInfo } from '../../../../../common/endpoint/types';
-import { DEFAULT_POLL_INTERVAL } from '../../../common/constants';
+import { DEFAULT_POLL_INTERVAL, MANAGEMENT_PAGE_SIZE_OPTIONS } from '../../../common/constants';
 import { PolicyEmptyState, HostsEmptyState } from '../../../components/management_empty_state';
 import { FormattedDate } from '../../../../common/components/formatted_date';
 import { useNavigateToAppEventHandler } from '../../../../common/hooks/endpoint/use_navigate_to_app_event_handler';
@@ -99,7 +99,7 @@ export const EndpointList = () => {
       pageIndex,
       pageSize,
       totalItemCount,
-      pageSizeOptions: [10, 20, 50],
+      pageSizeOptions: [...MANAGEMENT_PAGE_SIZE_OPTIONS],
       hidePerPageOptions: false,
     };
   }, [pageIndex, pageSize, totalItemCount]);

x-pack/plugins/security_solution/public/management/pages/trusted_apps/service/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { HttpStart } from 'kibana/public';
+import { TRUSTED_APPS_LIST_API } from '../../../../../common/endpoint/constants';
+import {
+  GetTrustedListAppsResponse,
+  GetTrustedAppsListRequest,
+} from '../../../../../common/endpoint/types/trusted_apps';
+
+export interface TrustedAppsService {
+  getTrustedAppsList(request: GetTrustedAppsListRequest): Promise<GetTrustedListAppsResponse>;
+}
+
+export class TrustedAppsHttpService implements TrustedAppsService {
+  constructor(private http: HttpStart) {}
+
+  async getTrustedAppsList(request: GetTrustedAppsListRequest) {
+    return this.http.get<GetTrustedListAppsResponse>(TRUSTED_APPS_LIST_API, {
+      query: request,
+    });
+  }
+}