[security solution][Endpoint] Refactor host isolation exceptions list page to now use <ArtifactListPage/> component

x-pack/plugins/security_solution/public/management/components/effected_policy_select/effected_policy_select.tsx

@@ -88,6 +88,7 @@ export type EffectedPolicySelectProps = Omit<
   description?: string;
   onChange: (selection: EffectedPolicySelection) => void;
   selected?: PolicyData[];
+  disabled?: boolean;
 };
 export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
   ({
@@ -99,6 +100,7 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
     listProps,
     options,
     selected = [],
+    disabled = false,
     'data-test-subj': dataTestSubj,
     ...otherSelectableProps
   }) => {
@@ -140,7 +142,7 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
               id={htmlIdGenerator()()}
               onChange={NOOP}
               checked={isPolicySelected.has(policy.id)}
-              disabled={isGlobal || !isPlatinumPlus}
+              disabled={isGlobal || !isPlatinumPlus || disabled}
               data-test-subj={`policy-${policy.id}-checkbox`}
             />
           ),
@@ -158,11 +160,11 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
           ),
           policy,
           checked: isPolicySelected.has(policy.id) ? 'on' : undefined,
-          disabled: isGlobal || !isPlatinumPlus,
+          disabled: isGlobal || !isPlatinumPlus || disabled,
           'data-test-subj': `policy-${policy.id}`,
         }))
         .sort(({ label: labelA }, { label: labelB }) => labelA.localeCompare(labelB));
-    }, [getAppUrl, isGlobal, isPlatinumPlus, options, selected]);
+    }, [disabled, getAppUrl, isGlobal, isPlatinumPlus, options, selected]);
 
     const handleOnPolicySelectChange = useCallback<
       Required<EuiSelectableProps<OptionPolicyData>>['onChange']
@@ -223,14 +225,15 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
             </EuiText>
           </EuiFlexItem>
           <StyledEuiFlexItemButtonGroup grow={1}>
-            <EuiFormRow fullWidth>
+            <EuiFormRow fullWidth isDisabled={disabled}>
               <StyledButtonGroup
                 legend="Global Policy Toggle"
                 options={toggleGlobal}
                 idSelected={isGlobal ? 'globalPolicy' : 'perPolicy'}
                 onChange={handleGlobalButtonChange}
                 color="primary"
                 data-test-subj={getTestId('byPolicyGlobalButtonGroup')}
+                isDisabled={disabled}
               />
             </EuiFormRow>
           </StyledEuiFlexItemButtonGroup>

x-pack/plugins/security_solution/public/management/components/effected_policy_select/test_utils.ts

@@ -5,6 +5,9 @@
  * 2.0.
  */
 
+import userEvent from '@testing-library/user-event';
+import { AppContextTestRender } from '../../../common/mock/endpoint';
+
 /**
  * Forces the `offsetWidth` of `HTMLElement` to a given value. Needed due to the use of
  * `react-virtualized-auto-sizer` by the eui `Selectable` component
@@ -42,3 +45,51 @@ export const forceHTMLElementOffsetWidth = (width: number = 100): (() => void) =
     }
   };
 };
+
+/**
+ * Clicks on a policy being displayed when `per policy` is selected.
+ * NOTE: ensure that per-policy is selected first. This utility will
+ * not do that.
+ * @param renderResult
+ * @param [atIndex=0]
+ */
+export const clickOnEffectedPolicy = async (
+  renderResult: ReturnType<AppContextTestRender['render']>,
+  atIndex: number = 0
+): Promise<Element> => {
+  const policiesHolderElement = await renderResult.findByTestId(
+    'effectedPolicies-select-policiesSelectable'
+  );
+  const policyElements = policiesHolderElement.querySelectorAll('li.euiSelectableListItem');
+  const item = policyElements.item(atIndex);
+
+  if (item) {
+    userEvent.click(item);
+  }
+
+  return item;
+};
+
+/**
+ * Returns true or false as to whether an effect policy at a given index in the list is selected or not
+ * @param renderResult
+ * @param atIndex
+ */
+export const isEffectedPolicySelected = async (
+  renderResult: ReturnType<AppContextTestRender['render']>,
+  atIndex: number = 0
+): Promise<boolean> => {
+  const policiesHolderElement = await renderResult.findByTestId(
+    'effectedPolicies-select-policiesSelectable'
+  );
+  const policyElements = policiesHolderElement.querySelectorAll<HTMLLIElement>(
+    'li.euiSelectableListItem'
+  );
+  const item = policyElements.item(atIndex);
+
+  if (!item) {
+    throw new Error(`No policy found in EffectedPolicySelect at index position ${atIndex}`);
+  }
+
+  return item.dataset.testSelected === 'true';
+};

