[SIEM] Cases clean up Phase II (#61750)

* allow case to work without security * disable configure button + add call out if license does not match and if kibana config does not allow if * add skeleton for crud in case * fix link to timeline + disable action on case on read only + allow read only access to our saved object in siem + manage no x-pack.security + show msg when read-only + fix reporters bug * add actions required in plugins * review I * review II * review III * review IV * fix types * review V
elastic · Mar 31, 2020 · 4083d66 · 4083d66
1 parent 1687e8e
commit 4083d66
Show file tree

Hide file tree

Showing 52 changed files with 755 additions and 330 deletions.
diff --git a/...acy/plugins/siem/public/components/header_page/__snapshots__/editable_title.test.tsx.snap b/...acy/plugins/siem/public/components/header_page/__snapshots__/editable_title.test.tsx.snap
diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/editable_title.tsx b/x-pack/legacy/plugins/siem/public/components/header_page/editable_title.tsx
@@ -34,12 +34,18 @@ const MySpinner = styled(EuiLoadingSpinner)`
 `;
 
 interface Props {
+  disabled?: boolean;
   isLoading: boolean;
   title: string | React.ReactNode;
   onSubmit: (title: string) => void;
 }
 
-const EditableTitleComponent: React.FC<Props> = ({ onSubmit, isLoading, title }) => {
+const EditableTitleComponent: React.FC<Props> = ({
+  disabled = false,
+  onSubmit,
+  isLoading,
+  title,
+}) => {
   const [editMode, setEditMode] = useState(false);
   const [changedTitle, onTitleChange] = useState<string>(typeof title === 'string' ? title : '');
 
@@ -104,6 +110,7 @@ const EditableTitleComponent: React.FC<Props> = ({ onSubmit, isLoading, title })
         {isLoading && <MySpinner />}
         {!isLoading && (
           <MyEuiButtonIcon
+            isDisabled={disabled}
             aria-label={i18n.EDIT_TITLE_ARIA(title as string)}
             iconType="pencil"
             onClick={onClickEditIcon}

diff --git a/...y/plugins/siem/public/components/timeline/insert_timeline_popover/use_insert_timeline.tsx b/...y/plugins/siem/public/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
@@ -17,7 +17,7 @@ export const useInsertTimeline = <T extends FormData>(form: FormHook<T>, fieldNa
   });
   const handleOnTimelineChange = useCallback(
     (title: string, id: string | null) => {
-      const builtLink = `${basePath}/app/siem#/timelines?timeline=(id:${id},isOpen:!t)`;
+      const builtLink = `${basePath}/app/siem#/timelines?timeline=(id:'${id}',isOpen:!t)`;
       const currentValue = form.getFormData()[fieldName];
       const newValue: string = [
         currentValue.slice(0, cursorPosition.start),

diff --git a/x-pack/legacy/plugins/siem/public/containers/case/api.ts b/x-pack/legacy/plugins/siem/public/containers/case/api.ts
@@ -119,7 +119,7 @@ export const getCases = async ({
   signal,
 }: FetchCasesProps): Promise<AllCases> => {
   const query = {
-    reporters: filterOptions.reporters.map(r => r.username),
+    reporters: filterOptions.reporters.map(r => r.username ?? '').filter(r => r !== ''),
     tags: filterOptions.tags,
     ...(filterOptions.status !== '' ? { status: filterOptions.status } : {}),
     ...(filterOptions.search.length > 0 ? { search: filterOptions.search } : {}),

diff --git a/x-pack/legacy/plugins/siem/public/containers/case/types.ts b/x-pack/legacy/plugins/siem/public/containers/case/types.ts
@@ -90,7 +90,7 @@ export enum SortFieldCase {
 export interface ElasticUser {
   readonly email?: string | null;
   readonly fullName?: string | null;
-  readonly username: string;
+  readonly username?: string | null;
 }
 
 export interface FetchCasesProps extends ApiProps {

diff --git a/x-pack/legacy/plugins/siem/public/containers/case/use_get_reporters.tsx b/x-pack/legacy/plugins/siem/public/containers/case/use_get_reporters.tsx
@@ -6,6 +6,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
+import { isEmpty } from 'lodash/fp';
 import { User } from '../../../../../../plugins/case/common/api';
 import { errorToToaster, useStateToaster } from '../../components/toasters';
 import { getReporters } from './api';
@@ -44,9 +45,12 @@ export const useGetReporters = (): UseGetReporters => {
       });
       try {
         const response = await getReporters(abortCtrl.signal);
+        const myReporters = response
+          .map(r => (r.full_name == null || isEmpty(r.full_name) ? r.username ?? '' : r.full_name))
+          .filter(u => !isEmpty(u));
         if (!didCancel) {
           setReporterState({
-            reporters: response.map(r => r.full_name ?? r.username ?? 'N/A'),
+            reporters: myReporters,
             respReporters: response,
             isLoading: false,
             isError: false,

diff --git a/x-pack/legacy/plugins/siem/public/containers/case/use_post_push_to_service.tsx b/x-pack/legacy/plugins/siem/public/containers/case/use_post_push_to_service.tsx
@@ -148,7 +148,7 @@ const formatServiceRequestData = (myCase: Case): ServiceConnectorCaseParams => {
     createdAt,
     createdBy: {
       fullName: createdBy.fullName ?? null,
-      username: createdBy?.username,
+      username: createdBy?.username ?? '',
     },
     comments: comments
       .filter(c => {
@@ -168,14 +168,14 @@ const formatServiceRequestData = (myCase: Case): ServiceConnectorCaseParams => {
         createdAt: c.createdAt,
         createdBy: {
           fullName: c.createdBy.fullName ?? null,
-          username: c.createdBy.username,
+          username: c.createdBy.username ?? '',
         },
         updatedAt: c.updatedAt,
         updatedBy:
           c.updatedBy != null
             ? {
                 fullName: c.updatedBy.fullName ?? null,
-                username: c.updatedBy.username,
+                username: c.updatedBy.username ?? '',
               }
             : null,
       })),
@@ -187,7 +187,7 @@ const formatServiceRequestData = (myCase: Case): ServiceConnectorCaseParams => {
       updatedBy != null
         ? {
             fullName: updatedBy.fullName ?? null,
-            username: updatedBy.username,
+            username: updatedBy.username ?? '',
           }
         : null,
   };

diff --git a/x-pack/legacy/plugins/siem/public/lib/kibana/hooks.ts b/x-pack/legacy/plugins/siem/public/lib/kibana/hooks.ts
@@ -53,9 +53,24 @@ export const useCurrentUser = (): AuthenticatedElasticUser | null => {
     let didCancel = false;
     const fetchData = async () => {
       try {
-        const response = await security.authc.getCurrentUser();
-        if (!didCancel) {
-          setUser(convertToCamelCase<AuthenticatedUser, AuthenticatedElasticUser>(response));
+        if (security != null) {
+          const response = await security.authc.getCurrentUser();
+          if (!didCancel) {
+            setUser(convertToCamelCase<AuthenticatedUser, AuthenticatedElasticUser>(response));
+          }
+        } else {
+          setUser({
+            username: i18n.translate('xpack.siem.getCurrentUser.unknownUser', {
+              defaultMessage: 'Unknown',
+            }),
+            email: '',
+            fullName: '',
+            roles: [],
+            enabled: false,
+            authenticationRealm: { name: '', type: '' },
+            lookupRealm: { name: '', type: '' },
+            authenticationProvider: '',
+          });
         }
       } catch (error) {
         if (!didCancel) {
@@ -81,3 +96,29 @@ export const useCurrentUser = (): AuthenticatedElasticUser | null => {
   }, []);
   return user;
 };
+
+export interface UseGetUserSavedObjectPermissions {
+  crud: boolean;
+  read: boolean;
+}
+
+export const useGetUserSavedObjectPermissions = () => {
+  const [
+    savedObjectsPermissions,
+    setSavedObjectsPermissions,
+  ] = useState<UseGetUserSavedObjectPermissions | null>(null);
+  const uiCapabilities = useKibana().services.application.capabilities;
+
+  useEffect(() => {
+    const capabilitiesCanUserCRUD: boolean =
+      typeof uiCapabilities.siem.crud === 'boolean' ? uiCapabilities.siem.crud : false;
+    const capabilitiesCanUserRead: boolean =
+      typeof uiCapabilities.siem.show === 'boolean' ? uiCapabilities.siem.show : false;
+    setSavedObjectsPermissions({
+      crud: capabilitiesCanUserCRUD,
+      read: capabilitiesCanUserRead,
+    });
+  }, [uiCapabilities]);
+
+  return savedObjectsPermissions;
+};
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx
@@ -7,16 +7,34 @@
 import React from 'react';
 
 import { WrapperPage } from '../../components/wrapper_page';
-import { AllCases } from './components/all_cases';
+import { useGetUserSavedObjectPermissions } from '../../lib/kibana';
 import { SpyRoute } from '../../utils/route/spy_routes';
+import { AllCases } from './components/all_cases';
+
+import { getSavedObjectReadOnly, CaseCallOut } from './components/callout';
+import { CaseSavedObjectNoPermissions } from './saved_object_no_permissions';
+
+const infoReadSavedObject = getSavedObjectReadOnly();
+
+export const CasesPage = React.memo(() => {
+  const userPermissions = useGetUserSavedObjectPermissions();
 
-export const CasesPage = React.memo(() => (
-  <>
-    <WrapperPage>
-      <AllCases />
-    </WrapperPage>
-    <SpyRoute />
-  </>
-));
+  return userPermissions == null || userPermissions?.read ? (
+    <>
+      <WrapperPage>
+        {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
+          <CaseCallOut
+            title={infoReadSavedObject.title}
+            message={infoReadSavedObject.description}
+          />
+        )}
+        <AllCases userCanCrud={userPermissions?.crud ?? false} />
+      </WrapperPage>
+      <SpyRoute />
+    </>
+  ) : (
+    <CaseSavedObjectNoPermissions />
+  );
+});
 
 CasesPage.displayName = 'CasesPage';
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/case_details.tsx b/x-pack/legacy/plugins/siem/public/pages/case/case_details.tsx
@@ -5,22 +5,36 @@
  */
 
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Redirect } from 'react-router-dom';
 
-import { CaseView } from './components/case_view';
+import { useGetUrlSearch } from '../../components/navigation/use_get_url_search';
+import { useGetUserSavedObjectPermissions } from '../../lib/kibana';
 import { SpyRoute } from '../../utils/route/spy_routes';
+import { getCaseUrl } from '../../components/link_to';
+import { navTabs } from '../home/home_navigations';
+import { CaseView } from './components/case_view';
+import { getSavedObjectReadOnly, CaseCallOut } from './components/callout';
+
+const infoReadSavedObject = getSavedObjectReadOnly();
 
 export const CaseDetailsPage = React.memo(() => {
+  const userPermissions = useGetUserSavedObjectPermissions();
   const { detailName: caseId } = useParams();
-  if (!caseId) {
-    return null;
+  const search = useGetUrlSearch(navTabs.case);
+
+  if (userPermissions != null && !userPermissions.read) {
+    return <Redirect to={getCaseUrl(search)} />;
   }
-  return (
+
+  return caseId != null ? (
     <>
-      <CaseView caseId={caseId} />
+      {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
+        <CaseCallOut title={infoReadSavedObject.title} message={infoReadSavedObject.description} />
+      )}
+      <CaseView caseId={caseId} userCanCrud={userPermissions?.crud ?? false} />
       <SpyRoute />
     </>
-  );
+  ) : null;
 });
 
 CaseDetailsPage.displayName = 'CaseDetailsPage';
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/add_comment/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/add_comment/index.tsx
@@ -31,14 +31,15 @@ const initialCommentValue: CommentRequest = {
 
 interface AddCommentProps {
   caseId: string;
+  disabled?: boolean;
   insertQuote: string | null;
   onCommentSaving?: () => void;
   onCommentPosted: (newCase: Case) => void;
   showLoading?: boolean;
 }
 
 export const AddComment = React.memo<AddCommentProps>(
-  ({ caseId, insertQuote, showLoading = true, onCommentPosted, onCommentSaving }) => {
+  ({ caseId, disabled, insertQuote, showLoading = true, onCommentPosted, onCommentSaving }) => {
     const { isLoading, postComment } = usePostComment(caseId);
     const { form } = useForm<CommentRequest>({
       defaultValue: initialCommentValue,
@@ -87,7 +88,7 @@ export const AddComment = React.memo<AddCommentProps>(
               bottomRightContent: (
                 <EuiButton
                   iconType="plusInCircle"
-                  isDisabled={isLoading}
+                  isDisabled={isLoading || disabled}
                   isLoading={isLoading}
                   onClick={onSubmit}
                   size="s"

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/columns.tsx
@@ -71,11 +71,11 @@ export const getCasesColumns = (
           <>
             <EuiAvatar
               className="userAction__circle"
-              name={createdBy.fullName ? createdBy.fullName : createdBy.username}
+              name={createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
               size="s"
             />
             <Spacer data-test-subj="case-table-column-createdBy">
-              {createdBy.fullName ?? createdBy.username ?? 'N/A'}
+              {createdBy.fullName ?? createdBy.username ?? ''}
             </Spacer>
           </>
         );

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/index.test.tsx
@@ -87,7 +87,7 @@ describe('AllCases', () => {
   it('should render AllCases', () => {
     const wrapper = mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     expect(
@@ -132,7 +132,7 @@ describe('AllCases', () => {
   it('should tableHeaderSortButton AllCases', () => {
     const wrapper = mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     wrapper
@@ -149,7 +149,7 @@ describe('AllCases', () => {
   it('closes case when row action icon clicked', () => {
     const wrapper = mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     wrapper
@@ -182,7 +182,7 @@ describe('AllCases', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     wrapper
@@ -213,7 +213,7 @@ describe('AllCases', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     wrapper
@@ -238,7 +238,7 @@ describe('AllCases', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     wrapper
@@ -259,7 +259,7 @@ describe('AllCases', () => {
 
     mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     expect(refetchCases).toBeCalled();
@@ -274,7 +274,7 @@ describe('AllCases', () => {
 
     mount(
       <TestProviders>
-        <AllCases />
+        <AllCases userCanCrud={true} />
       </TestProviders>
     );
     expect(refetchCases).toBeCalled();