[frontend] Refacto of data tables dimensions computation (#8808)

OpenCTI-Platform · Dec 3, 2024 · 0c3677c · 0c3677c
1 parent 0640390
commit 0c3677c
Show file tree

Hide file tree

Showing 29 changed files with 771 additions and 841 deletions.
diff --git a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
@@ -25,7 +25,11 @@ const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, isSensitiv
   );
 
   return (
-    <div data-testid="navigation" style={{ marginBottom: theme.spacing(2), display: 'flex' }}>
+    <div
+      id="page-breadcrumb"
+      data-testid="navigation"
+      style={{ marginBottom: theme.spacing(2), display: 'flex' }}
+    >
       {elements.map((element, index) => {
         if (element.current) {
           return (

diff --git a/opencti-platform/opencti-front/src/components/ItemOperations.tsx b/opencti-platform/opencti-front/src/components/ItemOperations.tsx
@@ -1,7 +1,7 @@
 import Chip from '@mui/material/Chip';
 import React, { FunctionComponent } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/styles';
 import type { Theme } from './Theme';
 
 const useStyles = makeStyles(() => ({

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetContainer.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetContainer.tsx
@@ -1,6 +1,6 @@
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
-import React, { CSSProperties, forwardRef, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 
 // Deprecated - https://mui.com/system/styles/basics/
@@ -10,7 +10,6 @@ const useStyles = makeStyles({
     minHeight: 110,
     height: '100%',
     margin: '4px 0 0 0',
-    padding: '0 0 10px 0',
     borderRadius: 4,
   },
 });
@@ -23,17 +22,17 @@ interface WidgetContainerProps {
   withoutTitle?: boolean
 }
 
-const WidgetContainer = forwardRef<HTMLDivElement, WidgetContainerProps>(({
+const WidgetContainer = ({
   children,
   height,
   title,
   variant,
   withoutTitle = false,
-}, ref) => {
+}: WidgetContainerProps) => {
   const classes = useStyles();
 
   return (
-    <div ref={ref} style={{ height: height || '100%' }}>
+    <div style={{ height: height || '100%' }}>
       {!withoutTitle && (
         <Typography
           variant={variant === 'inEntity' ? 'h3' : 'h4'}
@@ -57,8 +56,6 @@ const WidgetContainer = forwardRef<HTMLDivElement, WidgetContainerProps>(({
       )}
     </div>
   );
-});
-
-WidgetContainer.displayName = 'WidgetContainer';
+};
 
 export default WidgetContainer;
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx
@@ -11,7 +11,6 @@ import { DataTableProps } from './dataTableTypes';
 import useAuth from '../../utils/hooks/useAuth';
 import { useDataTable, useLineData } from './dataTableHooks';
 import DataTableComponent from './components/DataTableComponent';
-import { SELECT_COLUMN_SIZE } from './components/DataTableHeader';
 import { UsePreloadedPaginationFragment } from '../../utils/hooks/usePreloadedPaginationFragment';
 import { FilterIconButtonProps } from '../FilterIconButton';
 import { isNotEmptyField } from '../../utils/utils';
@@ -95,7 +94,6 @@ const DataTableInternalFilters = ({
           availableEntityTypes={availableEntityTypes}
           additionalFilterKeys={additionalFilterKeys}
           entityTypes={computedEntityTypes}
-          paginationOptions={paginationOptions}
         />
       )}
     </>
@@ -135,7 +133,7 @@ const DataTableInternalToolbar = ({
     <div
       style={{
         background: theme.palette.background.accent,
-        width: `calc(( var(--header-table-size) - ${SELECT_COLUMN_SIZE} ) * 1px)`,
+        flex: 1,
       }}
     >
       <DataTableToolBar

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx
@@ -24,7 +24,6 @@ const DataTablePagination = ({
 
   const {
     resetColumns,
-    useDataTableColumnsLocalStorage,
     useDataTablePaginationLocalStorage: {
       viewStorage: {
         pageSize,
@@ -57,10 +56,7 @@ const DataTablePagination = ({
     }
   }, [page, pageSize]);
 
-  const [_, setLocalStorageColumns] = useDataTableColumnsLocalStorage;
-
   const resetTable = () => {
-    setLocalStorageColumns({});
     resetColumns();
     helpers.handleAddProperty('pageSize', '25');
   };