[SIEM] [Detection Engine] Fixes all rules sorting (elastic#62039)

* fixes sorting to what it was in 7.6.1 * removes sortable=true from non-sortable columns, fixes naming of sortable column field from activate to enabled to match the field eui expects to sort on, fixes react render warning due to resetting tableRef's current field during a render
dhurley14 · Apr 1, 2020 · d265460 · d265460
1 parent 6214dbe
commit d265460
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx
@@ -148,7 +148,6 @@ export const getColumns = ({
           </LocalizedDateTooltip>
         );
       },
-      sortable: true,
       truncateText: true,
       width: '20%',
     },
@@ -184,7 +183,7 @@ export const getColumns = ({
     },
     {
       align: 'center',
-      field: 'activate',
+      field: 'enabled',
       name: i18n.COLUMN_ACTIVATE,
       render: (value: Rule['enabled'], item: Rule) => (
         <RuleSwitch
@@ -287,7 +286,6 @@ export const getMonitoringColumns = (): RulesStatusesColumns[] => {
           </LocalizedDateTooltip>
         );
       },
-      sortable: true,
       truncateText: true,
       width: '20%',
     },

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/index.tsx
@@ -41,11 +41,12 @@ import { showRulesTable } from './helpers';
 import { allRulesReducer, State } from './reducer';
 import { RulesTableFilters } from './rules_table_filters/rules_table_filters';
 
+const SORT_FIELD = 'enabled';
 const initialState: State = {
   exportRuleIds: [],
   filterOptions: {
     filter: '',
-    sortField: 'enabled',
+    sortField: SORT_FIELD,
     sortOrder: 'desc',
   },
   loadingRuleIds: [],
@@ -127,9 +128,7 @@ export const AllRules = React.memo<AllRulesProps>(
     });
 
     const sorting = useMemo(
-      () => ({
-        sort: { field: 'enabled', direction: filterOptions.sortOrder },
-      }),
+      () => ({ sort: { field: 'enabled', direction: filterOptions.sortOrder } }),
       [filterOptions.sortOrder]
     );
 
@@ -171,7 +170,7 @@ export const AllRules = React.memo<AllRulesProps>(
         dispatch({
           type: 'updateFilterOptions',
           filterOptions: {
-            sortField: 'enabled', // Only enabled is supported for sorting currently
+            sortField: SORT_FIELD, // Only enabled is supported for sorting currently
             sortOrder: sort?.direction ?? 'desc',
           },
           pagination: { page: page.index + 1, perPage: page.size },

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/reducer.ts b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/reducer.ts
@@ -66,7 +66,10 @@ export const allRulesReducer = (
         tableRef.current != null &&
         tableRef.current.changeSelection != null
       ) {
-        tableRef.current.changeSelection([]);
+        // for future devs: eui basic table is not giving us a prop to set the value, so
+        // we are using the ref in setTimeout to reset on the next loop so that we
+        // do not get a warning telling us we are trying to update during a render
+        window.setTimeout(() => tableRef?.current?.changeSelection([]), 0);
       }
 
       return {

diff --git a/...cy/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.tsx b/...cy/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.tsx
@@ -97,7 +97,7 @@ const AllRulesTablesComponent: React.FC<AllRulesTablesProps> = ({
           onChange={tableOnChangeCallback}
           pagination={paginationMemo}
           ref={tableRef}
-          {...sorting}
+          sorting={sorting}
           selection={hasNoPermissions ? undefined : euiBasicTableSelectionProps}
         />
       )}
@@ -111,7 +111,7 @@ const AllRulesTablesComponent: React.FC<AllRulesTablesProps> = ({
           noItemsMessage={emptyPrompt}
           onChange={tableOnChangeCallback}
           pagination={paginationMemo}
-          {...sorting}
+          sorting={sorting}
         />
       )}
     </>