Trusted Apps Signer UI (#84628) (#85413)

* Added default value for type parameter in ConditionEntry type.

* Added signer field UI. Flattened a bit component structure and reused some translations.

* Reverted the condition for signer option.

* Fixed the import.

* Removed unused translations.

* Fixed the test.

* Consolidated a bit the deletion and creation flows in redux.

Author: efreeti

x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts

@@ -58,7 +58,7 @@ const createNewTrustedAppForOsScheme = <O extends OperatingSystem, F extends Con
 
           for (const entry of entries) {
             // unfortunately combination of generics and Type<...> for "field" causes type errors
-            const { field, value } = entry as ConditionEntry<ConditionEntryField>;
+            const { field, value } = entry as ConditionEntry;
 
             if (usedFields.has(field)) {
               return `[${entryFieldLabels[field]}] field can only be used once`;

x-pack/plugins/security_solution/common/endpoint/types/trusted_apps.ts

@@ -39,7 +39,7 @@ export enum ConditionEntryField {
   SIGNER = 'process.Ext.code_signature',
 }
 
-export interface ConditionEntry<T extends ConditionEntryField> {
+export interface ConditionEntry<T extends ConditionEntryField = ConditionEntryField> {
   field: T;
   type: 'match';
   operator: 'included';

x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/trusted_apps_list_page_state.ts

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ServerApiError } from '../../../../common/types';
 import { NewTrustedApp, TrustedApp } from '../../../../../common/endpoint/types/trusted_apps';
 import { AsyncResourceState } from '.';
 
@@ -23,24 +22,6 @@ export interface TrustedAppsListData {
   totalItemsCount: number;
 }
 
-/** Store State when an API request has been sent to create a new trusted app entry */
-export interface TrustedAppCreatePending {
-  type: 'pending';
-  data: NewTrustedApp;
-}
-
-/** Store State when creation of a new Trusted APP entry was successful */
-export interface TrustedAppCreateSuccess {
-  type: 'success';
-  data: TrustedApp;
-}
-
-/** Store State when creation of a new Trusted App Entry failed */
-export interface TrustedAppCreateFailure {
-  type: 'failure';
-  data: ServerApiError;
-}
-
 export type ViewType = 'list' | 'grid';
 
 export interface TrustedAppsListPageLocation {
@@ -60,11 +41,14 @@ export interface TrustedAppsListPageState {
     confirmed: boolean;
     submissionResourceState: AsyncResourceState;
   };
-  createView:
-    | undefined
-    | TrustedAppCreatePending
-    | TrustedAppCreateSuccess
-    | TrustedAppCreateFailure;
+  creationDialog: {
+    formState?: {
+      entry: NewTrustedApp;
+      isValid: boolean;
+    };
+    confirmed: boolean;
+    submissionResourceState: AsyncResourceState<TrustedApp>;
+  };
   location: TrustedAppsListPageLocation;
   active: boolean;
 }

x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/type_guards.ts

@@ -4,50 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  TrustedAppCreatePending,
-  TrustedAppsListPageState,
-  TrustedAppCreateFailure,
-  TrustedAppCreateSuccess,
-} from './trusted_apps_list_page_state';
 import {
   ConditionEntry,
   ConditionEntryField,
-  Immutable,
   MacosLinuxConditionEntry,
   WindowsConditionEntry,
 } from '../../../../../common/endpoint/types';
 
-type CreateViewPossibleStates =
-  | TrustedAppsListPageState['createView']
-  | Immutable<TrustedAppsListPageState['createView']>;
-
-export const isTrustedAppCreatePendingState = (
-  data: CreateViewPossibleStates
-): data is TrustedAppCreatePending => {
-  return data?.type === 'pending';
-};
-
-export const isTrustedAppCreateSuccessState = (
-  data: CreateViewPossibleStates
-): data is TrustedAppCreateSuccess => {
-  return data?.type === 'success';
-};
-
-export const isTrustedAppCreateFailureState = (
-  data: CreateViewPossibleStates
-): data is TrustedAppCreateFailure => {
-  return data?.type === 'failure';
-};
-
 export const isWindowsTrustedAppCondition = (
-  condition: ConditionEntry<ConditionEntryField>
+  condition: ConditionEntry
 ): condition is WindowsConditionEntry => {
   return condition.field === ConditionEntryField.SIGNER || true;
 };
 
 export const isMacosLinuxTrustedAppCondition = (
-  condition: ConditionEntry<ConditionEntryField>
+  condition: ConditionEntry
 ): condition is MacosLinuxConditionEntry => {
   return condition.field !== ConditionEntryField.SIGNER;
 };

x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/action.ts

@@ -6,14 +6,8 @@
 
 import { Action } from 'redux';
 
-import { TrustedApp } from '../../../../../common/endpoint/types';
-import {
-  AsyncResourceState,
-  TrustedAppCreateFailure,
-  TrustedAppCreatePending,
-  TrustedAppCreateSuccess,
-  TrustedAppsListData,
-} from '../state';
+import { NewTrustedApp, TrustedApp } from '../../../../../common/endpoint/types';
+import { AsyncResourceState, TrustedAppsListData } from '../state';
 
 export type TrustedAppsListDataOutdated = Action<'trustedAppsListDataOutdated'>;
 
@@ -38,20 +32,27 @@ export type TrustedAppDeletionDialogConfirmed = Action<'trustedAppDeletionDialog
 
 export type TrustedAppDeletionDialogClosed = Action<'trustedAppDeletionDialogClosed'>;
 
-export interface UserClickedSaveNewTrustedAppButton {
-  type: 'userClickedSaveNewTrustedAppButton';
-  payload: TrustedAppCreatePending;
-}
+export type TrustedAppCreationSubmissionResourceStateChanged = ResourceStateChanged<
+  'trustedAppCreationSubmissionResourceStateChanged',
+  TrustedApp
+>;
 
-export interface ServerReturnedCreateTrustedAppSuccess {
-  type: 'serverReturnedCreateTrustedAppSuccess';
-  payload: TrustedAppCreateSuccess;
-}
+export type TrustedAppCreationDialogStarted = Action<'trustedAppCreationDialogStarted'> & {
+  payload: {
+    entry: NewTrustedApp;
+  };
+};
 
-export interface ServerReturnedCreateTrustedAppFailure {
-  type: 'serverReturnedCreateTrustedAppFailure';
-  payload: TrustedAppCreateFailure;
-}
+export type TrustedAppCreationDialogFormStateUpdated = Action<'trustedAppCreationDialogFormStateUpdated'> & {
+  payload: {
+    entry: NewTrustedApp;
+    isValid: boolean;
+  };
+};
+
+export type TrustedAppCreationDialogConfirmed = Action<'trustedAppCreationDialogConfirmed'>;
+
+export type TrustedAppCreationDialogClosed = Action<'trustedAppCreationDialogClosed'>;
 
 export type TrustedAppsPageAction =
   | TrustedAppsListDataOutdated
@@ -60,6 +61,8 @@ export type TrustedAppsPageAction =
   | TrustedAppDeletionDialogStarted
   | TrustedAppDeletionDialogConfirmed
   | TrustedAppDeletionDialogClosed
-  | UserClickedSaveNewTrustedAppButton
-  | ServerReturnedCreateTrustedAppSuccess
-  | ServerReturnedCreateTrustedAppFailure;
+  | TrustedAppCreationSubmissionResourceStateChanged
+  | TrustedAppCreationDialogStarted
+  | TrustedAppCreationDialogFormStateUpdated
+  | TrustedAppCreationDialogConfirmed
+  | TrustedAppCreationDialogClosed;

x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/builders.ts

@@ -0,0 +1,56 @@
+/*
+ * 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 {
+  ConditionEntry,
+  ConditionEntryField,
+  NewTrustedApp,
+  OperatingSystem,
+} from '../../../../../common/endpoint/types';
+
+import { MANAGEMENT_DEFAULT_PAGE, MANAGEMENT_DEFAULT_PAGE_SIZE } from '../../../common/constants';
+
+import { TrustedAppsListPageState } from '../state';
+
+export const defaultConditionEntry = (): ConditionEntry<ConditionEntryField.HASH> => ({
+  field: ConditionEntryField.HASH,
+  operator: 'included',
+  type: 'match',
+  value: '',
+});
+
+export const defaultNewTrustedApp = (): NewTrustedApp => ({
+  name: '',
+  os: OperatingSystem.WINDOWS,
+  entries: [defaultConditionEntry()],
+  description: '',
+});
+
+export const initialDeletionDialogState = (): TrustedAppsListPageState['deletionDialog'] => ({
+  confirmed: false,
+  submissionResourceState: { type: 'UninitialisedResourceState' },
+});
+
+export const initialCreationDialogState = (): TrustedAppsListPageState['creationDialog'] => ({
+  confirmed: false,
+  submissionResourceState: { type: 'UninitialisedResourceState' },
+});
+
+export const initialTrustedAppsPageState = (): TrustedAppsListPageState => ({
+  listView: {
+    listResourceState: { type: 'UninitialisedResourceState' },
+    freshDataTimestamp: Date.now(),
+  },
+  deletionDialog: initialDeletionDialogState(),
+  creationDialog: initialCreationDialogState(),
+  location: {
+    page_index: MANAGEMENT_DEFAULT_PAGE,
+    page_size: MANAGEMENT_DEFAULT_PAGE_SIZE,
+    show: undefined,
+    view_type: 'grid',
+  },
+  active: false,
+});

x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.test.ts

@@ -21,7 +21,8 @@ import {
 
 import { TrustedAppsService } from '../service';
 import { Pagination, TrustedAppsListPageState } from '../state';
-import { initialTrustedAppsPageState, trustedAppsPageReducer } from './reducer';
+import { initialTrustedAppsPageState } from './builders';
+import { trustedAppsPageReducer } from './reducer';
 import { createTrustedAppsPageMiddleware } from './middleware';
 
 const initialNow = 111111;