[SIEM] [Case] All cases page design updates

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

@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import {
+  EuiFilterButton,
+  EuiFilterSelectItem,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiPopover,
+  EuiText,
+} from '@elastic/eui';
+import styled from 'styled-components';
+
+interface FilterPopoverProps {
+  buttonLabel: string;
+  onSelectedOptionsChanged: Dispatch<SetStateAction<string[]>>;
+  options: string[];
+  optionsEmptyLabel: string;
+  selectedOptions: string[];
+}
+
+const ScrollableDiv = styled.div`
+  max-height: 250px;
+  overflow: auto;
+`;
+
+export const toggleSelectedGroup = (
+  group: string,
+  selectedGroups: string[],
+  setSelectedGroups: Dispatch<SetStateAction<string[]>>
+): void => {
+  const selectedGroupIndex = selectedGroups.indexOf(group);
+  const updatedSelectedGroups = [...selectedGroups];
+  if (selectedGroupIndex >= 0) {
+    updatedSelectedGroups.splice(selectedGroupIndex, 1);
+  } else {
+    updatedSelectedGroups.push(group);
+  }
+  return setSelectedGroups(updatedSelectedGroups);
+};
+
+/**
+ * Popover for selecting a field to filter on
+ *
+ * @param buttonLabel label on dropdwon button
+ * @param onSelectedOptionsChanged change listener to be notified when option selection changes
+ * @param options to display for filtering
+ * @param optionsEmptyLabel shows when options empty
+ * @param selectedOptions manage state of selectedOptions
+ */
+export const FilterPopoverComponent = ({
+  buttonLabel,
+  onSelectedOptionsChanged,
+  options,
+  optionsEmptyLabel,
+  selectedOptions,
+}: FilterPopoverProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const setIsPopoverOpenCb = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]);
+  const toggleSelectedGroupCb = useCallback(
+    option => toggleSelectedGroup(option, selectedOptions, onSelectedOptionsChanged),
+    [selectedOptions, onSelectedOptionsChanged]
+  );
+
+  return (
+    <EuiPopover
+      ownFocus
+      button={
+        <EuiFilterButton
+          data-test-subj={`options-filter-popover-button-${buttonLabel}`}
+          iconType="arrowDown"
+          onClick={setIsPopoverOpenCb}
+          isSelected={isPopoverOpen}
+          numFilters={options.length}
+          hasActiveFilters={selectedOptions.length > 0}
+          numActiveFilters={selectedOptions.length}
+        >
+          {buttonLabel}
+        </EuiFilterButton>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={setIsPopoverOpenCb}
+      panelPaddingSize="none"
+    >
+      <ScrollableDiv>
+        {options.map((option, index) => (
+          <EuiFilterSelectItem
+            checked={selectedOptions.includes(option) ? 'on' : undefined}
+            key={`${index}-${option}`}
+            onClick={toggleSelectedGroupCb.bind(null, option)}
+          >
+            {option}
+          </EuiFilterSelectItem>
+        ))}
+      </ScrollableDiv>
+      {options.length === 0 && (
+        <EuiFlexGroup gutterSize="m" justifyContent="spaceAround">
+          <EuiFlexItem grow={true}>
+            <EuiPanel>
+              <EuiText>{optionsEmptyLabel}</EuiText>
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </EuiPopover>
+  );
+};
+
+FilterPopoverComponent.displayName = 'FilterPopoverComponent';
+
+export const FilterPopover = React.memo(FilterPopoverComponent);
+
+FilterPopover.displayName = 'FilterPopover';

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx → x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar.test.tsx

@@ -8,7 +8,7 @@ import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../mock';
+import { TestProviders } from '../../mock';
 import {
   UtilityBar,
   UtilityBarAction,

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx → x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_action.test.tsx

@@ -7,7 +7,7 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../mock';
+import { TestProviders } from '../../mock';
 import { UtilityBarAction } from './index';
 
 describe('UtilityBarAction', () => {

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.tsx → x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_action.tsx

@@ -7,7 +7,7 @@
 import { EuiPopover } from '@elastic/eui';
 import React, { useCallback, useState } from 'react';
 
-import { LinkIcon, LinkIconProps } from '../../link_icon';
+import { LinkIcon, LinkIconProps } from '../link_icon';
 import { BarAction } from './styles';
 
 const Popover = React.memo<UtilityBarActionProps>(

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.test.tsx → x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_group.test.tsx

@@ -7,7 +7,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../mock';
+import { TestProviders } from '../../mock';
 import { UtilityBarGroup, UtilityBarText } from './index';
 
 describe('UtilityBarGroup', () => {

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.test.tsx → x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_section.test.tsx

@@ -7,7 +7,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../mock';
+import { TestProviders } from '../../mock';
 import { UtilityBarGroup, UtilityBarSection, UtilityBarText } from './index';
 
 describe('UtilityBarSection', () => {

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.test.tsx → x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_text.test.tsx

@@ -7,7 +7,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../mock';
+import { TestProviders } from '../../mock';
 import { UtilityBarText } from './index';
 
 describe('UtilityBarText', () => {

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

@@ -35,6 +35,7 @@ export const getCase = async (caseId: string, includeComments: boolean = true):
 export const getCases = async ({
   filterOptions = {
     search: '',
+    state: 'open',
     tags: [],
   },
   queryParams = {
@@ -44,7 +45,12 @@ export const getCases = async ({
     sortOrder: 'desc',
   },
 }: FetchCasesProps): Promise<AllCases> => {
-  const tags = [...(filterOptions.tags?.map(t => `case-workflow.attributes.tags: ${t}`) ?? [])];
+  const stateFilter = `case-workflow.attributes.state: ${filterOptions.state}`;
+  const tags = [
+    ...(filterOptions.tags?.reduce((acc, t) => [...acc, `case-workflow.attributes.tags: ${t}`], [
+      stateFilter,
+    ]) ?? [stateFilter]),
+  ];
   const query = {
     ...queryParams,
     filter: tags.join(' AND '),

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

@@ -13,4 +13,5 @@ export const FETCH_SUCCESS = 'FETCH_SUCCESS';
 export const POST_NEW_CASE = 'POST_NEW_CASE';
 export const POST_NEW_COMMENT = 'POST_NEW_COMMENT';
 export const UPDATE_FILTER_OPTIONS = 'UPDATE_FILTER_OPTIONS';
+export const UPDATE_TABLE_SELECTIONS = 'UPDATE_TABLE_SELECTIONS';
 export const UPDATE_QUERY_PARAMS = 'UPDATE_QUERY_PARAMS';

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

@@ -71,6 +71,7 @@ export interface QueryParams {
 
 export interface FilterOptions {
   search: string;
+  state: string;
   tags: string[];
 }
 
@@ -89,7 +90,6 @@ export interface AllCases {
 }
 export enum SortFieldCase {
   createdAt = 'createdAt',
-  state = 'state',
   updatedAt = 'updatedAt',
 }