Rule details flyout on create rule page

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx

@@ -11,9 +11,13 @@ import {
   CriteriaWithPagination,
   EuiText,
 } from '@elastic/eui';
-import React, { useMemo } from 'react';
+
+import React, { useMemo, useState } from 'react';
 import { DetectionRulesTable } from './DetectionRulesTable';
 import { RuleItem, RuleItemInfo } from './types/interfaces';
+import { RuleViewerFlyout } from '../../../../../Rules/components/RuleViewerFlyout/RuleViewerFlyout';
+import { RuleTableItem } from '../../../../../Rules/utils/helpers';
+import { RuleItemInfoBase } from '../../../../../Rules/models/types';
 
 export interface CreateDetectorRulesState {
   allRules: RuleItemInfo[];
@@ -35,6 +39,8 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
   onRuleToggle,
   onAllRulesToggle,
 }) => {
+  const [flyoutData, setFlyoutData] = useState<RuleTableItem | null>(null);
+
   let enabledRulesCount = 0;
   rulesState.allRules.forEach((ruleItem) => {
     if (ruleItem.enabled) {
@@ -60,8 +66,28 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
     onPageChange(nextValues.page);
   };
 
+  const onRuleDetails = (ruleItem: RuleItem) => {
+    setFlyoutData(() => ({
+      title: ruleItem.name,
+      level: ruleItem.severity,
+      category: ruleItem.logType,
+      description: ruleItem.description,
+      source: ruleItem.library,
+      ruleInfo: rulesState.allRules.find((r) => r._id === ruleItem.id) as RuleItemInfoBase,
+      ruleId: ruleItem.id,
+    }));
+  };
+
   return (
     <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px' }}>
+      {flyoutData ? (
+        <RuleViewerFlyout
+          hideFlyout={() => setFlyoutData(() => null)}
+          history={null as any}
+          ruleTableItem={flyoutData}
+          ruleService={null as any}
+        />
+      ) : null}
       <EuiAccordion
         buttonContent={
           <div data-test-subj="detection-rules-btn">
@@ -85,6 +111,7 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
           onAllRulesToggled={onAllRulesToggle}
           onRuleActivationToggle={onRuleToggle}
           onTableChange={onTableChange}
+          onRuleDetails={onRuleDetails}
         />
       </EuiAccordion>
     </EuiPanel>

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable.tsx

@@ -17,6 +17,7 @@ export interface DetectionRulesTableProps {
   onRuleActivationToggle: (changedItem: RuleItem, isActive: boolean) => void;
   onTableChange?: (nextValues: CriteriaWithPagination<RuleItem>) => void;
   loading?: boolean;
+  onRuleDetails?: (ruleItem: RuleItem) => void;
 }
 
 const rulePriorityBySeverity: { [severity: string]: number } = {
@@ -34,6 +35,7 @@ export const DetectionRulesTable: React.FC<DetectionRulesTableProps> = ({
   onRuleActivationToggle,
   onTableChange,
   loading = false,
+  onRuleDetails,
 }) => {
   //Filter table by rule type
   const search: Search = {
@@ -77,7 +79,12 @@ export const DetectionRulesTable: React.FC<DetectionRulesTableProps> = ({
   return (
     <div style={{ padding: 10 }}>
       <EuiInMemoryTable
-        columns={getRulesColumns(allRulesEnabled, onAllRulesToggled, onRuleActivationToggle)}
+        columns={getRulesColumns(
+          allRulesEnabled,
+          onAllRulesToggled,
+          onRuleActivationToggle,
+          onRuleDetails
+        )}
         items={ruleItems}
         itemId={(item: RuleItem) => `${item.name}`}
         search={search}

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/utils/constants.tsx

@@ -16,15 +16,25 @@ export type ActiveToggleOnChangeEvent = React.BaseSyntheticEvent<
 export const getRulesColumns = (
   allEnabled: boolean,
   onAllRulesToggled?: (enabled: boolean) => void,
-  onActivationToggle?: (item: RuleItem, active: boolean) => void
+  onActivationToggle?: (item: RuleItem, active: boolean) => void,
+  onRuleDetails?: (item: RuleItem) => void
 ): EuiBasicTableColumn<RuleItem>[] => {
   const columns: EuiBasicTableColumn<RuleItem>[] = [
     {
       field: 'name',
       name: 'Rule name',
-      render: (ruleName: string, item: RuleItem): ReactNode => (
-        <EuiLink style={{ marginLeft: 10 }}>{ruleName}</EuiLink>
-      ),
+      render: (ruleName: string, item: RuleItem): ReactNode => {
+        const onRuleNameClicker = () => {
+          if (onRuleDetails) {
+            onRuleDetails(item);
+          }
+        };
+        return (
+          <EuiLink style={{ marginLeft: 10 }} onClick={onRuleNameClicker}>
+            {ruleName}
+          </EuiLink>
+        );
+      },
     },
     {
       field: 'severity',

public/pages/Rules/components/RuleViewerFlyout/RuleViewerFlyout.tsx

@@ -20,7 +20,8 @@ import { RuleTableItem } from '../../utils/helpers';
 import { DeleteRuleModal } from '../DeleteModal/DeleteModal';
 import { RuleContentViewer } from '../RuleContentViewer/RuleContentViewer';
 import { RuleViewerFlyoutHeaderActions } from './RuleViewFlyoutHeaderActions';
-import { RuleService, NotificationsStart } from '../../../../services';
+import { RuleService } from '../../../../services';
+import { NotificationsStart } from 'opensearch-dashboards/public';
 
 export interface RuleViewerFlyoutProps {
   history?: RouteComponentProps['history'];
@@ -87,7 +88,9 @@ export const RuleViewerFlyout: React.FC<RuleViewerFlyoutProps> = ({
       closeDeleteModal();
       hideFlyout(true);
     } else {
-      errorNotificationToast(notifications, 'delete', 'rule', deleteRuleRes.error);
+      if (notifications) {
+        errorNotificationToast(notifications, 'delete', 'rule', deleteRuleRes.error);
+      }
     }
   };