Use endpoint to get list of predefined layout variants

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useColumnWidths.ts

@@ -15,6 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import { useState, useLayoutEffect, useMemo } from 'react';
+import isEqual from 'lodash/isEqual';
 
 import {
   DEFAULT_COL_MIN_WIDTH,
@@ -161,28 +162,19 @@ const useColumnWidths = <Entity extends EntityBase>({
       staticColumnWidths,
     });
 
+    const newColumnWidths = calculateColumnWidths({
+      actionsColMinWidth,
+      assignableWidth,
+      attributeColumnIds: columnIds,
+      attributeColumnRenderers: columnRenderersByAttribute,
+      bulkSelectColWidth,
+      staticColumnWidths,
+      headerMinWidths,
+    })
+
     // eslint-disable-next-line react-hooks/set-state-in-effect
-    setColumnWidths(
-      calculateColumnWidths({
-        actionsColMinWidth,
-        assignableWidth,
-        attributeColumnIds: columnIds,
-        attributeColumnRenderers: columnRenderersByAttribute,
-        bulkSelectColWidth,
-        staticColumnWidths,
-        headerMinWidths,
-      }),
-    );
-  }, [
-    actionsColMinWidth,
-    bulkSelectColWidth,
-    columnRenderersByAttribute,
-    columnIds,
-    scrollContainerWidth,
-    columnWidthPreferences,
-    staticColumnWidths,
-    headerMinWidths,
-  ]);
+    setColumnWidths((cur) => isEqual(cur, newColumnWidths) ? cur : newColumnWidths)
+  }, [actionsColMinWidth, bulkSelectColWidth, columnRenderersByAttribute, columnIds, scrollContainerWidth, columnWidthPreferences, staticColumnWidths, headerMinWidths]);
 
   return columnWidths;
 };

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useTableLayout.test.tsx

@@ -90,6 +90,58 @@ describe('useTableLayout hook', () => {
     });
   });
 
