[SECURITY_SOLUTION][ENDPOINT] Trusted Apps List page Empty State when no trusted apps exist

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

@@ -32,6 +32,10 @@ export interface TrustedAppsListPageLocation {
 }
 
 export interface TrustedAppsListPageState {
+  /** Represents if trusted apps entries exist, regardless of whether the list is showing results
+   * or not (which could use filtering in the future)
+   */
+  entriesExist: AsyncResourceState<boolean>;
   listView: {
     listResourceState: AsyncResourceState<TrustedAppsListData>;
     freshDataTimestamp: number;

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

@@ -54,6 +54,10 @@ export type TrustedAppCreationDialogConfirmed = Action<'trustedAppCreationDialog
 
 export type TrustedAppCreationDialogClosed = Action<'trustedAppCreationDialogClosed'>;
 
+export type TrustedAppsExistResponse = Action<'trustedAppsExistStateChanged'> & {
+  payload: AsyncResourceState<boolean>;
+};
+
 export type TrustedAppsPageAction =
   | TrustedAppsListDataOutdated
   | TrustedAppsListResourceStateChanged
@@ -65,4 +69,5 @@ export type TrustedAppsPageAction =
   | TrustedAppCreationDialogStarted
   | TrustedAppCreationDialogFormStateUpdated
   | TrustedAppCreationDialogConfirmed
+  | TrustedAppsExistResponse
   | TrustedAppCreationDialogClosed;

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

@@ -40,6 +40,7 @@ export const initialCreationDialogState = (): TrustedAppsListPageState['creation
 });
 
 export const initialTrustedAppsPageState = (): TrustedAppsListPageState => ({
+  entriesExist: { type: 'UninitialisedResourceState' },
   listView: {
     listResourceState: { type: 'UninitialisedResourceState' },
     freshDataTimestamp: Date.now(),

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

@@ -66,6 +66,26 @@ const createStoreSetup = (trustedAppsService: TrustedAppsService) => {
 };
 
 describe('middleware', () => {
+  type TrustedAppsEntriesExistState = Pick<TrustedAppsListPageState, 'entriesExist'>;
+  const entriesExistLoadedState = (): TrustedAppsEntriesExistState => {
+    return {
+      entriesExist: {
+        data: true,
+        type: 'LoadedResourceState',
+      },
+    };
+  };
+  const entriesExistLoadingState = (): TrustedAppsEntriesExistState => {
+    return {
+      entriesExist: {
+        previousState: {
+          type: 'UninitialisedResourceState',
+        },
+        type: 'LoadingResourceState',
+      },
+    };
+  };
+
   beforeEach(() => {
     dateNowMock.mockReturnValue(initialNow);
   });
@@ -106,6 +126,7 @@ describe('middleware', () => {
 
       expect(store.getState()).toStrictEqual({
         ...initialState,
+        ...entriesExistLoadingState(),
         listView: createLoadedListViewWithPagination(initialNow, pagination),
         active: true,
         location,
@@ -126,9 +147,10 @@ describe('middleware', () => {
 
       store.dispatch(createUserChangedUrlAction('/trusted_apps', '?page_index=2&page_size=50'));
 
-      expect(service.getTrustedAppsList).toBeCalledTimes(1);
+      expect(service.getTrustedAppsList).toBeCalledTimes(2);
       expect(store.getState()).toStrictEqual({
         ...initialState,
+        ...entriesExistLoadingState(),
         listView: createLoadedListViewWithPagination(initialNow, pagination),
         active: true,
         location,
@@ -154,6 +176,7 @@ describe('middleware', () => {
 
       expect(store.getState()).toStrictEqual({
         ...initialState,
+        ...entriesExistLoadingState(),
         listView: {
           listResourceState: {
             type: 'LoadingResourceState',
@@ -169,6 +192,7 @@ describe('middleware', () => {
 
       expect(store.getState()).toStrictEqual({
         ...initialState,
+        ...entriesExistLoadedState(),
         listView: createLoadedListViewWithPagination(newNow, pagination),
         active: true,
         location,
@@ -189,6 +213,7 @@ describe('middleware', () => {
 
       expect(store.getState()).toStrictEqual({
         ...initialState,
+        ...entriesExistLoadingState(),
         listView: {
           listResourceState: {
             type: 'FailedResourceState',
@@ -218,7 +243,13 @@ describe('middleware', () => {
     const getTrustedAppsListResponse = createGetTrustedListAppsResponse(pagination);
     const listView = createLoadedListViewWithPagination(initialNow, pagination);
     const listViewNew = createLoadedListViewWithPagination(newNow, pagination);
-    const testStartState = { ...initialState, listView, active: true, location };
+    const testStartState = {
+      ...initialState,
+      ...entriesExistLoadingState(),
+      listView,
+      active: true,
+      location,
+    };
 
     it('does not submit when entry is undefined', async () => {
       const service = createTrustedAppsServiceMock();
@@ -270,7 +301,11 @@ describe('middleware', () => {
       await spyMiddleware.waitForAction('trustedAppDeletionSubmissionResourceStateChanged');
       await spyMiddleware.waitForAction('trustedAppsListResourceStateChanged');
 
-      expect(store.getState()).toStrictEqual({ ...testStartState, listView: listViewNew });
+      expect(store.getState()).toStrictEqual({
+        ...testStartState,
+        ...entriesExistLoadedState(),
+        listView: listViewNew,
+      });
       expect(service.deleteTrustedApp).toBeCalledWith({ id: '3' });
       expect(service.deleteTrustedApp).toBeCalledTimes(1);
     });
@@ -307,7 +342,11 @@ describe('middleware', () => {
       await spyMiddleware.waitForAction('trustedAppDeletionSubmissionResourceStateChanged');
       await spyMiddleware.waitForAction('trustedAppsListResourceStateChanged');
 
-      expect(store.getState()).toStrictEqual({ ...testStartState, listView: listViewNew });
+      expect(store.getState()).toStrictEqual({
+        ...testStartState,
+        ...entriesExistLoadedState(),
+        listView: listViewNew,
+      });
       expect(service.deleteTrustedApp).toBeCalledWith({ id: '3' });
       expect(service.deleteTrustedApp).toBeCalledTimes(1);
     });
@@ -342,6 +381,7 @@ describe('middleware', () => {
 
       expect(store.getState()).toStrictEqual({
         ...testStartState,
+        ...entriesExistLoadedState(),
         deletionDialog: {
           entry,
           confirmed: true,

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

@@ -21,6 +21,8 @@ import { TrustedAppsHttpService, TrustedAppsService } from '../service';
 import {
   AsyncResourceState,
   getLastLoadedResourceState,
+  isLoadedResourceState,
+  isLoadingResourceState,
   isStaleResourceState,
   StaleResourceState,
   TrustedAppsListData,
@@ -47,6 +49,10 @@ import {
   getCreationDialogFormEntry,
   isCreationDialogLocation,
   isCreationDialogFormValid,
+  entriesExist,
+  getListTotalItemsCount,
+  trustedAppsListPageActive,
+  entriesExistState,
 } from './selectors';
 
 const createTrustedAppsListResourceStateChangedAction = (
@@ -217,6 +223,50 @@ const submitDeletionIfNeeded = async (
   }
 };
 
+const checkTrustedAppsExistIfNeeded = async (
+  store: ImmutableMiddlewareAPI<TrustedAppsListPageState, AppAction>,
+  trustedAppsService: TrustedAppsService
+) => {
+  const currentState = store.getState();
+  const currentEntriesExistState = entriesExistState(currentState);
+
+  if (
+    trustedAppsListPageActive(currentState) &&
+    !isLoadingResourceState(currentEntriesExistState)
+  ) {
+    const currentListTotal = getListTotalItemsCount(currentState);
+    const currentDoEntriesExist = entriesExist(currentState);
+
+    if (
+      !isLoadedResourceState(currentEntriesExistState) ||
+      (currentListTotal === 0 && currentDoEntriesExist) ||
+      (currentListTotal > 0 && !currentDoEntriesExist)
+    ) {
+      store.dispatch({
+        type: 'trustedAppsExistStateChanged',
+        payload: { type: 'LoadingResourceState', previousState: currentEntriesExistState },
+      });
+
+      let doTheyExist: boolean;
+      try {
+        const { total } = await trustedAppsService.getTrustedAppsList({
+          page: 1,
+          per_page: 1,
+        });
+        doTheyExist = total > 0;
+      } catch (e) {
+        // If a failure occurs, lets assume entries exits so that the UI is not blocked to the user
+        doTheyExist = true;
+      }
+
+      store.dispatch({
+        type: 'trustedAppsExistStateChanged',
+        payload: { type: 'LoadedResourceState', data: doTheyExist },
+      });
+    }
+  }
+};
+
 export const createTrustedAppsPageMiddleware = (
   trustedAppsService: TrustedAppsService
 ): ImmutableMiddleware<TrustedAppsListPageState, AppAction> => {
@@ -226,6 +276,7 @@ export const createTrustedAppsPageMiddleware = (
     // TODO: need to think if failed state is a good condition to consider need for refresh
     if (action.type === 'userChangedUrl' || action.type === 'trustedAppsListDataOutdated') {
       await refreshListIfNeeded(store, trustedAppsService);
+      await checkTrustedAppsExistIfNeeded(store, trustedAppsService);
     }
 
     if (action.type === 'userChangedUrl') {

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

@@ -27,6 +27,7 @@ import {
   TrustedAppCreationDialogFormStateUpdated,
   TrustedAppCreationDialogConfirmed,
   TrustedAppCreationDialogClosed,
+  TrustedAppsExistResponse,
 } from './action';
 
 import { TrustedAppsListPageState } from '../state';
@@ -35,6 +36,7 @@ import {
   initialDeletionDialogState,
   initialTrustedAppsPageState,
 } from './builders';
+import { entriesExistState } from './selectors';
 
 type StateReducer = ImmutableReducer<TrustedAppsListPageState, AppAction>;
 type CaseReducer<T extends AppAction> = (
@@ -142,6 +144,16 @@ const userChangedUrl: CaseReducer<UserChangedUrl> = (state, action) => {
   }
 };
 
+const updateEntriesExists: CaseReducer<TrustedAppsExistResponse> = (state, { payload }) => {
+  if (entriesExistState(state) !== payload) {
+    return {
+      ...state,
+      entriesExist: payload,
+    };
+  }
+  return state;
+};
+
 export const trustedAppsPageReducer: StateReducer = (
   state = initialTrustedAppsPageState(),
   action
@@ -182,6 +194,9 @@ export const trustedAppsPageReducer: StateReducer = (
 
     case 'userChangedUrl':
       return userChangedUrl(state, action);
+
+    case 'trustedAppsExistStateChanged':
+      return updateEntriesExists(state, action);
   }
 
   return state;

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { createSelector } from 'reselect';
 import { ServerApiError } from '../../../../common/types';
 import { Immutable, NewTrustedApp, TrustedApp } from '../../../../../common/endpoint/types';
 import { MANAGEMENT_PAGE_SIZE_OPTIONS } from '../../../common/constants';
@@ -162,3 +163,24 @@ export const getCreationError = (
 
   return isFailedResourceState(submissionResourceState) ? submissionResourceState.error : undefined;
 };
+
+export const entriesExistState: (
+  state: Immutable<TrustedAppsListPageState>
+) => Immutable<TrustedAppsListPageState['entriesExist']> = (state) => state.entriesExist;
+
+export const checkingIfEntriesExist: (
+  state: Immutable<TrustedAppsListPageState>
+) => boolean = createSelector(entriesExistState, (doEntriesExists) => {
+  return !isLoadedResourceState(doEntriesExists);
+});
+
+export const entriesExist: (state: Immutable<TrustedAppsListPageState>) => boolean = createSelector(
+  entriesExistState,
+  (doEntriesExists) => {
+    return isLoadedResourceState(doEntriesExists) && doEntriesExists.data;
+  }
+);
+
+export const trustedAppsListPageActive: (state: Immutable<TrustedAppsListPageState>) => boolean = (
+  state
+) => state.active;

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/empty_state.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { memo } from 'react';
+import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export const EmptyState = memo<{
+  onAdd: () => void;
+  /** Should the Add button be disabled */
+  isAddDisabled?: boolean;
+}>(({ onAdd, isAddDisabled = false }) => {
+  return (
+    <EuiEmptyPrompt
+      data-test-subj="trustedAppEmptyState"
+      iconType="plusInCircle"
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.securitySolution.trustedapps.listEmptyState.title"
+            defaultMessage="Add your first trusted application"
+          />
+        </h2>
+      }
+      body={
+        <FormattedMessage
+          id="xpack.securitySolution.trustedapps.listEmptyState.message"
+          defaultMessage="There are currently no trusted applications on your endpoint."
+        />
+      }
+      actions={
+        <EuiButton
+          fill
+          isDisabled={isAddDisabled}
+          onClick={onAdd}
+          data-test-subj="trustedAppsListAddButton"
+        >
+          <FormattedMessage
+            id="xpack.securitySolution.trustedapps.list.addButton"
+            defaultMessage="Add Trusted Application"
+          />
+        </EuiButton>
+      }
+    />
+  );
+});
+
+EmptyState.displayName = 'EmptyState';