Use endpoint to get list of predefined layout variants (#25947)

Author: maxiadlovskii

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

@@ -46,6 +46,7 @@ import useAuthorizedColumnSchemas from 'components/common/EntityDataTable/hooks/
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
 import { CELL_PADDING } from 'components/common/EntityDataTable/Constants';
 import ActiveSliceColContext from 'components/common/EntityDataTable/contexts/ActiveSliceColContext';
+import useInternalLayoutPreferences from 'components/common/EntityDataTable/hooks/useInternalLayoutPreferences';
 
 import type {
   ColumnRenderers,
@@ -232,18 +233,7 @@ const EntityDataTable = <Entity extends EntityBase, Meta = unknown>({
   const scrolledToRightIndicator = useRef<HTMLDivElement>();
   const scrolledToRight = useIntersectionObserver(scrollContainerRef, scrolledToRightIndicator);
 
-  const [internalAttributeColumnOrder, setInternalAttributeColumnOrder] = useState<Array<string>>(
-    layoutPreferences?.order ?? defaultColumnOrder,
-  );
-  const [internalColumnWidthPreferences, setInternalColumnWidthPreferences] = useState<{
-    [attributeId: string]: number;
-  }>(() =>
-    Object.fromEntries(
-      Object.entries(layoutPreferences?.attributes ?? {}).flatMap(([key, { width }]) =>
-        typeof width === 'number' ? [[key, width]] : [],
-      ),
-    ),
-  );
+  const { setInternalAttributeColumnOrder, setInternalColumnWidthPreferences, internalColumnWidthPreferences, internalAttributeColumnOrder } = useInternalLayoutPreferences({ layoutPreferences, defaultColumnOrder });
 
   const columnOrder = useVisibleColumnOrder(
     layoutPreferences?.attributes,
@@ -311,7 +301,7 @@ const EntityDataTable = <Entity extends EntityBase, Meta = unknown>({
       setInternalAttributeColumnOrder(defaultColumnOrder);
       setInternalColumnWidthPreferences({});
     });
-  }, [defaultColumnOrder, onResetLayoutPreferences]);
+  }, [defaultColumnOrder, onResetLayoutPreferences, setInternalAttributeColumnOrder, setInternalColumnWidthPreferences]);
 
   return (
     <MetaDataProvider<Meta> meta={meta}>

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

@@ -73,10 +73,11 @@ const useSortableCol = (colId: string, disabled: boolean) => {
   const cssTransform = CSS.Translate.toString(transform);
 
   useLayoutEffect(() => {
-    setColumnTransform((cur) => ({
-      ...cur,
-      [colId]: cssTransform,
-    }));
+    setColumnTransform((cur) => {
+      if (cur[colId] === cssTransform) return cur;
+
+      return { ...cur, [colId]: cssTransform };
+    });
   }, [colId, setColumnTransform, cssTransform]);
 
   return {

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

@@ -14,7 +14,8 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import { useState, useLayoutEffect, useMemo } from 'react';
+import { useState, useLayoutEffect, useMemo, useRef } from 'react';
+import isEqual from 'lodash/isEqual';
 
 import {
   DEFAULT_COL_MIN_WIDTH,
@@ -135,6 +136,7 @@ const useColumnWidths = <Entity extends EntityBase>({
   headerMinWidths: { [colId: string]: number };
 }) => {
   const [columnWidths, setColumnWidths] = useState({});
+  const prevColumnWidthsRef = useRef<Record<string, number>>({});
   const staticColumnWidths = useMemo(
     () =>
       calculateStaticColumnWidths({
@@ -161,28 +163,21 @@ const useColumnWidths = <Entity extends EntityBase>({
       staticColumnWidths,
     });
 
-    // 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,
-  ]);
+    const newColumnWidths = calculateColumnWidths({
+      actionsColMinWidth,
+      assignableWidth,
+      attributeColumnIds: columnIds,
+      attributeColumnRenderers: columnRenderersByAttribute,
+      bulkSelectColWidth,
+      staticColumnWidths,
+      headerMinWidths,
+    })
+
+    if (!isEqual(prevColumnWidthsRef.current, newColumnWidths)) {
+      prevColumnWidthsRef.current = newColumnWidths;
+      setColumnWidths(newColumnWidths);
+    }
+  }, [actionsColMinWidth, bulkSelectColWidth, columnRenderersByAttribute, columnIds, scrollContainerWidth, columnWidthPreferences, staticColumnWidths, headerMinWidths]);
 
   return columnWidths;
 };

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

@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { useState } from 'react';
+import isEqual from 'lodash/isEqual';
+
+type ColumnWidthPreferences = {
+  [attributeId: string]: number;
+};
+
+type LayoutPreferences = {
+  order?: Array<string>;
+  attributes?: {
+    [attributeId: string]: {
+      width?: number;
+    };
+  };
+};
+
+const getInitialColumnWidthPreferences = (
+  layoutPreferences?: LayoutPreferences,
+): ColumnWidthPreferences => Object.fromEntries(
+    Object.entries(layoutPreferences?.attributes ?? {}).flatMap(([key, { width }]) =>
+      typeof width === 'number' ? [[key, width]] : [],
+    ),
+  )
+
+const  useInternalLayoutPreferences = ({
+                                        layoutPreferences,
+                                        defaultColumnOrder,
+                                      }: {
+  layoutPreferences?: LayoutPreferences;
+  defaultColumnOrder: Array<string>;
+}) => {
+  const getInitialState = () => ({
+    internalAttributeColumnOrder: layoutPreferences?.order ?? defaultColumnOrder,
+    internalColumnWidthPreferences: getInitialColumnWidthPreferences(layoutPreferences),
+  });
+
+  const [prevInitialState, setPrevInitialState] = useState(getInitialState);
+
+  const [internalAttributeColumnOrder, setInternalAttributeColumnOrder] = useState<Array<string>>(
+    () => prevInitialState.internalAttributeColumnOrder,
+  );
+
+  const [internalColumnWidthPreferences, setInternalColumnWidthPreferences] =
+    useState<ColumnWidthPreferences>(() => prevInitialState.internalColumnWidthPreferences);
+
+  const nextInitialState = getInitialState();
+
+  if (
+    !isEqual(nextInitialState, prevInitialState)
+  ) {
+    setPrevInitialState(nextInitialState);
+    setInternalAttributeColumnOrder(nextInitialState.internalAttributeColumnOrder);
+    setInternalColumnWidthPreferences(nextInitialState.internalColumnWidthPreferences);
+  }
+
+  return {
+    internalAttributeColumnOrder,
+    setInternalAttributeColumnOrder,
+    internalColumnWidthPreferences,
+    setInternalColumnWidthPreferences,
+  };
+}
+
+export default useInternalLayoutPreferences

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 });