[frontend] Fixes on DataTable (#7906)

OpenCTI-Platform · Sep 15, 2024 · 695963a · 695963a
1 parent 3b83321
commit 695963a
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 94 deletions.
diff --git a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
@@ -3,8 +3,8 @@ import MUIBreadcrumbs from '@mui/material/Breadcrumbs';
 import { Link } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
-import { Theme } from '@mui/material/styles/createTheme';
 import { truncate } from '../utils/String';
+import type { Theme } from './Theme';
 
 interface element {
   label: string;

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx
@@ -106,16 +106,18 @@ const DataTableFilters = ({
       || (Object.keys(selectedElements).length === 0
         && numberOfElements.number > export_max_size)));
 
+  const hasFilters = availableFilterKeys && availableFilterKeys.length > 0;
+
   return (
     <ExportContext.Provider value={{ selectedIds: Object.keys(selectedElements) }}>
-      {availableFilterKeys && availableFilterKeys.length > 0 && (
-        <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1 }}>
-          <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: theme.spacing(1),
-          }}
-          >
+      <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1 }}>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: theme.spacing(1),
+        }}
+        >
+          {hasFilters && (
             <Filters
               helpers={helpers}
               searchContext={searchContextFinal}
@@ -129,57 +131,57 @@ const DataTableFilters = ({
               availableRelationshipTypes={availableRelationshipTypes}
               availableRelationFilterTypes={availableRelationFilterTypes}
             />
-          </div>
-          <div style={{ display: 'flex' }}>
-            {(variant === DataTableVariant.default) && (
-              <DataTablePagination
-                page={page}
-                setPage={setPage}
-                numberOfElements={numberOfElements}
-              />
+          )}
+        </div>
+        <div style={{ display: 'flex' }}>
+          {(variant === DataTableVariant.default) && (
+            <DataTablePagination
+              page={page}
+              setPage={setPage}
+              numberOfElements={numberOfElements}
+            />
+          )}
+          <ToggleButtonGroup
+            size="small"
+            color="secondary"
+            value={currentView || 'lines'}
+            exclusive={true}
+            onChange={(_, value) => {
+              if (value && value === 'export') {
+                helpers.handleToggleExports();
+              } else if (value && value === 'settings') {
+                setOpenSettings(true);
+              } else if (value && value !== 'export-csv') {
+                helpers.handleChangeView(value);
+              }
+            }}
+          >
+            {additionalHeaderButtons && [...additionalHeaderButtons]}
+            {redirectionModeEnabled && (
+              <ToggleButton
+                size="small"
+                value="settings"
+                aria-label="settings"
+              >
+                <Tooltip title={t_i18n('List settings')}>
+                  <SettingsOutlined fontSize="small" color="primary" />
+                </Tooltip>
+              </ToggleButton>
             )}
-            <ToggleButtonGroup
-              size="small"
-              color="secondary"
-              value={currentView || 'lines'}
-              exclusive={true}
-              onChange={(_, value) => {
-                if (value && value === 'export') {
-                  helpers.handleToggleExports();
-                } else if (value && value === 'settings') {
-                  setOpenSettings(true);
-                } else if (value && value !== 'export-csv') {
-                  helpers.handleChangeView(value);
-                }
-              }}
-            >
-              {additionalHeaderButtons && [...additionalHeaderButtons]}
-              {redirectionModeEnabled && (
-                <ToggleButton
-                  size="small"
-                  value="settings"
-                  aria-label="settings"
-                >
-                  <Tooltip title={t_i18n('List settings')}>
-                    <SettingsOutlined fontSize="small" color="primary" />
-                  </Tooltip>
-                </ToggleButton>
-              )}
-              {!exportDisabled && (
-                <ToggleButton value="export" aria-label="export">
-                  <Tooltip title={t_i18n('Open export panel')}>
-                    <FileDownloadOutlined
-                      fontSize="small"
-                      color={openExports ? 'secondary' : 'primary'}
-                    />
-                  </Tooltip>
-                </ToggleButton>
-              )}
-            </ToggleButtonGroup>
-            {createButton}
-          </div>
+            {!exportDisabled && (
+              <ToggleButton value="export" aria-label="export">
+                <Tooltip title={t_i18n('Open export panel')}>
+                  <FileDownloadOutlined
+                    fontSize="small"
+                    color={openExports ? 'secondary' : 'primary'}
+                  />
+                </Tooltip>
+              </ToggleButton>
+            )}
+          </ToggleButtonGroup>
+          {createButton}
         </div>
-      )}
+      </div>
       {exportContext
         && exportContext.entity_type !== 'Stix-Core-Object'
         && exportContext.entity_type !== 'Stix-Cyber-Observable'

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx
@@ -128,8 +128,7 @@ const DataTablePagination = ({
           size="small"
           disabled={firstItem === 1}
           style={{
-            paddingLeft: 0,
-            paddingRight: 0,
+            padding: 0,
             borderRight: 'none',
             minWidth: 24,
           }}
@@ -152,7 +151,7 @@ const DataTablePagination = ({
               color: 'pagination.main',
             }}
           >
-            <Typography variant="body2" style={{ marginTop: 2 }}>
+            <Typography variant="body2">
               <span>{`${lastItem ? firstItem : 0} - ${lastItem} `}</span>
               <span style={{ opacity: 0.6 }}>
                 {`/ ${numberOfElements.number}${numberOfElements.symbol}`}

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx
@@ -39,6 +39,8 @@ const DataTableBody = ({
   dataQueryArgs,
   pageStart,
   pageSize,
+  setReset,
+  reset = false,
 }: DataTableBodyProps) => {
   const {
     rootRef,
@@ -101,12 +103,12 @@ const DataTableBody = ({
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const clientWidth = currentRefContainer!.clientWidth - storedSize - 12; // Scrollbar size to prevent alignment issues
     for (let i = startsWithSelect ? 1 : 0; i < columns.length - (endsWithNavigate ? 1 : 0); i += 1) {
-      const column = { ...columns[i], ...localStorageColumns[columns[i].id] };
+      const column = reset ? columns[i] : { ...columns[i], ...localStorageColumns[columns[i].id] };
       const shouldCompute = (!column.size || resize || !localStorageColumns[columns[i].id]?.size) && (column.percentWidth && Boolean(computeState));
       let size = column.size ?? 200;
 
       // We must compute px size for columns
-      if (shouldCompute) {
+      if (shouldCompute || reset) {
         size = column.percentWidth * (clientWidth / 100);
         column.size = size;
       }
@@ -153,6 +155,7 @@ const DataTableBody = ({
     }
     /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
+    setReset(false);
     return colSizes;
   }, [
     resize,
@@ -227,7 +230,7 @@ const DataTableBody = ({
     };
   }, []);
   const effectiveColumns = useMemo(() => columns
-    .map((col) => ({ ...col, size: localStorageColumns[col.id]?.size })), [columns, localStorageColumns]);
+    .map((col) => ({ ...col, size: localStorageColumns[col.id]?.size })), [columns, localStorageColumns, reset]);
 
   return (
     <div

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx
@@ -45,7 +45,7 @@ const DataTableComponent = ({
   selectOnLineClick,
   onLineClick,
 }: DataTableProps) => {
-  const localStorageColumns = useDataTableLocalStorage<LocalStorageColumns>(`${storageKey}_columns`, {}, true)[0];
+  const [localStorageColumns] = useDataTableLocalStorage<LocalStorageColumns>(`${storageKey}_columns`, {}, true);
   const toggleHelper = useDataTableToggle(storageKey);
 
   const columnsInitialState = [
@@ -96,6 +96,8 @@ const DataTableComponent = ({
 
   const dataTableHeaderRef = useRef<HTMLDivElement | null>(null);
 
+  const [reset, setReset] = useState(false);
+
   return (
     <DataTableContext.Provider
       value={{
@@ -105,7 +107,7 @@ const DataTableComponent = ({
         effectiveColumns: columns.filter(({ visible }) => visible).sort((a, b) => a.order - b.order),
         initialValues,
         setColumns,
-        resetColumns: () => setColumns(columnsInitialState),
+        resetColumns: () => setReset(true),
         resolvePath,
         redirectionModeEnabled,
         toolbarFilters,
@@ -172,6 +174,8 @@ const DataTableComponent = ({
             pageStart={pageStart}
             pageSize={currentPageSize}
             dataTableHeaderRef={dataTableHeaderRef}
+            reset={reset}
+            setReset={setReset}
           />
         </React.Suspense>
       </>

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeader.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeader.tsx
@@ -65,7 +65,6 @@ const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
   setAnchorEl,
   isActive,
   setActiveColumn,
-  setLocalStorageColumns,
   containerRef,
   sortBy,
   orderAsc,
@@ -74,13 +73,17 @@ const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
 
   const {
     columns,
-    setColumns,
+    actions,
     availableFilterKeys,
     onSort,
     variant,
     formatter: { t_i18n },
+    useDataTableLocalStorage,
+    storageKey,
   } = useDataTableContext();
 
+  const [_, setLocalStorageColumns] = useDataTableLocalStorage<LocalStorageColumns>(`${storageKey}_columns`, {}, true);
+
   return (
     <div
       key={column.id}
@@ -136,11 +139,6 @@ const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
             position={{ x: 3, y: 0 }}
             axis="x"
             onStop={(e, { lastX }) => {
-              const eventTarget = (e?.target as HTMLDivElement);
-              const currentClasses = classes.headerContainer.split(' ');
-              if (!containerRef || !(currentClasses.some((c) => eventTarget?.classList.contains(c)) || eventTarget?.classList.contains('react-draggable-dragging'))) {
-                return;
-              }
               const newSize = (column?.size ?? 0) + lastX;
 
               const effectiveColumns = columns.filter(({ id }) => !['select', 'navigate'].includes(id));
@@ -153,37 +151,29 @@ const DataTableHeader: FunctionComponent<DataTableHeaderProps> = ({
               currentCol.size = newSize;
 
               const startsWithSelect = columns.at(0)?.id === 'select';
-              const endsWithNavigate = columns.at(-1)?.id === 'navigate';
-              let storedSize = SELECT_COLUMN_SIZE;
+              const endsWithTechnical = columns.at(-1)?.id === 'navigate' || actions;
+              let storedSize = endsWithTechnical ? SELECT_COLUMN_SIZE : 0;
               if (startsWithSelect) {
                 storedSize += SELECT_COLUMN_SIZE;
               }
 
-              const clientWidth = (containerRef.current?.clientWidth ?? 0) - storedSize - 10; // Scrollbar size to prevent alignment issues
+              const clientWidth = (containerRef?.current?.clientWidth ?? 0) - storedSize - 12; // Scrollbar size to prevent alignment issues
 
               const otherColumn = effectiveColumns[otherColIndex];
               const clientDiff = clientWidth - effectiveColumns.reduce((acc, col) => acc + (col.size ?? 0), 0);
 
               if (clientDiff > 0) {
-                const percentWidth = (100 * currentCol.size) / currentSize;
                 if (otherColumn) {
                   const otherColumnNewSize = (otherColumn.size ?? 0) - lastX - currentSize + clientWidth;
                   otherColumn.size = otherColumnNewSize;
-                  otherColumn.percentWidth = (otherColumnNewSize * 100) / clientWidth;
                 }
-                currentCol.percentWidth = percentWidth;
               }
 
               setLocalStorageColumns((curr: LocalStorageColumns) => ({
                 ...curr,
                 [column.id]: { ...curr[column.id], size: newSize },
                 [otherColumn.id]: { ...curr[otherColumn.id], ...otherColumn },
               }));
-              const newColumns = [
-                ...(startsWithSelect ? [columns.at(0) as DataTableColumn] : []),
-                ...effectiveColumns,
-                ...(endsWithNavigate ? [columns.at(-1) as DataTableColumn] : [])];
-              setColumns(newColumns);
             }}
           >
             <div

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx
@@ -34,6 +34,8 @@ const useStyles = makeStyles<Theme, { cell?: DataTableColumn, clickable?: boolea
     fontSize: '13px',
   },
   dummyContainer: {
+    height: theme.spacing(6),
+    alignItems: 'center',
     display: 'flex',
     gap: 8,
   },

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts b/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts
@@ -147,6 +147,8 @@ export interface DataTableBodyProps {
   pageSize: number
   pageStart: number
   dataTableHeaderRef: RefObject<HTMLDivElement>
+  reset: boolean,
+  setReset: Dispatch<SetStateAction<boolean>>
 }
 
 export interface DataTableDisplayFiltersProps {

diff --git a/opencti-platform/opencti-front/src/components/nestedMenu/NestedMenuButton.tsx b/opencti-platform/opencti-front/src/components/nestedMenu/NestedMenuButton.tsx
@@ -238,6 +238,7 @@ const NestedMenuButton: React.FC<NestedMenuProps> = ({
           role={undefined}
           placement={index > 0 ? 'right-start' : 'bottom-start'}
           transition
+          style={{ zIndex: 9999 }}
         >
           {({ TransitionProps }) => (
             <Grow

diff --git a/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js b/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js
@@ -60,6 +60,7 @@ const StixCoreObjectOrCoreRelationshipLabelsView = (props) => {
   } = props;
 
   const isLabelManager = useGranted([SETTINGS_SETLABELS]);
+  const canUpdateKnowledge = useGranted([KNOWLEDGE_KNUPDATE]);
 
   const [openAdd, setOpenAdd] = useState(false);
   const [openCreate, setOpenCreate] = useState(false);
@@ -181,17 +182,14 @@ const StixCoreObjectOrCoreRelationshipLabelsView = (props) => {
                   borderColor: label.color,
                   backgroundColor: hexToRGB(label.color),
                 }}
-                onDelete={() => (enableReferences
+                onDelete={canUpdateKnowledge ? () => (enableReferences
                   ? handleOpenCommitDelete(label)
-                  : handleRemoveLabel(label.id))
-                  }
+                  : handleRemoveLabel(label.id)) : undefined}
                 deleteIcon={
-                  <Security needs={[KNOWLEDGE_KNUPDATE]} >
-                    <CancelOutlined
-                      className={classes.deleteIcon}
-                      style={{ color: label.color }}
-                    />
-                  </Security>
+                  <CancelOutlined
+                    className={classes.deleteIcon}
+                    style={{ color: label.color }}
+                  />
                 }
               />
             </Tooltip>

diff --git a/opencti-platform/opencti-front/src/static/css/index.css b/opencti-platform/opencti-front/src/static/css/index.css
@@ -5,7 +5,6 @@
 #root{
   max-height: 100vh;
   height: 100vh;
-  overflow-x: hidden;
 }
 
 :focus {