[frontend] Fix toggle shift and Loader (#5405)

opencti-platform/opencti-front/src/components/Loader.tsx

@@ -4,6 +4,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import { FiligranLoader } from 'filigran-icon';
 import { isNotEmptyField } from '../utils/utils';
 import { UserContext } from '../utils/hooks/useAuth';
+import platformModuleHelper from '../utils/platformModulesHelper';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -59,7 +60,15 @@ const Loader: FunctionComponent<LoaderProps> = ({
   const classes = useStyles();
 
   const { settings } = useContext(UserContext);
-  const hasFiligranLoader = isNotEmptyField(settings?.enterprise_edition) || !settings?.platform_whitemark;
+
+  let loaderEnabled = false;
+  if (settings) {
+    const { isFeatureEnable } = platformModuleHelper(settings);
+    loaderEnabled = isFeatureEnable('FILIGRAN_LOADER');
+  }
+
+  const hasFiligranLoader = loaderEnabled && (isNotEmptyField(settings?.enterprise_edition) || !settings?.platform_whitemark);
+
   return (
     <div
       className={variant === 'inElement' ? classes.containerInElement : classes.container}

opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx

@@ -2,11 +2,13 @@ import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 're
 import makeStyles from '@mui/styles/makeStyles';
 import { createStyles } from '@mui/styles';
 import { Theme as MuiTheme } from '@mui/material/styles/createTheme';
+import * as R from 'ramda';
 import DataTableHeaders from './DataTableHeaders';
 import { useDataTableContext } from '../dataTableUtils';
-import { ColumnSizeVars, DataTableBodyProps, DataTableVariant, LocalStorageColumns } from '../dataTableTypes';
+import { ColumnSizeVars, DataTableBodyProps, DataTableLineProps, DataTableVariant, LocalStorageColumns } from '../dataTableTypes';
 import DataTableLine, { DataTableLinesDummy } from './DataTableLine';
 import { SELECT_COLUMN_SIZE } from './DataTableHeader';
+import { useDataTableToggle } from '../dataTableHooks';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -150,6 +152,41 @@ const DataTableBody = ({
   ]);
   const classes = useStyles({ columnSizeVars });
 
+  const {
+    selectedElements,
+    onToggleEntity,
+  } = useDataTableToggle(storageKey);
+  const onToggleShiftEntity: DataTableLineProps['onToggleShiftEntity'] = (currentIndex, currentEntity, event) => {
+    if (selectedElements && !R.isEmpty(selectedElements)) {
+      // Find the indexes of the first and last selected entities
+      let firstIndex = R.findIndex(
+        (n: { id: string }) => n.id === R.head(R.values(selectedElements))?.id,
+        resolvedData,
+      );
+      if (currentIndex > firstIndex) {
+        let entities: { id: string }[] = [];
+        while (firstIndex <= currentIndex) {
+          entities = [...entities, resolvedData[firstIndex]];
+          firstIndex += 1;
+        }
+        const forcedRemove = R.values(selectedElements).filter(
+          (n) => !entities.map((o) => o.id).includes(n.id),
+        );
+        return onToggleEntity(entities, event, forcedRemove);
+      }
+      let entities: { id: string }[] = [];
+      while (firstIndex >= currentIndex) {
+        entities = [...entities, resolvedData[firstIndex]];
+        firstIndex -= 1;
+      }
+      const forcedRemove = R.values(selectedElements).filter(
+        (n) => !entities.map((o) => o.id).includes(n.id),
+      );
+      return onToggleEntity(entities, event, forcedRemove);
+    }
+    return onToggleEntity(currentEntity, event);
+  };
+
   useLayoutEffect(() => {
     const handleResize = () => setResize(true);
     const handleStorage = ({ key }: StorageEvent) => setTimeout(() => {
@@ -200,14 +237,16 @@ const DataTableBody = ({
         {computeState && (
           <>
             {/* If we have perf issues we should find a way to memoize this */}
-            {resolvedData.map((row: { id: string }) => {
+            {resolvedData.map((row: { id: string }, index: number) => {
               return (
                 <DataTableLine
                   key={row.id}
                   row={row}
                   redirectionMode={redirectionMode}
                   storageHelpers={storageHelpers}
                   effectiveColumns={effectiveColumns}
+                  index={index}
+                  onToggleShiftEntity={onToggleShiftEntity}
                 />
               );
             })}

opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx

@@ -94,7 +94,14 @@ const DataTableCell = ({
   );
 };
 
-const DataTableLine = ({ row, redirectionMode, storageHelpers, effectiveColumns }: DataTableLineProps) => {
+const DataTableLine = ({
+  row,
+  redirectionMode,
+  storageHelpers,
+  effectiveColumns,
+  index,
+  onToggleShiftEntity,
+}: DataTableLineProps) => {
   const theme = useTheme<Theme>();
 
   const {
@@ -145,7 +152,15 @@ const DataTableLine = ({ row, redirectionMode, storageHelpers, effectiveColumns
             sx={{
               color: theme.palette.primary.main,
             }}
-            onClick={(event) => onToggleEntity(data, event)}
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              if (event.shiftKey) {
+                onToggleShiftEntity(index, data, event);
+              } else {
+                onToggleEntity(data, event);
+              }
+            }}
             checked={
               (selectAll
                 && !((data.id || 'id') in (deSelectedElements || {})))

opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts

@@ -171,6 +171,8 @@ export interface DataTableLineProps {
   redirectionMode?: string | undefined
   effectiveColumns: DataTableColumns
   storageHelpers: DataTableProps['storageHelpers']
+  index: number
+  onToggleShiftEntity: (currentIndex: number, currentEntity: { id: string }, event?: React.SyntheticEvent) => void
 }
 
 export interface DataTableCellProps {

opencti-platform/opencti-front/src/utils/hooks/useEntityToggle.ts

@@ -8,7 +8,7 @@ export interface UseEntityToggle<T> {
   selectAll: boolean;
   numberOfSelectedElements: number;
   onToggleEntity: (
-    entity: T,
+    entity: T | T[],
     _?: React.SyntheticEvent,
     forceRemove?: T[]
   ) => void;
@@ -45,7 +45,7 @@ const useEntityToggle = <T extends { id: string }>(
   const dispatch = useBus(busKey, callback);
 
   const onToggleEntity = (
-    entity: T,
+    entity: T | T[],
     event?: React.SyntheticEvent,
     forceRemove: T[] = [],
   ) => {
@@ -57,7 +57,7 @@ const useEntityToggle = <T extends { id: string }>(
       const currentIds = R.values(selectedElements).map((n) => n.id);
       const givenIds = entity.map((n) => n.id);
       const addedIds = givenIds.filter((n) => !currentIds.includes(n));
-      let newSelectedElements = {
+      let newSelectedElements: Record<string, T> = {
         ...selectedElements,
         ...R.indexBy(
           R.prop('id'),
@@ -68,7 +68,7 @@ const useEntityToggle = <T extends { id: string }>(
         newSelectedElements = R.omit(
           forceRemove.map((n) => n.id),
           newSelectedElements,
-        );
+        ) as Record<string, T>;
       }
       setSelectAll(false);
       setSelectedElements(newSelectedElements);

opencti-platform/opencti-graphql/config/default.json

@@ -4,7 +4,7 @@
     "base_path": "",
     "base_url": "http://localhost:4000/",
     "enabled": true,
-    "disabled_dev_features": ["FAB_REPLACEMENT", "DATA_TABLES", "4352_BULK_RELATIONS"],
+    "disabled_dev_features": ["FAB_REPLACEMENT", "DATA_TABLES", "4352_BULK_RELATIONS", "FILIGRAN_LOADER"],
     "https_cert": {
       "ca": [],
       "key": null,