+  it('should provide default slicing preferences when there are no user slicing preferences', async () => {
+    const defaultSlicing = { sliceColumn: 'status', sortBy: 'risk_score', order: 'desc' as const };
+
+    asMock(useUserLayoutPreferences).mockReturnValue({ data: undefined, isInitialLoading: false, refetch: () => {} });
+
+    const { result } = renderHook(
+      () =>
+        useTableLayout({
+          entityTableId: 'streams',
+          ...defaultLayout,
+          defaultSlicing,
+        }),
+      { wrapper },
+    );
+
+    expect(result.current.layoutConfig).toEqual({
+      attributes: undefined,
+      order: undefined,
+      sort: defaultLayout.defaultSort,
+      pageSize: defaultLayout.defaultPageSize,
+      slicing: defaultSlicing,
+    });
+  });
+
+  it('should allow user preferences to disable default slicing', async () => {
+    const defaultSlicing = { sliceColumn: 'status', sortBy: 'risk_score', order: 'desc' as const };
+
+    asMock(useUserLayoutPreferences).mockReturnValue({
+      data: { slicing: null },
+      isInitialLoading: false,
+      refetch: () => {},
+    });
+
+    const { result } = renderHook(
+      () =>
+        useTableLayout({
+          entityTableId: 'streams',
+          ...defaultLayout,
+          defaultSlicing,
+        }),
+      { wrapper },
+    );
+
+    expect(result.current.layoutConfig).toEqual({
+      attributes: undefined,
+      order: undefined,
+      sort: defaultLayout.defaultSort,
+      pageSize: defaultLayout.defaultPageSize,
+      slicing: undefined,
+    });
+  });
+
   it('should merge user preferences with defaults', async () => {
     asMock(useUserLayoutPreferences).mockReturnValue({
       data: { perPage: layoutPreferences.perPage },

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useTableLayout.ts

@@ -32,35 +32,28 @@ const useTableLayout = ({
   entityTableId,
   layoutVariant,
   defaultSort,
+  defaultSlicing,
   defaultPageSize,
 }: DefaultLayout): {
   isInitialLoading: boolean;
   layoutConfig: LayoutConfig;
 } => {
   const { data: userLayoutPreferences = {}, isInitialLoading } = useUserLayoutPreferences(entityTableId, layoutVariant);
 
-  return useMemo(
-    () => ({
+  return useMemo(() => {
+    const hasSlicingPreference = Object.prototype.hasOwnProperty.call(userLayoutPreferences, 'slicing');
+
+    return {
       layoutConfig: {
         attributes: userLayoutPreferences?.attributes,
         order: userLayoutPreferences.order,
         pageSize: userLayoutPreferences.perPage ?? defaultPageSize,
-        slicing: userLayoutPreferences.slicing,
+        slicing: hasSlicingPreference ? (userLayoutPreferences.slicing ?? undefined) : defaultSlicing,
         sort: userLayoutPreferences.sort ?? defaultSort,
       },
       isInitialLoading,
-    }),
-    [
-      defaultPageSize,
-      defaultSort,
-      isInitialLoading,
-      userLayoutPreferences?.attributes,
-      userLayoutPreferences.order,
-      userLayoutPreferences.perPage,
-      userLayoutPreferences.slicing,
-      userLayoutPreferences.sort,
-    ],
-  );
+    };
+  }, [defaultPageSize, defaultSlicing, defaultSort, isInitialLoading, userLayoutPreferences]);
 };
 
 export default useTableLayout;

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useUpdateUserLayoutPreferences.test.tsx

@@ -71,6 +71,22 @@ describe('useUserSearchFilterQuery hook', () => {
     );
   });
 
+  it('should update null slicing preferences', async () => {
+    const { result } = renderHook(() => useUpdateUserLayoutPreferences('streams'), { wrapper });
+
+    result.current.mutateAsync({
+      ...layoutPreferences,
+      slicing: null,
+    });
+
+    await waitFor(() =>
+      expect(fetch).toHaveBeenCalledWith('POST', expect.stringContaining('/entitylists/preferences/streams'), {
+        ...layoutPreferencesJSON,
+        slicing: null,
+      }),
+    );
+  });
+
   it('should update user layout preferences for a layout variant', async () => {
     const { result } = renderHook(() => useUpdateUserLayoutPreferences('streams', 'security-events'), { wrapper });
 

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useUpdateUserLayoutPreferences.ts

@@ -18,10 +18,31 @@ import { useMutation } from '@tanstack/react-query';
 
 import fetch from 'logic/rest/FetchProvider';
 import { qualifyUrl } from 'util/URLUtils';
-import type { TableLayoutPreferences, TableLayoutPreferencesJSON } from 'components/common/EntityDataTable/types';
+import type {
+  SlicingPreferences,
+  SlicingPreferencesJSON,
+  TableLayoutPreferences,
+  TableLayoutPreferencesJSON,
+} from 'components/common/EntityDataTable/types';
 import UserNotification from 'util/UserNotification';
 import useUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUserLayoutPreferences';
 
+const slicingToJSON = (slicing?: SlicingPreferences | null): SlicingPreferencesJSON | null | undefined => {
+  if (slicing === null) {
+    return null;
+  }
+
+  if (!slicing) {
+    return undefined;
+  }
+
+  return {
+    slice_column: slicing.sliceColumn,
+    sort_by: slicing.sortBy,
+    order: slicing.order,
+  };
+};
+
 const preferencesToJSON = <T>({
   attributes,
   sort,
@@ -33,13 +54,7 @@ const preferencesToJSON = <T>({
   attributes,
   sort: sort ? { order: sort.direction, field: sort.attributeId } : undefined,
   per_page: perPage,
-  slicing: slicing
-    ? {
-        slice_column: slicing.sliceColumn,
-        sort_by: slicing.sortBy,
-        order: slicing.order,
-      }
-    : undefined,
+  slicing: slicingToJSON(slicing),
   custom_preferences: customPreferences,
   order,
 });

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useUserLayoutPreferences.test.tsx

@@ -74,6 +74,24 @@ describe('useUserSearchFilterQuery hook', () => {
     });
   });
 
+  it('should return null slicing preferences', async () => {
+    asMock(fetch).mockImplementation(() =>
+      Promise.resolve({
+        ...layoutPreferencesJSON,
+        slicing: null,
+      }),
+    );
+    const { result } = renderHook(() => useUserLayoutPreferences('streams'), { wrapper });
+
+    await waitFor(() => result.current.isInitialLoading);
+    await waitFor(() => !result.current.isInitialLoading);
+
+    expect(result.current.data).toEqual({
+      ...layoutPreferences,
+      slicing: null,
+    });
+  });
+
   it('should fetch layout preferences for a layout variant', async () => {
     asMock(fetch).mockImplementation(() => Promise.resolve(layoutPreferencesJSON));
     const { result } = renderHook(() => useUserLayoutPreferences('streams', 'security-events'), { wrapper });

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useUserLayoutPreferences.ts

@@ -23,27 +23,30 @@ import { defaultOnError } from 'util/conditional/onError';
 
 const INITIAL_DATA = {};
 
-const preferencesFromJSON = ({
-  attributes,
-  sort,
-  per_page,
-  slicing,
-  custom_preferences,
-  order,
-}: TableLayoutPreferencesJSON): TableLayoutPreferences => ({
-  attributes,
-  sort: sort ? { attributeId: sort.field, direction: sort.order } : undefined,
-  perPage: per_page,
-  slicing: slicing
-    ? {
-        sliceColumn: slicing.slice_column,
-        sortBy: slicing.sort_by,
-        order: slicing.order,
-      }
-    : undefined,
-  customPreferences: custom_preferences,
-  order,
-});
+const preferencesFromJSON = (preferences: TableLayoutPreferencesJSON): TableLayoutPreferences => {
+  const { attributes, sort, per_page, slicing, custom_preferences, order } = preferences;
+  const hasSlicingPreference = Object.prototype.hasOwnProperty.call(preferences, 'slicing');
+
+  const result: TableLayoutPreferences = {
+    attributes,
+    sort: sort ? { attributeId: sort.field, direction: sort.order } : undefined,
+    perPage: per_page,
+    customPreferences: custom_preferences,
+    order,
+  };
+
+  if (hasSlicingPreference) {
+    result.slicing = slicing
+      ? {
+          sliceColumn: slicing.slice_column,
+          sortBy: slicing.sort_by,
+          order: slicing.order,
+        }
+      : null;
+  }
+
+  return result;
+};
 const preferencesUrl = (entityId: string, layoutVariant?: string) => {
   const params = layoutVariant ? `?layout_variant=${encodeURIComponent(layoutVariant)}` : '';
 
@@ -57,7 +60,7 @@ const useUserLayoutPreferences = <T>(
   entityId: string,
   layoutVariant?: string,
 ): { data: TableLayoutPreferences<T>; isInitialLoading: boolean; refetch: () => void } => {
-  const { data, isInitialLoading, refetch } = useQuery({
+  const { data, isLoading: isInitialLoading, refetch } = useQuery({
     queryKey: ['table-layout', entityId, layoutVariant],
     queryFn: () =>
       defaultOnError(

graylog2-web-interface/src/components/common/EntityDataTable/types.ts

@@ -84,7 +84,7 @@ export type TableLayoutPreferences<T = { [key: string]: unknown }> = {
   sort?: Sort;
   perPage?: number;
   order?: Array<string>;
-  slicing?: SlicingPreferences;
+  slicing?: SlicingPreferences | null;
   customPreferences?: T;
 };
 
@@ -95,7 +95,7 @@ export type TableLayoutPreferencesJSON<T = { [key: string]: unknown }> = {
     order: 'asc' | 'desc';
   };
   per_page?: number;
-  slicing?: SlicingPreferencesJSON;
+  slicing?: SlicingPreferencesJSON | null;
   custom_preferences?: T;
   order?: Array<string>;
 };
@@ -117,6 +117,7 @@ export type DefaultLayout = {
   entityTableId: string;
   layoutVariant?: string;
   defaultSort: Sort;
+  defaultSlicing?: SlicingPreferences;
   defaultDisplayedAttributes: Array<string>;
   defaultPageSize: number;
   defaultColumnOrder: Array<string>;

graylog2-web-interface/src/components/common/PaginatedEntityTable/PaginatedEntityTable.tsx

@@ -233,7 +233,7 @@ const PaginatedEntityTableInner = <T extends EntityBase, M = unknown>({
       }
 
       updateTableLayout({
-        slicing: newSliceCol ? defaultSlicingPreferences(newSliceCol, columnSchemas) : undefined,
+        slicing: newSliceCol ? defaultSlicingPreferences(newSliceCol, columnSchemas) : null,
       });
     },
     [columnSchemas, fetchOptions.sliceCol, onChangeSlicingFilter, updateTableLayout],
@@ -318,6 +318,7 @@ const PaginatedEntityTableInner = <T extends EntityBase, M = unknown>({
                 ) : (
                   <EntityDataTable<T, M>
                     entities={list}
+                    key={`${tableLayout?.entityTableId}${tableLayout?.layoutVariant}`}
                     defaultDisplayedColumns={tableLayout.defaultDisplayedAttributes}
                     layoutPreferences={{
                       attributes: layoutConfig.attributes,

graylog2-web-interface/src/components/common/PaginatedEntityTable/hooks/useLayoutVariant.ts

@@ -30,14 +30,9 @@ const useLayoutVariant = () => {
     [activeLayoutVariant, setActiveLayout],
   );
 
-  const resetLayoutVariant = useCallback(() => {
-    setActiveLayout(undefined);
-  }, [setActiveLayout]);
-
   return {
     activeLayoutVariant,
     selectLayoutVariant,
-    resetLayoutVariant,
   };
 };