x-pack/plugins/security_solution/public/management/components/formatted_error/formatted_error.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { AppContextTestRender, createAppRootMockRenderer } from '../../../common/mock/endpoint';
+import { FormattedError } from './formatted_error';
+import React from 'react';
+import type { HttpFetchError } from 'kibana/public';
+
+describe('When using the `FormattedError` component', () => {
+  let render: () => ReturnType<AppContextTestRender['render']>;
+  let renderResult: ReturnType<AppContextTestRender['render']>;
+  let error: Error;
+
+  beforeEach(() => {
+    const mockedContext = createAppRootMockRenderer();
+
+    render = () =>
+      (renderResult = mockedContext.render(<FormattedError error={error} data-test-subj="test" />));
+    error = new Error('foo');
+  });
+
+  it('should display the error message for normal errors', () => {
+    render();
+
+    expect(renderResult.getByTestId('test').textContent).toEqual('foo');
+  });
+
+  it('should display status code, message and API response body for HttpFetchError', () => {
+    const httpError = new Error('api foo') as HttpFetchError;
+    Object.assign(httpError, {
+      name: 'foo',
+      req: {} as Request,
+      res: {} as Response,
+      response: {
+        status: '400',
+        statusText: 'some 400 error',
+      } as unknown as Response,
+      body: { message: 'something bad happen', at: 'some place' },
+    });
+    error = httpError;
+    render();
+
+    expect(renderResult.getByTestId('test').textContent).toEqual(
+      '400: some 400 errormessage: something bad happenat: some place'
+    );
+  });
+});

x-pack/plugins/security_solution/public/management/components/formatted_error/formatted_error.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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, { memo, useMemo } from 'react';
+import { EuiText } from '@elastic/eui';
+import type { HttpFetchError } from 'kibana/public';
+
+const isHttpFetchError = (error: Error | HttpFetchError): error is HttpFetchError => {
+  return 'body' in error && 'req' in error && 'res' in error && 'response' in error;
+};
+
+export interface ObjectContentProps {
+  data: object;
+}
+
+export const ObjectContent = memo<ObjectContentProps>(({ data }) => {
+  return (
+    <EuiText size="s">
+      {Object.entries(data).map(([key, value]) => {
+        return (
+          <div key={key} className="eui-textBreakAll">
+            <strong>{key}</strong>
+            {': '}
+            {value}
+          </div>
+        );
+      })}
+    </EuiText>
+  );
+});
+ObjectContent.displayName = 'ObjectContent';
+
+export interface FormattedErrorProps {
+  error: Error;
+  'data-test-subj'?: string;
+}
+
+/**
+ * A general component for formatting errors. Recognizes different types of errors and displays
+ * their information.
+ */
+export const FormattedError = memo<FormattedErrorProps>(
+  ({ error, 'data-test-subj': dataTestSubj }) => {
+    return useMemo(() => {
+      let content: JSX.Element = <>{error.message}</>;
+
+      if (isHttpFetchError(error)) {
+        content = (
+          <>
+            <div>{`${error.response?.status}: ${error.response?.statusText}`}</div>
+            {error.body && <ObjectContent data={error.body} />}
+          </>
+        );
+      }
+
+      return <EuiText data-test-subj={dataTestSubj}>{content}</EuiText>;
+    }, [dataTestSubj, error]);
+  }
+);
+FormattedError.displayName = 'FormattedError';

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

