[Security Solution] [Exceptions] Adds a new react route for viewing details about an individual exception list

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_latest_fleet_servers.ts

@@ -6,6 +6,7 @@
  */
 
 import { useCallback, useRef, useState, useEffect } from 'react';
+
 import {
   AGENTS_PREFIX,
   FLEET_SERVER_PACKAGE,

x-pack/plugins/security_solution/common/constants.ts

@@ -96,6 +96,7 @@ export enum SecurityPageName {
   endpoints = 'endpoints',
   eventFilters = 'event_filters',
   exceptions = 'exceptions',
+  sharedExceptionListDetails = 'shared-exception-list-details',
   exploreLanding = 'explore',
   hostIsolationExceptions = 'host_isolation_exceptions',
   hosts = 'hosts',

x-pack/plugins/security_solution/public/app/deep_links/index.ts

@@ -234,6 +234,15 @@ export const securitySolutionsDeepLinks: SecuritySolutionDeepLink[] = [
             defaultMessage: 'Exception lists',
           }),
         ],
+        deepLinks: [
+          {
+            id: SecurityPageName.sharedExceptionListDetails,
+            title: 'List Details',
+            path: '/exceptions/shared/:exceptionListId',
+            navLinkStatus: AppNavLinkStatus.hidden,
+            searchable: false,
+          },
+        ],
       },
     ],
   },

x-pack/plugins/security_solution/public/exceptions/manage_exceptions/detail_view.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { useParams } from 'react-router-dom';
+import { EuiTitle } from '@elastic/eui';
+
+export const ExceptionListsDetailView = memo(() => {
+  const { exceptionListId: listId } = useParams<{
+    exceptionListId: string;
+  }>();
+  return (
+    <EuiTitle>
+      <h2>{listId}</h2>
+    </EuiTitle>
+  );
+});
+
+ExceptionListsDetailView.displayName = 'ExceptionListsDetailView';

x-pack/plugins/security_solution/public/exceptions/manage_exceptions/exceptions_list_card.tsx

@@ -19,15 +19,16 @@ import {
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
-import type { HttpSetup } from '@kbn/core-http-browser';
 import type { NamespaceType } from '@kbn/securitysolution-io-ts-list-types';
+
 import type { ExceptionListInfo } from './use_all_exception_lists';
 import { TitleBadge } from './title_badge';
 import * as i18n from './translations';
+import { useGetSecuritySolutionLinkProps } from '../../common/components/links';
+import { SecurityPageName } from '../../../common/constants';
 
 interface ExceptionsListCardProps {
   exceptionsList: ExceptionListInfo;
-  http: HttpSetup;
   handleDelete: ({
     id,
     listId,
@@ -50,7 +51,11 @@ interface ExceptionsListCardProps {
 }
 
 export const ExceptionsListCard = memo<ExceptionsListCardProps>(
-  ({ exceptionsList, http, handleDelete, handleExport, readOnly }) => {
+  ({ exceptionsList, handleDelete, handleExport, readOnly }) => {
+    const { onClick: goToExceptionDetail } = useGetSecuritySolutionLinkProps()({
+      deepLinkId: SecurityPageName.sharedExceptionListDetails,
+      path: `/exceptions/shared/${exceptionsList.list_id}`,
+    });
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
     const onItemActionsClick = () => setIsPopoverOpen((isOpen) => !isOpen);
@@ -66,7 +71,7 @@ export const ExceptionsListCard = memo<ExceptionsListCardProps>(
                   <EuiFlexItem grow={true}>
                     <EuiFlexGroup direction="column" alignItems="flexStart">
                       <EuiFlexItem grow={false} component={'span'}>
-                        <EuiLink data-test-subj="exception-list-name">
+                        <EuiLink data-test-subj="exception-list-name" onClick={goToExceptionDetail}>
                           {exceptionsList.name.toString()}
                         </EuiLink>
                       </EuiFlexItem>

x-pack/plugins/security_solution/public/exceptions/manage_exceptions/exceptions_table.tsx

@@ -418,7 +418,6 @@ export const ExceptionListsTable = React.memo(() => {
                     key={excList.list_id}
                     data-test-subj="exceptionsListCard"
                     readOnly={canUserREAD && !canUserCRUD}
-                    http={http}
                     exceptionsList={excList}
                     handleDelete={handleDelete}
                     handleExport={handleExport}

x-pack/plugins/security_solution/public/exceptions/routes.tsx

@@ -12,6 +12,7 @@ import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
 import * as i18n from './translations';
 import { EXCEPTIONS_PATH, SecurityPageName } from '../../common/constants';
 import { ExceptionListsTable } from './manage_exceptions/exceptions_table';
+import { ExceptionListsDetailView } from './manage_exceptions/detail_view';
 import { SpyRoute } from '../common/utils/route/spy_routes';
 import { NotFoundPage } from '../app/404';
 import { useReadonlyHeader } from '../use_readonly_header';
@@ -26,12 +27,22 @@ const ExceptionsRoutes = () => (
   </PluginTemplateWrapper>
 );
 
+const ExceptionsListDetailRoute = () => (
+  <PluginTemplateWrapper>
+    <TrackApplicationView viewId={SecurityPageName.sharedExceptionListDetails}>
+      <ExceptionListsDetailView />
+      <SpyRoute pageName={SecurityPageName.sharedExceptionListDetails} />
+    </TrackApplicationView>
+  </PluginTemplateWrapper>
+);
+
 const ExceptionsContainerComponent: React.FC = () => {
   useReadonlyHeader(i18n.READ_ONLY_BADGE_TOOLTIP);
 
   return (
     <Switch>
       <Route path={EXCEPTIONS_PATH} exact component={ExceptionsRoutes} />
+      <Route path={'/exceptions/shared/:exceptionListId'} component={ExceptionsListDetailRoute} />
       <Route component={NotFoundPage} />
     </Switch>
   );