[SIEM] [Case] Enable case by default. Snake to camel on UI

x-pack/legacy/plugins/siem/public/components/links/index.tsx

@@ -44,7 +44,10 @@ const CaseDetailsLinkComponent: React.FC<{ children?: React.ReactNode; detailNam
   children,
   detailName,
 }) => (
-  <EuiLink href={getCaseDetailsUrl(encodeURIComponent(detailName))}>
+  <EuiLink
+    href={getCaseDetailsUrl(encodeURIComponent(detailName))}
+    data-test-subj="case-details-link"
+  >
     {children ? children : detailName}
   </EuiLink>
 );

x-pack/legacy/plugins/siem/public/components/navigation/index.test.tsx

@@ -67,7 +67,7 @@ describe('SIEM Navigation', () => {
         detailName: undefined,
         navTabs: {
           case: {
-            disabled: true,
+            disabled: false,
             href: '#/link-to/case',
             id: 'case',
             name: 'Case',
@@ -160,7 +160,7 @@ describe('SIEM Navigation', () => {
         filters: [],
         navTabs: {
           case: {
-            disabled: true,
+            disabled: false,
             href: '#/link-to/case',
             id: 'case',
             name: 'Case',

x-pack/legacy/plugins/siem/public/containers/case/api.ts

@@ -5,12 +5,12 @@
  */
 
 import { KibanaServices } from '../../lib/kibana';
-import { AllCases, FetchCasesProps, Case, NewCase, SortFieldCase } from './types';
-import { Direction } from '../../graphql/types';
+import { FetchCasesProps, Case, NewCase, SortFieldCase, AllCases } from './types';
 import { throwIfNotOk } from '../../hooks/api/api';
 import { CASES_URL } from './constants';
+import { convertToCamelCase, convertAllCasesToCamel, convertUpdateCaseToCamel } from './utils';
 
-export const getCase = async (caseId: string, includeComments: boolean) => {
+export const getCase = async (caseId: string, includeComments: boolean): Promise<Case> => {
   const response = await KibanaServices.get().http.fetch(`${CASES_URL}/${caseId}`, {
     method: 'GET',
     asResponse: true,
@@ -19,7 +19,7 @@ export const getCase = async (caseId: string, includeComments: boolean) => {
     },
   });
   await throwIfNotOk(response.response);
-  return response.body!;
+  return convertToCamelCase(response.body!);
 };
 
 export const getCases = async ({
@@ -31,7 +31,7 @@ export const getCases = async ({
     page: 1,
     perPage: 20,
     sortField: SortFieldCase.createdAt,
-    sortOrder: Direction.desc,
+    sortOrder: 'desc',
   },
 }: FetchCasesProps): Promise<AllCases> => {
   const tags = [...(filterOptions.tags?.map(t => `case-workflow.attributes.tags: ${t}`) ?? [])];
@@ -46,7 +46,7 @@ export const getCases = async ({
     asResponse: true,
   });
   await throwIfNotOk(response.response);
-  return response.body!;
+  return convertAllCasesToCamel(response.body!);
 };
 
 export const createCase = async (newCase: NewCase): Promise<Case> => {
@@ -56,18 +56,19 @@ export const createCase = async (newCase: NewCase): Promise<Case> => {
     body: JSON.stringify(newCase),
   });
   await throwIfNotOk(response.response);
-  return response.body!;
+  return convertToCamelCase(response.body!);
 };
 
 export const updateCaseProperty = async (
   caseId: string,
-  updatedCase: Partial<Case>
+  updatedCase: Partial<Case>,
+  version: string
 ): Promise<Partial<Case>> => {
   const response = await KibanaServices.get().http.fetch(`${CASES_URL}/${caseId}`, {
     method: 'PATCH',
     asResponse: true,
-    body: JSON.stringify(updatedCase),
+    body: JSON.stringify({ case: updatedCase, version }),
   });
   await throwIfNotOk(response.response);
-  return response.body!;
+  return convertUpdateCaseToCamel(response.body!);
 };

x-pack/legacy/plugins/siem/public/containers/case/types.ts

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Direction } from '../../graphql/types';
 interface FormData {
   isNew?: boolean;
 }
@@ -15,44 +14,69 @@ export interface NewCase extends FormData {
   title: string;
 }
 
-export interface Case {
+export interface CaseSnake {
   case_id: string;
   created_at: string;
-  created_by: ElasticUser;
+  created_by: ElasticUserSnake;
   description: string;
   state: string;
   tags: string[];
   title: string;
   updated_at: string;
+  version?: string;
+}
+
+export interface Case {
+  caseId: string;
+  createdAt: string;
+  createdBy: ElasticUser;
+  description: string;
+  state: string;
+  tags: string[];
+  title: string;
+  updatedAt: string;
+  version?: string;
 }
 
 export interface QueryParams {
   page: number;
   perPage: number;
   sortField: SortFieldCase;
-  sortOrder: Direction;
+  sortOrder: 'asc' | 'desc';
 }
 
 export interface FilterOptions {
   search: string;
   tags: string[];
 }
 
+export interface AllCasesSnake {
+  cases: CaseSnake[];
+  page: number;
+  per_page: number;
+  total: number;
+}
+
 export interface AllCases {
   cases: Case[];
   page: number;
-  per_page: number;
+  perPage: number;
   total: number;
 }
 export enum SortFieldCase {
-  createdAt = 'created_at',
+  createdAt = 'createdAt',
   state = 'state',
-  updatedAt = 'updated_at',
+  updatedAt = 'updatedAt',
+}
+
+export interface ElasticUserSnake {
+  readonly username: string;
+  readonly full_name?: string | null;
 }
 
 export interface ElasticUser {
   readonly username: string;
-  readonly full_name?: string;
+  readonly fullName?: string | null;
 }
 
 export interface FetchCasesProps {

x-pack/legacy/plugins/siem/public/containers/case/use_get_case.tsx

@@ -50,16 +50,16 @@ const dataFetchReducer = (state: CaseState, action: Action): CaseState => {
   }
 };
 const initialData: Case = {
-  case_id: '',
-  created_at: '',
-  created_by: {
+  caseId: '',
+  createdAt: '',
+  createdBy: {
     username: '',
   },
   description: '',
   state: '',
   tags: [],
   title: '',
-  updated_at: '',
+  updatedAt: '',
 };
 
 export const useGetCase = (caseId: string): [CaseState] => {

x-pack/legacy/plugins/siem/public/containers/case/use_get_cases.tsx

@@ -17,7 +17,6 @@ import {
 } from './constants';
 import { AllCases, SortFieldCase, FilterOptions, QueryParams } from './types';
 import { getTypedPayload } from './utils';
-import { Direction } from '../../graphql/types';
 import { errorToToaster } from '../../components/ml/api/error_to_toaster';
 import { useStateToaster } from '../../components/toasters';
 import * as i18n from './translations';
@@ -31,16 +30,9 @@ export interface UseGetCasesState {
   filterOptions: FilterOptions;
 }
 
-export interface QueryArgs {
-  page?: number;
-  perPage?: number;
-  sortField?: SortFieldCase;
-  sortOrder?: Direction;
-}
-
 export interface Action {
   type: string;
-  payload?: AllCases | QueryArgs | FilterOptions;
+  payload?: AllCases | Partial<QueryParams> | FilterOptions;
 }
 const dataFetchReducer = (state: UseGetCasesState, action: Action): UseGetCasesState => {
   switch (action.type) {
@@ -83,13 +75,13 @@ const dataFetchReducer = (state: UseGetCasesState, action: Action): UseGetCasesS
 
 const initialData: AllCases = {
   page: 0,
-  per_page: 0,
+  perPage: 0,
   total: 0,
   cases: [],
 };
 export const useGetCases = (): [
   UseGetCasesState,
-  Dispatch<SetStateAction<QueryArgs>>,
+  Dispatch<SetStateAction<Partial<QueryParams>>>,
   Dispatch<SetStateAction<FilterOptions>>
 ] => {
   const [state, dispatch] = useReducer(dataFetchReducer, {
@@ -104,10 +96,10 @@ export const useGetCases = (): [
       page: DEFAULT_TABLE_ACTIVE_PAGE,
       perPage: DEFAULT_TABLE_LIMIT,
       sortField: SortFieldCase.createdAt,
-      sortOrder: Direction.desc,
+      sortOrder: 'desc',
     },
   });
-  const [queryParams, setQueryParams] = useState(state.queryParams as QueryArgs);
+  const [queryParams, setQueryParams] = useState(state.queryParams as Partial<QueryParams>);
   const [filterQuery, setFilters] = useState(state.filterOptions as FilterOptions);
   const [, dispatchToaster] = useStateToaster();
 

x-pack/legacy/plugins/siem/public/containers/case/use_update_case.tsx

@@ -96,7 +96,11 @@ export const useUpdateCase = (
     const updateData = async (updateKey: keyof Case) => {
       dispatch({ type: FETCH_INIT });
       try {
-        const response = await updateCaseProperty(caseId, { [updateKey]: state.data[updateKey] });
+        const response = await updateCaseProperty(
+          caseId,
+          { [updateKey]: state.data[updateKey] },
+          state.data.version ?? '' // saved object versions are typed as string | undefined, hope that's not true
+        );
         dispatch({ type: FETCH_SUCCESS, payload: response });
       } catch (error) {
         errorToToaster({ title: i18n.ERROR_TITLE, error, dispatchToaster });

x-pack/legacy/plugins/siem/public/containers/case/utils.ts

@@ -4,4 +4,69 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { camelCase, isObject, set } from 'lodash';
+import { AllCases, AllCasesSnake, Case, CaseSnake } from './types';
+
 export const getTypedPayload = <T>(a: unknown): T => a as T;
+
+export const convertToCamelCase = <T, U extends {}>(snakeCase: T): U => {
+  return Object.entries(snakeCase).reduce((acc, [key, value]) => {
+    if (isObject(value)) {
+      set(camelCase(key), convertToCamelCase(value), acc);
+    } else {
+      set(camelCase(key), value, acc);
+    }
+    return acc;
+  }, {} as U);
+};
+
+export const convertAllCasesToCamel = (snakeCases: AllCasesSnake): AllCases => ({
+  cases: snakeCases.cases.map(snakeCase => convertToCamelCase<CaseSnake, Case>(snakeCase)),
+  page: snakeCases.page,
+  perPage: snakeCases.per_page,
+  total: snakeCases.total,
+});
+
+export const convertUpdateCaseToCamel = (snakeCase: Partial<CaseSnake>): Partial<Case> => {
+  const updateCase: Partial<Case> = {};
+  Object.keys(snakeCase).forEach(key => {
+    switch (key) {
+      case 'case_id':
+        updateCase.caseId = snakeCase.case_id;
+        break;
+
+      case 'created_at':
+        updateCase.createdAt = snakeCase.created_at;
+        break;
+      case 'created_by':
+        if (snakeCase.created_by) {
+          updateCase.createdBy = {
+            username: snakeCase.created_by.username,
+            fullName: snakeCase.created_by.full_name,
+          };
+        }
+        break;
+      case 'description':
+        updateCase.description = snakeCase.description;
+        break;
+      case 'state':
+        updateCase.state = snakeCase.state;
+        break;
+      case 'tags':
+        updateCase.tags = snakeCase.tags;
+        break;
+      case 'title':
+        updateCase.title = snakeCase.title;
+        break;
+      case 'updated_at':
+        updateCase.updatedAt = snakeCase.updated_at;
+        break;
+      case 'version':
+        updateCase.version = snakeCase.version;
+        break;
+      default:
+        return null;
+    }
+  });
+  return updateCase;
+};