[Security Solution] Add app id prop for navigateToApp (#121139) (#121147)

* Add app id prop for navigateToApp

* Add missing hook dependency

* Fix types

Co-authored-by: Kevin Qualters <56408403+kqualters-elastic@users.noreply.github.com>

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -14,6 +14,7 @@ import type { Filter } from '@kbn/es-query';
 import { inputsModel, inputsSelectors, State } from '../../store';
 import { inputsActions } from '../../store/actions';
 import { ControlColumnProps, RowRenderer, TimelineId } from '../../../../common/types/timeline';
+import { APP_UI_ID } from '../../../../common/constants';
 import { timelineSelectors, timelineActions } from '../../../timelines/store/timeline';
 import type { SubsetTimelineModel, TimelineModel } from '../../../timelines/store/timeline/model';
 import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
@@ -175,6 +176,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
         <InspectButtonContainer>
           {timelinesUi.getTGrid<'embedded'>({
             additionalFilters,
+            appId: APP_UI_ID,
             browserFields,
             bulkActions,
             columns,

x-pack/plugins/timelines/public/components/index.tsx

@@ -14,7 +14,7 @@ import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import type { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
 import { createStore } from '../store/t_grid';
 
-import { TGrid as TGridComponent } from './tgrid';
+import { TGrid as TGridComponent } from './t_grid';
 import type { TGridProps } from '../types';
 import { DragDropContextWrapper } from './drag_and_drop';
 import { initialTGridState } from '../store/t_grid/reducer';

x-pack/plugins/timelines/public/components/rule_name/index.tsx

@@ -14,31 +14,32 @@ import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 interface RuleNameProps {
   name: string;
   id: string;
+  appId: string;
 }
 
 const appendSearch = (search?: string) =>
   isEmpty(search) ? '' : `${search?.startsWith('?') ? search : `?${search}`}`;
 
-const RuleNameComponents = ({ name, id }: RuleNameProps) => {
+const RuleNameComponents = ({ name, id, appId }: RuleNameProps) => {
   const { navigateToApp, getUrlForApp } = useKibana<CoreStart>().services.application;
 
   const hrefRuleDetails = useMemo(
     () =>
-      getUrlForApp('securitySolution', {
+      getUrlForApp(appId, {
         deepLinkId: 'rules',
         path: `/id/${id}${appendSearch(window.location.search)}`,
       }),
-    [getUrlForApp, id]
+    [getUrlForApp, id, appId]
   );
   const goToRuleDetails = useCallback(
     (ev) => {
       ev.preventDefault();
-      navigateToApp('securitySolution', {
+      navigateToApp(appId, {
         deepLinkId: 'rules',
         path: `/id/${id}${appendSearch(window.location.search)}`,
       });
     },
-    [navigateToApp, id]
+    [navigateToApp, id, appId]
   );
   return (
     // eslint-disable-next-line @elastic/eui/href-or-on-click

x-pack/plugins/timelines/public/components/t_grid/body/index.tsx

@@ -89,6 +89,7 @@ const StatefulAlertStatusBulkActions = lazy(
 interface OwnProps {
   activePage: number;
   additionalControls?: React.ReactNode;
+  appId?: string;
   browserFields: BrowserFields;
   bulkActions?: BulkActionsProp;
   createFieldComponent?: CreateFieldComponentType;
@@ -299,6 +300,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
   ({
     activePage,
     additionalControls,
+    appId = '',
     browserFields,
     bulkActions = true,
     clearSelected,
@@ -830,6 +832,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
           )}
           {tableView === 'eventRenderedView' && (
             <EventRenderedView
+              appId={appId}
               alertToolbar={alertToolbar}
               browserFields={browserFields}
               events={data}

x-pack/plugins/timelines/public/components/t_grid/event_rendered_view/index.tsx

@@ -65,6 +65,7 @@ const StyledEuiBasicTable = styled(EuiBasicTable as BasicTableType)`
 
 export interface EventRenderedViewProps {
   alertToolbar: React.ReactNode;
+  appId: string;
   browserFields: BrowserFields;
   events: TimelineItem[];
   leadingControlColumns: EuiDataGridControlColumn[];
@@ -87,6 +88,7 @@ export const PreferenceFormattedDate = React.memo(PreferenceFormattedDateCompone
 
 const EventRenderedViewComponent = ({
   alertToolbar,
+  appId,
   browserFields,
   events,
   leadingControlColumns,
@@ -168,7 +170,7 @@ const EventRenderedViewComponent = ({
         render: (name: unknown, item: TimelineItem) => {
           const ruleName = get(item, `ecs.signal.rule.name`) ?? get(item, `ecs.${ALERT_RULE_NAME}`);
           const ruleId = get(item, `ecs.signal.rule.id`) ?? get(item, `ecs.${ALERT_RULE_UUID}`);
-          return <RuleName name={ruleName} id={ruleId} />;
+          return <RuleName name={ruleName} id={ruleId} appId={appId} />;
         },
       },
       {
@@ -209,7 +211,7 @@ const EventRenderedViewComponent = ({
         width: '60%',
       },
     ],
-    [ActionTitle, browserFields, events, leadingControlColumns, rowRenderers]
+    [ActionTitle, browserFields, events, leadingControlColumns, rowRenderers, appId]
   );
 
   const handleTableChange = useCallback(

x-pack/plugins/timelines/public/components/t_grid/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 
-import type { TGridProps } from '../types';
-import { TGridIntegrated, TGridIntegratedProps } from './t_grid/integrated';
-import { TGridStandalone, TGridStandaloneProps } from './t_grid/standalone';
+import type { TGridProps } from '../../types';
+import { TGridIntegrated, TGridIntegratedProps } from './integrated';
+import { TGridStandalone, TGridStandaloneProps } from './standalone';
 
 export const TGrid = (props: TGridProps) => {
   const { type, ...componentsProps } = props;

x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx

@@ -94,6 +94,7 @@ const SECURITY_ALERTS_CONSUMERS = [AlertConsumers.SIEM];
 
 export interface TGridIntegratedProps {
   additionalFilters: React.ReactNode;
+  appId: string;
   browserFields: BrowserFields;
   bulkActions?: BulkActionsProp;
   columns: ColumnHeaderOptions[];
@@ -138,6 +139,7 @@ export interface TGridIntegratedProps {
 
 const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
   additionalFilters,
+  appId,
   browserFields,
   bulkActions = true,
   columns,
@@ -350,6 +352,7 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
                       <ScrollableFlexItem grow={1}>
                         <StatefulBody
                           activePage={pageInfo.activePage}
+                          appId={appId}
                           browserFields={browserFields}
                           bulkActions={bulkActions}
                           createFieldComponent={createFieldComponent}

x-pack/plugins/timelines/public/mock/t_grid.tsx

@@ -88,6 +88,7 @@ const columnHeaders: ColumnHeaderOptions[] = [
 
 export const tGridIntegratedProps: TGridIntegratedProps = {
   additionalFilters: null,
+  appId: '',
   browserFields: mockBrowserFields,
   columns: columnHeaders,
   dataProviders: mockDataProviders,
@@ -131,6 +132,7 @@ export const tGridIntegratedProps: TGridIntegratedProps = {
 
 export const eventRenderedProps: EventRenderedViewProps = {
   alertToolbar: <></>,
+  appId: '',
   browserFields: mockBrowserFields,
   events: mockTimelineData,
   leadingControlColumns: [],