Fixed click on customField

elastic · Feb 6, 2023 · d07948c · d07948c
1 parent 09cad3a
commit d07948c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 27 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/grouping/groups_selector/index.tsx b/x-pack/plugins/security_solution/public/common/components/grouping/groups_selector/index.tsx
@@ -24,7 +24,6 @@ const none = i18n.translate('xpack.securitySolution.groupsSelector.noneGroupByOp
 interface GroupSelectorProps {
   fields: FieldSpec[];
   groupSelected: string;
-  onClearSelected: () => void;
   onGroupChange: (groupSelection: string) => void;
   options: Array<{ key: string; label: string }>;
   title?: string;
@@ -33,7 +32,6 @@ interface GroupSelectorProps {
 const GroupsSelectorComponent = ({
   fields,
   groupSelected = 'none',
-  onClearSelected,
   onGroupChange,
   options,
   title = '',
@@ -48,17 +46,14 @@ const GroupsSelectorComponent = ({
             'data-test-subj': 'panel-none',
             name: none,
             icon: groupSelected === 'none' ? 'check' : 'empty',
-            onClick: onClearSelected,
+            onClick: () => onGroupChange('none'),
           },
-          ...options.map<EuiContextMenuPanelItemDescriptor>(
-            (o) =>
-              ({
-                'data-test-subj': `panel-${o.key}`,
-                name: o.label,
-                onClick: () => onGroupChange(o.key),
-                icon: groupSelected === o.key ? 'check' : 'empty',
-              } as EuiContextMenuPanelItemDescriptor)
-          ),
+          ...options.map<EuiContextMenuPanelItemDescriptor>((o) => ({
+            'data-test-subj': `panel-${o.key}`,
+            name: o.label,
+            onClick: () => onGroupChange(o.key),
+            icon: groupSelected === o.key ? 'check' : 'empty',
+          })),
           {
             'data-test-subj': `panel-custom`,
             name: i18n.translate('xpack.securitySolution.groupsSelector.customGroupByOptionName', {
@@ -86,7 +81,7 @@ const GroupsSelectorComponent = ({
         ),
       },
     ],
-    [fields, groupSelected, onClearSelected, onGroupChange, options]
+    [fields, groupSelected, onGroupChange, options]
   );
   const selectedOption = useMemo(
     () => options.filter((groupOption) => groupOption.key === groupSelected),

diff --git a/x-pack/plugins/security_solution/public/common/components/grouping/index.tsx b/x-pack/plugins/security_solution/public/common/components/grouping/index.tsx
@@ -5,7 +5,11 @@
  * 2.0.
  */
 
+import { NONE_GROUP_KEY } from './types';
+
 export * from './container';
 export * from './query';
 export * from './groups_selector';
 export * from './types';
+
+export const isNoneGroup = (groupKey: string) => groupKey === NONE_GROUP_KEY;
diff --git a/x-pack/plugins/security_solution/public/common/components/grouping/types.ts b/x-pack/plugins/security_solution/public/common/components/grouping/types.ts
@@ -9,6 +9,8 @@ import type { GenericBuckets } from '../../../../common/search_strategy/common';
 
 export const DEFAULT_GROUPING_QUERY_ID = 'defaultGroupingQuery';
 
+export const NONE_GROUP_KEY = 'none';
+
 export type RawBucket = GenericBuckets & {
   alertsCount?: {
     value?: number | null; // Elasticsearch returns `null` when a sub-aggregation cannot be computed

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
@@ -22,7 +22,11 @@ import type {
   GroupingTableAggregation,
   RawBucket,
 } from '../../../common/components/grouping';
-import { GroupingContainer, GroupsSelector } from '../../../common/components/grouping';
+import {
+  GroupingContainer,
+  GroupsSelector,
+  isNoneGroup,
+} from '../../../common/components/grouping';
 import { useGlobalTime } from '../../../common/containers/use_global_time';
 import { combineQueries } from '../../../common/lib/kuery';
 import type { AlertWorkflowStatus } from '../../../common/types';
@@ -313,11 +317,11 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     query: queryGroups,
     indexName: signalIndexName,
     queryName: ALERTS_QUERY_NAMES.ALERTS_GROUPING,
-    skip: selectedGroup === 'none',
+    skip: isNoneGroup(selectedGroup),
   });
 
   useEffect(() => {
-    if (selectedGroup !== 'none') {
+    if (!isNoneGroup(selectedGroup)) {
       setAlertsQuery(queryGroups);
     }
   }, [queryGroups, selectedGroup, setAlertsQuery]);
@@ -345,7 +349,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       ? defaultGroupingOptions
       : [
           ...defaultGroupingOptions,
-          ...(selectedGroup
+          ...(!isNoneGroup(selectedGroup)
             ? [
                 {
                   key: selectedGroup,
@@ -362,10 +366,14 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
         groupSelected={selectedGroup}
         data-test-subj="alerts-table-group-selector"
         onGroupChange={(groupSelection: string) => {
+          if (groupSelection === selectedGroup) {
+            return;
+          }
           storage.set(`${ALERTS_TABLE_GROUPS_SELECTION_KEY}-${tableId}`, groupSelection);
           setGroupsActivePage(0);
           setSelectedGroup(groupSelection);
-          if (groupSelection !== 'none' && !options.find((o) => o.key === groupSelection)) {
+
+          if (!isNoneGroup(groupSelection) && !options.find((o) => o.key === groupSelection)) {
             setOptions([
               ...defaultGroupingOptions,
               {
@@ -377,12 +385,6 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
             setOptions(defaultGroupingOptions);
           }
         }}
-        onClearSelected={() => {
-          setGroupsActivePage(0);
-          setSelectedGroup('none');
-          setOptions(defaultGroupingOptions);
-          storage.set(`${ALERTS_TABLE_GROUPS_SELECTION_KEY}-${tableId}`, 'none');
-        }}
         fields={indexPatterns.fields}
         options={options}
         title={i18n.GROUP_ALERTS_SELECTOR}
@@ -426,13 +428,13 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       rowRenderers={defaultRowRenderers}
       sourcererScope={SourcererScopeName.detections}
       start={from}
-      additionalRightMenuOptions={selectedGroup === 'none' ? [groupsSelector] : []}
+      additionalRightMenuOptions={isNoneGroup(selectedGroup) ? [groupsSelector] : []}
     />
   );
 
   return (
     <>
-      {selectedGroup === 'none' ? (
+      {isNoneGroup(selectedGroup) ? (
         dataTable
       ) : (
         <>
@@ -459,7 +461,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
                 rowRenderers={defaultRowRenderers}
                 sourcererScope={SourcererScopeName.detections}
                 start={from}
-                additionalRightMenuOptions={selectedGroup === 'none' ? [groupsSelector] : []}
+                additionalRightMenuOptions={isNoneGroup(selectedGroup) ? [groupsSelector] : []}
               />
             )}
             unit={defaultUnit}