[7.x] [SIEM] Detection engine cleanup for rule details/creation/edit page (#55069)

x-pack/legacy/plugins/siem/public/components/header_global/index.tsx

@@ -55,7 +55,7 @@ export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine
                     display="condensed"
                     navTabs={
                       hideDetectionEngine
-                        ? pickBy((_, key) => key !== SiemPageName.detectionEngine, navTabs)
+                        ? pickBy((_, key) => key !== SiemPageName.detections, navTabs)
                         : navTabs
                     }
                   />

x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx

@@ -61,32 +61,32 @@ export const LinkToPage = React.memo<LinkToPageProps>(({ match }) => (
     <Route
       component={RedirectToDetectionEnginePage}
       exact
-      path={`${match.url}/:pageName(${SiemPageName.detectionEngine})`}
+      path={`${match.url}/:pageName(${SiemPageName.detections})`}
       strict
     />
     <Route
       component={RedirectToDetectionEnginePage}
       exact
-      path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/:tabName(${DetectionEngineTab.alerts}|${DetectionEngineTab.signals})`}
+      path={`${match.url}/:pageName(${SiemPageName.detections})/:tabName(${DetectionEngineTab.alerts}|${DetectionEngineTab.signals})`}
       strict
     />
     <Route
       component={RedirectToRulesPage}
       exact
-      path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules`}
+      path={`${match.url}/:pageName(${SiemPageName.detections})/rules`}
     />
     <Route
       component={RedirectToCreateRulePage}
-      path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules/create-rule`}
+      path={`${match.url}/:pageName(${SiemPageName.detections})/rules/create-rule`}
     />
     <Route
       component={RedirectToRuleDetailsPage}
       exact
-      path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules/rule-details`}
+      path={`${match.url}/:pageName(${SiemPageName.detections})/rules/rule-details`}
     />
     <Route
       component={RedirectToEditRulePage}
-      path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules/rule-details/edit-rule`}
+      path={`${match.url}/:pageName(${SiemPageName.detections})/rules/rule-details/edit-rule`}
     />
     <Route
       component={RedirectToTimelinesPage}

x-pack/legacy/plugins/siem/public/components/link_to/redirect_to_detection_engine.tsx

@@ -15,7 +15,7 @@ export type DetectionEngineComponentProps = RouteComponentProps<{
   search: string;
 }>;
 
-export const DETECTION_ENGINE_PAGE_NAME = 'detection-engine';
+export const DETECTION_ENGINE_PAGE_NAME = 'detections';
 
 export const RedirectToDetectionEnginePage = ({
   match: {

x-pack/legacy/plugins/siem/public/components/navigation/index.test.tsx

@@ -64,12 +64,12 @@ describe('SIEM Navigation', () => {
     expect(setBreadcrumbs).toHaveBeenNthCalledWith(1, {
       detailName: undefined,
       navTabs: {
-        'detection-engine': {
+        detections: {
           disabled: false,
-          href: '#/link-to/detection-engine',
-          id: 'detection-engine',
-          name: 'Detection engine',
-          urlKey: 'detection-engine',
+          href: '#/link-to/detections',
+          id: 'detections',
+          name: 'Detections',
+          urlKey: 'detections',
         },
         hosts: {
           disabled: false,
@@ -146,12 +146,12 @@ describe('SIEM Navigation', () => {
       detailName: undefined,
       filters: [],
       navTabs: {
-        'detection-engine': {
+        detections: {
           disabled: false,
-          href: '#/link-to/detection-engine',
-          id: 'detection-engine',
-          name: 'Detection engine',
-          urlKey: 'detection-engine',
+          href: '#/link-to/detections',
+          id: 'detections',
+          name: 'Detections',
+          urlKey: 'detections',
         },
         hosts: {
           disabled: false,

x-pack/legacy/plugins/siem/public/components/timeline/search_super_select/index.tsx

@@ -45,11 +45,25 @@ const MyEuiFlexItem = styled(EuiFlexItem)`
   white-space: nowrap;
 `;
 
-const EuiSelectableContainer = styled.div`
+const EuiSelectableContainer = styled.div<{ loading: boolean }>`
   .euiSelectable {
     .euiFormControlLayout__childrenWrapper {
       display: flex;
     }
+    ${({ loading }) => `${
+      loading
+        ? `
+      .euiFormControlLayoutIcons {
+        display: none;
+      }
+      .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
+        display: block;
+        left: 12px;
+        top: 12px;
+      }`
+        : ''
+    }
+    `}
   }
 `;
 
@@ -265,7 +279,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
         onlyUserFavorite={onlyFavorites}
       >
         {({ timelines, loading, totalCount }) => (
-          <EuiSelectableContainer>
+          <EuiSelectableContainer loading={loading}>
             <EuiSelectable
               height={POPOVER_HEIGHT}
               isLoading={loading && timelines.length === 0}

x-pack/legacy/plugins/siem/public/components/url_state/constants.ts

@@ -6,7 +6,7 @@
 
 export enum CONSTANTS {
   appQuery = 'query',
-  detectionEnginePage = 'detectionEngine.page',
+  detectionsPage = 'detections.page',
   filters = 'filters',
   hostsDetails = 'hosts.details',
   hostsPage = 'hosts.page',
@@ -20,4 +20,4 @@ export enum CONSTANTS {
   unknown = 'unknown',
 }
 
-export type UrlStateType = 'detection-engine' | 'host' | 'network' | 'overview' | 'timeline';
+export type UrlStateType = 'detections' | 'host' | 'network' | 'overview' | 'timeline';

x-pack/legacy/plugins/siem/public/components/url_state/helpers.test.ts

@@ -4,46 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { navTabs } from '../../pages/home/home_navigations';
-import { SiemPageName } from '../../pages/home/types';
-import { isKqlForRoute, getTitle } from './helpers';
-import { CONSTANTS } from './constants';
+import { getTitle } from './helpers';
 import { HostsType } from '../../store/hosts/model';
 
 describe('Helpers Url_State', () => {
-  describe('isKqlForRoute', () => {
-    test('host page and host page kuery', () => {
-      const result = isKqlForRoute(SiemPageName.hosts, undefined, CONSTANTS.hostsPage);
-      expect(result).toBeTruthy();
-    });
-    test('host page and host details kuery', () => {
-      const result = isKqlForRoute(SiemPageName.hosts, undefined, CONSTANTS.hostsDetails);
-      expect(result).toBeFalsy();
-    });
-    test('host details and host details kuery', () => {
-      const result = isKqlForRoute(SiemPageName.hosts, 'siem-kibana', CONSTANTS.hostsDetails);
-      expect(result).toBeTruthy();
-    });
-    test('host details and host page kuery', () => {
-      const result = isKqlForRoute(SiemPageName.hosts, 'siem-kibana', CONSTANTS.hostsPage);
-      expect(result).toBeFalsy();
-    });
-    test('network page and network page kuery', () => {
-      const result = isKqlForRoute(SiemPageName.network, undefined, CONSTANTS.networkPage);
-      expect(result).toBeTruthy();
-    });
-    test('network page and network details kuery', () => {
-      const result = isKqlForRoute(SiemPageName.network, undefined, CONSTANTS.networkDetails);
-      expect(result).toBeFalsy();
-    });
-    test('network details and network details kuery', () => {
-      const result = isKqlForRoute(SiemPageName.network, '10.100.7.198', CONSTANTS.networkDetails);
-      expect(result).toBeTruthy();
-    });
-    test('network details and network page kuery', () => {
-      const result = isKqlForRoute(SiemPageName.network, '123.234.34', CONSTANTS.networkPage);
-      expect(result).toBeFalsy();
-    });
-  });
   describe('getTitle', () => {
     test('host page name', () => {
       const result = getTitle('hosts', undefined, navTabs);

x-pack/legacy/plugins/siem/public/components/url_state/helpers.ts

@@ -78,8 +78,8 @@ export const getUrlType = (pageName: string): UrlStateType => {
     return 'host';
   } else if (pageName === SiemPageName.network) {
     return 'network';
-  } else if (pageName === SiemPageName.detectionEngine) {
-    return 'detection-engine';
+  } else if (pageName === SiemPageName.detections) {
+    return 'detections';
   } else if (pageName === SiemPageName.timelines) {
     return 'timeline';
   }
@@ -111,31 +111,14 @@ export const getCurrentLocation = (
       return CONSTANTS.networkDetails;
     }
     return CONSTANTS.networkPage;
-  } else if (pageName === SiemPageName.detectionEngine) {
-    return CONSTANTS.detectionEnginePage;
+  } else if (pageName === SiemPageName.detections) {
+    return CONSTANTS.detectionsPage;
   } else if (pageName === SiemPageName.timelines) {
     return CONSTANTS.timelinePage;
   }
   return CONSTANTS.unknown;
 };
 
-export const isKqlForRoute = (
-  pageName: string,
-  detailName: string | undefined,
-  queryLocation: LocationTypes | null = null
-): boolean => {
-  const currentLocation = getCurrentLocation(pageName, detailName);
-  if (
-    (currentLocation === CONSTANTS.hostsPage && queryLocation === CONSTANTS.hostsPage) ||
-    (currentLocation === CONSTANTS.networkPage && queryLocation === CONSTANTS.networkPage) ||
-    (currentLocation === CONSTANTS.hostsDetails && queryLocation === CONSTANTS.hostsDetails) ||
-    (currentLocation === CONSTANTS.networkDetails && queryLocation === CONSTANTS.networkDetails)
-  ) {
-    return true;
-  }
-  return false;
-};
-
 export const makeMapStateToProps = () => {
   const getInputsSelector = inputsSelectors.inputsSelector();
   const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();

x-pack/legacy/plugins/siem/public/components/url_state/types.ts

@@ -24,7 +24,7 @@ export const ALL_URL_STATE_KEYS: KeyUrlState[] = [
 ];
 
 export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
-  'detection-engine': [
+  detections: [
     CONSTANTS.appQuery,
     CONSTANTS.filters,
     CONSTANTS.savedQuery,
@@ -56,7 +56,7 @@ export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
 };
 
 export type LocationTypes =
-  | CONSTANTS.detectionEnginePage
+  | CONSTANTS.detectionsPage
   | CONSTANTS.hostsDetails
   | CONSTANTS.hostsPage
   | CONSTANTS.networkDetails

x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_create_packaged_rules.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+
+import { createPrepackagedRules } from './api';
+
+type Return = [boolean, boolean | null];
+
+interface UseCreatePackagedRules {
+  canUserCRUD: boolean | null;
+  hasIndexManage: boolean | null;
+  hasManageApiKey: boolean | null;
+  isAuthenticated: boolean | null;
+  isSignalIndexExists: boolean | null;
+}
+
+/**
+ * Hook for creating the packages rules
+ *
+ * @param canUserCRUD boolean
+ * @param hasIndexManage boolean
+ * @param hasManageApiKey boolean
+ * @param isAuthenticated boolean
+ * @param isSignalIndexExists boolean
+ *
+ *  @returns [loading, hasCreatedPackageRules]
+ */
+export const useCreatePackagedRules = ({
+  canUserCRUD,
+  hasIndexManage,
+  hasManageApiKey,
+  isAuthenticated,
+  isSignalIndexExists,
+}: UseCreatePackagedRules): Return => {
+  const [hasCreatedPackageRules, setHasCreatedPackageRules] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let isSubscribed = true;
+    const abortCtrl = new AbortController();
+    setLoading(true);
+
+    async function createRules() {
+      try {
+        await createPrepackagedRules({
+          signal: abortCtrl.signal,
+        });
+
+        if (isSubscribed) {
+          setHasCreatedPackageRules(true);
+        }
+      } catch (error) {
+        if (isSubscribed) {
+          setHasCreatedPackageRules(false);
+        }
+      }
+      if (isSubscribed) {
+        setLoading(false);
+      }
+    }
+    if (
+      canUserCRUD &&
+      hasIndexManage &&
+      hasManageApiKey &&
+      isAuthenticated &&
+      isSignalIndexExists
+    ) {
+      createRules();
+    }
+    return () => {
+      isSubscribed = false;
+      abortCtrl.abort();
+    };
+  }, [canUserCRUD, hasIndexManage, hasManageApiKey, isAuthenticated, isSignalIndexExists]);
+
+  return [loading, hasCreatedPackageRules];
+};

x-pack/legacy/plugins/siem/public/containers/detection_engine/signals/use_signal_index.tsx

@@ -8,7 +8,6 @@ import { useEffect, useState, useRef } from 'react';
 
 import { errorToToaster } from '../../../components/ml/api/error_to_toaster';
 import { useStateToaster } from '../../../components/toasters';
-import { createPrepackagedRules } from '../rules';
 import { createSignalIndex, getSignalIndex } from './api';
 import * as i18n from './translations';
 import { PostSignalError, SignalIndexError } from './types';
@@ -41,7 +40,6 @@ export const useSignalIndex = (): Return => {
         if (isSubscribed && signal != null) {
           setSignalIndexName(signal.name);
           setSignalIndexExists(true);
-          createPrepackagedRules({ signal: abortCtrl.signal });
         }
       } catch (error) {
         if (isSubscribed) {