update rule link in case activities

elastic · Nov 4, 2024 · e8c67d8 · e8c67d8
1 parent a8c54f2
commit e8c67d8
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 90 deletions.
diff --git a/x-pack/plugins/cases/public/client/ui/get_cases.tsx b/x-pack/plugins/cases/public/client/ui/get_cases.tsx
@@ -29,7 +29,7 @@ export const getCasesLazy = ({
   permissions,
   basePath,
   actionsNavigation,
-  ruleDetailsNavigation,
+  showRuleDetails,
   showAlertDetails,
   useFetchAlertData,
   onAlertsTableLoaded,
@@ -53,7 +53,7 @@ export const getCasesLazy = ({
     <Suspense fallback={<EuiLoadingSpinner />}>
       <CasesRoutesLazy
         actionsNavigation={actionsNavigation}
-        ruleDetailsNavigation={ruleDetailsNavigation}
+        showRuleDetails={showRuleDetails}
         showAlertDetails={showAlertDetails}
         useFetchAlertData={useFetchAlertData}
         onAlertsTableLoaded={onAlertsTableLoaded}

diff --git a/x-pack/plugins/cases/public/components/app/routes.tsx b/x-pack/plugins/cases/public/components/app/routes.tsx
@@ -34,7 +34,7 @@ const CaseViewLazy: React.FC<CaseViewProps> = lazy(() => import('../case_view'))
 
 const CasesRoutesComponent: React.FC<CasesRoutesProps> = ({
   actionsNavigation,
-  ruleDetailsNavigation,
+  showRuleDetails,
   showAlertDetails,
   useFetchAlertData,
   onAlertsTableLoaded,
@@ -83,7 +83,7 @@ const CasesRoutesComponent: React.FC<CasesRoutesProps> = ({
           <Suspense fallback={<EuiLoadingSpinner />}>
             <CaseViewLazy
               actionsNavigation={actionsNavigation}
-              ruleDetailsNavigation={ruleDetailsNavigation}
+              showRuleDetails={showRuleDetails}
               showAlertDetails={showAlertDetails}
               useFetchAlertData={useFetchAlertData}
               onAlertsTableLoaded={onAlertsTableLoaded}

diff --git a/x-pack/plugins/cases/public/components/app/types.ts b/x-pack/plugins/cases/public/components/app/types.ts
@@ -12,7 +12,7 @@ import type { CasesTimelineIntegration } from '../timeline_context';
 
 export interface CasesRoutesProps {
   actionsNavigation?: CasesNavigation<string, 'configurable'>;
-  ruleDetailsNavigation?: CasesNavigation<string | null | undefined, 'configurable'>;
+  showRuleDetails?: (ruleId: string) => void;
   showAlertDetails?: (alertId: string, index: string) => void;
   useFetchAlertData: UseFetchAlertData;
   /**

diff --git a/x-pack/plugins/cases/public/components/case_view/case_view_page.tsx b/x-pack/plugins/cases/public/components/case_view/case_view_page.tsx
@@ -34,7 +34,7 @@ export const CaseViewPage = React.memo<CaseViewPageProps>(
   ({
     caseData,
     refreshRef,
-    ruleDetailsNavigation,
+    showRuleDetails,
     actionsNavigation,
     showAlertDetails,
     useFetchAlertData,
@@ -111,7 +111,7 @@ export const CaseViewPage = React.memo<CaseViewPageProps>(
         <EuiFlexGroup data-test-subj={`case-view-tab-content-${activeTabId}`} alignItems="baseline">
           {activeTabId === CASE_VIEW_PAGE_TABS.ACTIVITY && (
             <CaseViewActivity
-              ruleDetailsNavigation={ruleDetailsNavigation}
+              showRuleDetails={showRuleDetails}
               caseData={caseData}
               actionsNavigation={actionsNavigation}
               showAlertDetails={showAlertDetails}

diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.test.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.test.tsx
@@ -87,10 +87,7 @@ const caseViewProps: CaseViewProps = {
     href: jest.fn(),
     onClick: jest.fn(),
   },
-  ruleDetailsNavigation: {
-    href: jest.fn(),
-    onClick: jest.fn(),
-  },
+  showRuleDetails: jest.fn(),
   showAlertDetails: jest.fn(),
   useFetchAlertData: () => [
     false,

diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx
@@ -50,13 +50,13 @@ import { CustomFields } from './custom_fields';
 import { useReplaceCustomField } from '../../../containers/use_replace_custom_field';
 
 export const CaseViewActivity = ({
-  ruleDetailsNavigation,
+  showRuleDetails,
   caseData,
   actionsNavigation,
   showAlertDetails,
   useFetchAlertData,
 }: {
-  ruleDetailsNavigation?: CasesNavigation<string | null | undefined, 'configurable'>;
+  showRuleDetails?: (ruleId: string) => void;
   caseData: CaseUI;
   actionsNavigation?: CasesNavigation<string, 'configurable'>;
   showAlertDetails?: (alertId: string, index: string) => void;
@@ -218,8 +218,7 @@ export const CaseViewActivity = ({
               <UserActions
                 userProfiles={userProfiles}
                 currentUserProfile={currentUserProfile}
-                getRuleDetailsHref={ruleDetailsNavigation?.href}
-                onRuleDetailsClick={ruleDetailsNavigation?.onClick}
+                onRuleDetailsClick={showRuleDetails}
                 caseConnectors={caseConnectors}
                 data={caseData}
                 casesConfiguration={casesConfiguration}

diff --git a/x-pack/plugins/cases/public/components/case_view/index.tsx b/x-pack/plugins/cases/public/components/case_view/index.tsx
@@ -29,7 +29,7 @@ export const CaseViewLoading = () => (
 export const CaseView = React.memo(
   ({
     actionsNavigation,
-    ruleDetailsNavigation,
+    showRuleDetails,
     showAlertDetails,
     timelineIntegration,
     useFetchAlertData,
@@ -83,7 +83,7 @@ export const CaseView = React.memo(
           caseData={data.case}
           fetchCase={refetch}
           actionsNavigation={actionsNavigation}
-          ruleDetailsNavigation={ruleDetailsNavigation}
+          showRuleDetails={showRuleDetails}
           showAlertDetails={showAlertDetails}
           useFetchAlertData={useFetchAlertData}
           onAlertsTableLoaded={onAlertsTableLoaded}

diff --git a/x-pack/plugins/cases/public/components/case_view/mocks.ts b/x-pack/plugins/cases/public/components/case_view/mocks.ts
@@ -49,10 +49,7 @@ export const caseViewProps: CaseViewProps = {
     href: jest.fn(),
     onClick: jest.fn(),
   },
-  ruleDetailsNavigation: {
-    href: jest.fn(),
-    onClick: jest.fn(),
-  },
+  showRuleDetails: jest.fn(),
   showAlertDetails: jest.fn(),
   useFetchAlertData: () => [
     false,

diff --git a/x-pack/plugins/cases/public/components/case_view/types.ts b/x-pack/plugins/cases/public/components/case_view/types.ts
@@ -13,7 +13,7 @@ import type { UseFetchAlertData } from '../../../common/ui';
 export interface CaseViewBaseProps {
   onComponentInitialized?: () => void;
   actionsNavigation?: CasesNavigation<string, 'configurable'>;
-  ruleDetailsNavigation?: CasesNavigation<string | null | undefined, 'configurable'>;
+  showRuleDetails?: (ruleId: string) => void;
   showAlertDetails?: (alertId: string, index: string) => void;
   useFetchAlertData: UseFetchAlertData;
   onAlertsTableLoaded?: (eventIds: Array<Partial<{ _id: string }>>) => void;

diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/alert.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/alert.tsx
@@ -27,7 +27,6 @@ type BuilderArgs = Pick<
   UserActionBuilderArgs,
   | 'userAction'
   | 'alertData'
-  | 'getRuleDetailsHref'
   | 'onRuleDetailsClick'
   | 'loadingAlertData'
   | 'onShowAlertDetails'
@@ -43,7 +42,6 @@ const getSingleAlertUserAction = ({
   alertData,
   loadingAlertData,
   loadingCommentIds,
-  getRuleDetailsHref,
   onRuleDetailsClick,
   onShowAlertDetails,
   handleDeleteComment,
@@ -68,7 +66,6 @@ const getSingleAlertUserAction = ({
       event: (
         <SingleAlertCommentEvent
           actionId={userAction.id}
-          getRuleDetailsHref={getRuleDetailsHref}
           loadingAlertData={loadingAlertData}
           onRuleDetailsClick={onRuleDetailsClick}
           ruleId={ruleId}
@@ -106,7 +103,6 @@ const getMultipleAlertsUserAction = ({
   alertData,
   loadingAlertData,
   loadingCommentIds,
-  getRuleDetailsHref,
   onRuleDetailsClick,
   handleDeleteComment,
 }: BuilderArgs): EuiCommentProps[] => {
@@ -130,7 +126,6 @@ const getMultipleAlertsUserAction = ({
           totalAlerts={totalAlerts}
           ruleId={ruleId}
           ruleName={ruleName}
-          getRuleDetailsHref={getRuleDetailsHref}
           onRuleDetailsClick={onRuleDetailsClick}
         />
       ),

diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/alert_event.test.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/alert_event.test.tsx
@@ -61,10 +61,10 @@ describe('Alert events', () => {
       expect(wrapper.text()).toBe('added an alert from Awesome rule');
     });
 
-    it('does NOT render the link when the href is invalid but it shows the rule name', async () => {
+    it('does NOT render the link when ruleId is invalid but it shows the rule name', async () => {
       const wrapper = mount(
         <TestProviders>
-          <SingleAlertCommentEvent {...props} getRuleDetailsHref={undefined} />
+          <SingleAlertCommentEvent {...props} ruleId={undefined} />
         </TestProviders>
       );
 
@@ -142,9 +142,9 @@ describe('Alert events', () => {
       expect(result.queryByTestId('alert-rule-link-action-id-1')).toBeFalsy();
     });
 
-    it('does NOT render the link when the href is invalid but it shows the rule name', async () => {
+    it('does NOT render the link when the ruleId is invalid but it shows the rule name', async () => {
       const result = appMock.render(
-        <MultipleAlertsCommentEvent {...props} totalAlerts={2} getRuleDetailsHref={undefined} />
+        <MultipleAlertsCommentEvent {...props} totalAlerts={2} ruleId={undefined} />
       );
 
       expect(result.getByTestId('multiple-alerts-user-action-action-id-1')).toHaveTextContent(

diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/alert_event.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/alert_event.tsx
@@ -5,20 +5,18 @@
  * 2.0.
  */
 
-import React, { memo, useCallback } from 'react';
+import React, { memo } from 'react';
 import { isEmpty } from 'lodash';
 import { EuiLoadingSpinner } from '@elastic/eui';
 
 import * as i18n from '../translations';
 import { LinkAnchor } from '../../links';
-import type { RuleDetailsNavigation } from '../types';
 
 interface SingleAlertProps {
   actionId: string;
   ruleId?: string | null;
   ruleName?: string | null;
-  getRuleDetailsHref?: RuleDetailsNavigation['href'];
-  onRuleDetailsClick?: RuleDetailsNavigation['onClick'];
+  onRuleDetailsClick?: (ruleId: string) => void;
   loadingAlertData?: boolean;
 }
 
@@ -27,27 +25,17 @@ interface MultipleAlertsProps extends SingleAlertProps {
 }
 
 const RuleLink: React.FC<SingleAlertProps> = memo(
-  ({ onRuleDetailsClick, getRuleDetailsHref, ruleId, ruleName, loadingAlertData, actionId }) => {
-    const onLinkClick = useCallback(
-      (ev: React.MouseEvent) => {
-        ev.preventDefault();
-        if (onRuleDetailsClick) onRuleDetailsClick(ruleId, ev);
-      },
-      [ruleId, onRuleDetailsClick]
-    );
-
-    const ruleDetailsHref = getRuleDetailsHref?.(ruleId);
+  ({ onRuleDetailsClick, ruleId, ruleName, loadingAlertData, actionId }) => {
     const finalRuleName = ruleName ?? i18n.UNKNOWN_RULE;
 
     if (loadingAlertData) {
       return <EuiLoadingSpinner size="m" data-test-subj={`alert-loading-spinner-${actionId}`} />;
     }
 
-    if (!isEmpty(ruleId) && ruleDetailsHref != null) {
+    if (!isEmpty(ruleId) && ruleId != null && onRuleDetailsClick) {
       return (
         <LinkAnchor
-          onClick={onLinkClick}
-          href={ruleDetailsHref}
+          onClick={() => onRuleDetailsClick(ruleId)}
           data-test-subj={`alert-rule-link-${actionId}`}
         >
           {finalRuleName}
@@ -63,7 +51,6 @@ RuleLink.displayName = 'RuleLink';
 
 const SingleAlertCommentEventComponent: React.FC<SingleAlertProps> = ({
   actionId,
-  getRuleDetailsHref,
   loadingAlertData = false,
   onRuleDetailsClick,
   ruleId,
@@ -76,7 +63,6 @@ const SingleAlertCommentEventComponent: React.FC<SingleAlertProps> = ({
         actionId={actionId}
         ruleId={ruleId}
         ruleName={ruleName}
-        getRuleDetailsHref={getRuleDetailsHref}
         onRuleDetailsClick={onRuleDetailsClick}
         loadingAlertData={loadingAlertData}
       />
@@ -90,7 +76,6 @@ export const SingleAlertCommentEvent = memo(SingleAlertCommentEventComponent);
 
 const MultipleAlertsCommentEventComponent: React.FC<MultipleAlertsProps> = ({
   actionId,
-  getRuleDetailsHref,
   loadingAlertData = false,
   onRuleDetailsClick,
   ruleId,
@@ -104,7 +89,6 @@ const MultipleAlertsCommentEventComponent: React.FC<MultipleAlertsProps> = ({
         actionId={actionId}
         ruleId={ruleId}
         ruleName={ruleName}
-        getRuleDetailsHref={getRuleDetailsHref}
         onRuleDetailsClick={onRuleDetailsClick}
         loadingAlertData={loadingAlertData}
       />

diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/comment.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/comment.tsx
@@ -158,7 +158,6 @@ const getCreateCommentUserAction = ({
   handleSaveComment,
   handleManageQuote,
   handleDeleteComment,
-  getRuleDetailsHref,
   loadingAlertData,
   onRuleDetailsClick,
   alertData,
@@ -197,7 +196,6 @@ const getCreateCommentUserAction = ({
         alertData,
         comment,
         userAction,
-        getRuleDetailsHref,
         loadingAlertData,
         onRuleDetailsClick,
         onShowAlertDetails,
@@ -262,7 +260,6 @@ export const createCommentUserActionBuilder: UserActionBuilder = ({
   loadingAlertData,
   alertData,
   euiTheme,
-  getRuleDetailsHref,
   onRuleDetailsClick,
   onShowAlertDetails,
   handleManageMarkdownEditId,
@@ -310,7 +307,6 @@ export const createCommentUserActionBuilder: UserActionBuilder = ({
         loadingAlertData,
         alertData,
         euiTheme,
-        getRuleDetailsHref,
         onRuleDetailsClick,
         onShowAlertDetails,
         handleManageMarkdownEditId,

diff --git a/x-pack/plugins/cases/public/components/user_actions/mock.ts b/x-pack/plugins/cases/public/components/user_actions/mock.ts
@@ -46,7 +46,6 @@ export const getMockBuilderArgs = (): UserActionBuilderArgs => {
 
   const caseConnectors = getCaseConnectorsMockResponse();
 
-  const getRuleDetailsHref = jest.fn().mockReturnValue('https://example.com');
   const onRuleDetailsClick = jest.fn();
   const onShowAlertDetails = jest.fn();
   const handleManageMarkdownEditId = jest.fn();
@@ -74,7 +73,6 @@ export const getMockBuilderArgs = (): UserActionBuilderArgs => {
     loadingCommentIds: [],
     loadingAlertData: false,
     caseConnectors,
-    getRuleDetailsHref,
     onRuleDetailsClick,
     onShowAlertDetails,
     handleManageMarkdownEditId,

diff --git a/x-pack/plugins/cases/public/components/user_actions/types.ts b/x-pack/plugins/cases/public/components/user_actions/types.ts
@@ -33,9 +33,8 @@ export interface UserActionTreeProps {
   currentUserProfile: CurrentUserProfile;
   data: CaseUI;
   casesConfiguration: CasesConfigurationUI;
-  getRuleDetailsHref?: RuleDetailsNavigation['href'];
   actionsNavigation?: ActionsNavigation;
-  onRuleDetailsClick?: RuleDetailsNavigation['onClick'];
+  onRuleDetailsClick?: (ruleId: string) => void;
   onShowAlertDetails?: (alertId: string, index: string) => void;
   onUpdateField: ({ key, value, onSuccess, onError }: OnUpdateFields) => void;
   statusActionButton: JSX.Element | null;
@@ -77,8 +76,7 @@ export interface UserActionBuilderArgs {
   handleDeleteComment: (id: string, successToasterTitle: string) => void;
   handleManageQuote: (quote: string) => void;
   onShowAlertDetails?: (alertId: string, index: string) => void;
-  getRuleDetailsHref?: RuleDetailsNavigation['href'];
-  onRuleDetailsClick?: RuleDetailsNavigation['onClick'];
+  onRuleDetailsClick?: (ruleId: string) => void;
   euiTheme?: EuiThemeComputed<{}>;
 }
 
@@ -88,7 +86,6 @@ export type UserActionBuilder = (args: UserActionBuilderArgs) => {
 
 export type UserActionBuilderMap = Record<SupportedUserActionTypes, UserActionBuilder>;
 
-export type RuleDetailsNavigation = CasesNavigation<string | null | undefined, 'configurable'>;
 export type ActionsNavigation = CasesNavigation<string, 'configurable'>;
 
 interface Signal {

diff --git a/x-pack/plugins/cases/public/components/user_actions/user_actions_list.tsx b/x-pack/plugins/cases/public/components/user_actions/user_actions_list.tsx
@@ -80,7 +80,6 @@ export const UserActionsList = React.memo(
     currentUserProfile,
     data: caseData,
     casesConfiguration,
-    getRuleDetailsHref,
     actionsNavigation,
     onRuleDetailsClick,
     onShowAlertDetails,
@@ -150,7 +149,6 @@ export const UserActionsList = React.memo(
           handleManageQuote,
           onShowAlertDetails,
           actionsNavigation,
-          getRuleDetailsHref,
           onRuleDetailsClick,
         });
         return [...comments, ...userActionBuilder.build()];
@@ -179,7 +177,6 @@ export const UserActionsList = React.memo(
       handleManageQuote,
       onShowAlertDetails,
       actionsNavigation,
-      getRuleDetailsHref,
       onRuleDetailsClick,
     ]);