@@ -0,0 +1,8 @@
+/*
+ * 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 { FormattedError } from './formatted_error';

x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/constants.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 import {
-  ExceptionListType,
   ExceptionListTypeEnum,
   CreateExceptionListSchema,
 } from '@kbn/securitysolution-io-ts-list-types';
@@ -22,13 +21,10 @@ export const SEARCHABLE_FIELDS: Readonly<string[]> = [
   `entries.value`,
 ];
 
-export const HOST_ISOLATION_EXCEPTIONS_LIST_TYPE: ExceptionListType =
-  ExceptionListTypeEnum.ENDPOINT_HOST_ISOLATION_EXCEPTIONS;
-
 export const HOST_ISOLATION_EXCEPTIONS_LIST_DEFINITION: CreateExceptionListSchema = {
   name: ENDPOINT_HOST_ISOLATION_EXCEPTIONS_LIST_NAME,
   namespace_type: 'agnostic',
   description: ENDPOINT_HOST_ISOLATION_EXCEPTIONS_LIST_DESCRIPTION,
   list_id: ENDPOINT_HOST_ISOLATION_EXCEPTIONS_LIST_ID,
-  type: HOST_ISOLATION_EXCEPTIONS_LIST_TYPE,
+  type: ExceptionListTypeEnum.ENDPOINT_HOST_ISOLATION_EXCEPTIONS,
 };

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

@@ -6,14 +6,11 @@
  */
 
 import {
-  CreateExceptionListItemSchema,
   ExceptionListItemSchema,
   ExceptionListSummarySchema,
   FoundExceptionListItemSchema,
-  UpdateExceptionListItemSchema,
 } from '@kbn/securitysolution-io-ts-list-types';
 import { ENDPOINT_HOST_ISOLATION_EXCEPTIONS_LIST_ID } from '@kbn/securitysolution-list-constants';
-import { transformNewItemOutput, transformOutput } from '@kbn/securitysolution-list-hooks';
 import { HttpStart } from 'kibana/public';
 import { EXCEPTION_LIST_ITEM_URL, EXCEPTION_LIST_URL } from '../event_filters/constants';
 import { HOST_ISOLATION_EXCEPTIONS_LIST_DEFINITION } from './constants';
@@ -69,66 +66,6 @@ export async function getHostIsolationExceptionItems({
   return entries;
 }
 
-export async function createHostIsolationExceptionItem(
-  http: HttpStart,
-  exception: CreateExceptionListItemSchema
-): Promise<ExceptionListItemSchema> {
-  await ensureHostIsolationExceptionsListExists(http);
-  const entry = transformNewItemOutput(exception);
-  return http.post<ExceptionListItemSchema>(EXCEPTION_LIST_ITEM_URL, {
-    body: JSON.stringify(entry),
-  });
-}
-
-export async function deleteOneHostIsolationExceptionItem(http: HttpStart, id: string) {
-  await ensureHostIsolationExceptionsListExists(http);
-  return http.delete<ExceptionListItemSchema>(EXCEPTION_LIST_ITEM_URL, {
-    query: {
-      id,
-      namespace_type: 'agnostic',
-    },
-  });
-}
-
-export async function getOneHostIsolationExceptionItem(
-  http: HttpStart,
-  id: string
-): Promise<UpdateExceptionListItemSchema> {
-  await ensureHostIsolationExceptionsListExists(http);
-  return http.get<ExceptionListItemSchema>(EXCEPTION_LIST_ITEM_URL, {
-    query: {
-      id,
-      namespace_type: 'agnostic',
-    },
-  });
-}
-
-export async function updateOneHostIsolationExceptionItem(
-  http: HttpStart,
-  exception: UpdateExceptionListItemSchema
-): Promise<ExceptionListItemSchema> {
-  await ensureHostIsolationExceptionsListExists(http);
-  const entry = transformOutput(exception);
-
-  // Clean unnecessary fields for update action
-  const fieldsToRemove: Array<keyof ExceptionListItemSchema> = [
-    'created_at',
-    'created_by',
-    'created_at',
-    'created_by',
-    'list_id',
-    'tie_breaker_id',
-    'updated_at',
-    'updated_by',
-  ];
-
-  fieldsToRemove.forEach((field) => {
-    delete entry[field as keyof UpdateExceptionListItemSchema];
-  });
-  return http.put<ExceptionListItemSchema>(EXCEPTION_LIST_ITEM_URL, {
-    body: JSON.stringify(entry),
-  });
-}
 export async function getHostIsolationExceptionSummary(
   http: HttpStart,
   filter?: string