[frontend] Alignment fixes (#8443) (#8435)

OpenCTI-Platform · Sep 22, 2024 · 73ac5cc · 73ac5cc
1 parent 1625af7
commit 73ac5cc
Show file tree

Hide file tree

Showing 136 changed files with 145 additions and 171 deletions.
diff --git a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 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 { useTheme } from '@mui/styles';
 import { truncate } from '../utils/String';
 import type { Theme } from './Theme';
 
@@ -13,35 +13,13 @@ interface element {
 }
 
 interface BreadcrumbsProps {
-  variant: 'standard' | 'list' | 'object',
   elements: element[],
 }
 
-// Deprecated - https://mui.com/system/styles/basics/
-// Do not use it for new code.
-const useStyles = makeStyles<Theme>((theme) => ({
-  breadcrumbsList: {
-    marginBottom: theme.spacing(2),
-  },
-  breadcrumbsObject: {
-    marginTop: -5,
-    marginBottom: 15,
-  },
-  breadcrumbsStandard: {
-    marginTop: -5,
-  },
-}));
-
-const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, variant }) => {
-  const classes = useStyles();
-  let className = classes.breadcrumbsStandard;
-  if (variant === 'list') {
-    className = classes.breadcrumbsList;
-  } else if (variant === 'object') {
-    className = classes.breadcrumbsObject;
-  }
+const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements }) => {
+  const theme = useTheme<Theme>();
   return (
-    <MUIBreadcrumbs classes={{ root: className }}>
+    <MUIBreadcrumbs style={{ marginBottom: theme.spacing(2) }}>
       {elements.map((element) => {
         if (element.current) {
           return (

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx
@@ -8,7 +8,7 @@ import { createStyles } from '@mui/styles';
 import { useNavigate } from 'react-router-dom';
 import { useDataTableContext } from '../dataTableUtils';
 import type { DataTableCellProps, DataTableLineProps } from '../dataTableTypes';
-import { DataTableColumn, DataTableVariant } from '../dataTableTypes';
+import { DataTableColumn } from '../dataTableTypes';
 import type { Theme } from '../../Theme';
 import { getMainRepresentative } from '../../../utils/defaultRepresentatives';
 
@@ -118,7 +118,6 @@ const DataTableLine = ({
     disableNavigation,
     onLineClick,
     selectOnLineClick,
-    variant,
   } = useDataTableContext();
   const data = useLineData(row);
 
@@ -143,8 +142,6 @@ const DataTableLine = ({
   const endWithNavigate = effectiveColumns.at(-1)?.id === 'navigate';
 
   const handleSelectLine = (event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
     if (event.shiftKey) {
       onToggleShiftEntity(index, data, event);
     } else {
@@ -155,14 +152,12 @@ const DataTableLine = ({
   const handleRowClick = (event: React.MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
-    if (selectOnLineClick) {
-      handleSelectLine(event);
-    } else if (onLineClick) {
+    if (onLineClick) {
       onLineClick(data);
     } else if (navigable) {
-      if (event.ctrlKey) {
+      if (event.ctrlKey || event.button === 1) {
         window.open(link, '_blank');
-      } else {
+      } else if (event.button !== 2) {
         navigate(link);
       }
     }
@@ -173,8 +168,8 @@ const DataTableLine = ({
       key={row.id}
       className={classes.row}
       // using onMouseDown to redirect before drag and drop happens when used in dashboard widgets
-      onMouseDown={variant === DataTableVariant.widget ? handleRowClick : undefined}
-      onClick={variant !== DataTableVariant.widget ? handleRowClick : undefined}
+      onMouseDown={handleRowClick}
+      onClick={selectOnLineClick ? handleSelectLine : undefined}
       style={{ cursor: clickable ? 'pointer' : 'unset' }}
       data-testid={getMainRepresentative(data)}
     >

diff --git a/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx b/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx
@@ -61,7 +61,6 @@ const styles = (theme) => ({
     display: 'flex',
     alignItems: 'center',
     gap: 10,
-    marginTop: -10,
     paddingBottom: 10,
     flexWrap: 'wrap',
   },

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/ExternalReferences.tsx b/opencti-platform/opencti-front/src/private/components/analyses/ExternalReferences.tsx
@@ -150,7 +150,7 @@ const ExternalReferences: FunctionComponent<ExternalReferencesProps> = () => {
   } as UsePreloadedPaginationFragment<ExternalReferencesLinesPaginationQuery>;
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('External references'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('External references'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/Groupings.tsx b/opencti-platform/opencti-front/src/private/components/analyses/Groupings.tsx
@@ -202,7 +202,7 @@ const Groupings: FunctionComponent<GroupingsProps> = () => {
 
   return (
     <span data-testid="groupings-page">
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Groupings'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Groupings'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/MalwareAnalyses.tsx b/opencti-platform/opencti-front/src/private/components/analyses/MalwareAnalyses.tsx
@@ -165,7 +165,7 @@ const MalwareAnalyses: FunctionComponent = () => {
 
   return (
     <ExportContextProvider>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Malware analyses'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Malware analyses'), current: true }]} />
       {queryRef && (
       <div data-testid='malware-analyses-page'>
         <DataTable

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/Notes.tsx b/opencti-platform/opencti-front/src/private/components/analyses/Notes.tsx
@@ -201,7 +201,7 @@ const Notes: FunctionComponent = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Notes'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Notes'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/Reports.tsx b/opencti-platform/opencti-front/src/private/components/analyses/Reports.tsx
@@ -204,7 +204,7 @@ const Reports: FunctionComponent = () => {
   };
   return (
     <span data-testid="report-page">
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Reports'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Reports'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/external_references/Root.jsx b/opencti-platform/opencti-front/src/private/components/analyses/external_references/Root.jsx
@@ -51,7 +51,7 @@ const RootExternalReference = () => {
             if (props.externalReference && props.connectorsForImport) {
               return (
                 <>
-                  <Breadcrumbs variant="object" elements={[
+                  <Breadcrumbs elements={[
                     { label: t_i18n('Analyses') },
                     { label: t_i18n('External references'), link: '/dashboard/analyses/external_references' },
                   ]}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/groupings/Root.tsx b/opencti-platform/opencti-front/src/private/components/analyses/groupings/Root.tsx
@@ -110,7 +110,7 @@ const RootGrouping = () => {
               const currentAccessRight = useGetCurrentUserAccessRight(grouping.currentUserAccessRight);
               return (
                 <div style={{ paddingRight }}>
-                  <Breadcrumbs variant="object" elements={[
+                  <Breadcrumbs elements={[
                     { label: t_i18n('Analyses') },
                     { label: t_i18n('Groupings'), link: '/dashboard/analyses/groupings' },
                     { label: grouping.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/malware_analyses/Root.tsx b/opencti-platform/opencti-front/src/private/components/analyses/malware_analyses/Root.tsx
@@ -97,7 +97,7 @@ const RootMalwareAnalysis = () => {
               const paddingRight = getPaddingRight(location.pathname, malwareAnalysis.id, '/dashboard/analyses/malware_analyses', false);
               return (
                 <div style={{ paddingRight }}>
-                  <Breadcrumbs variant="object" elements={[
+                  <Breadcrumbs elements={[
                     { label: t_i18n('Analyses') },
                     { label: t_i18n('Malware analyses'), link: '/dashboard/analyses/malware_analyses' },
                     { label: getMainRepresentative(malwareAnalysis), current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/notes/Root.jsx b/opencti-platform/opencti-front/src/private/components/analyses/notes/Root.jsx
@@ -83,7 +83,7 @@ const RootNote = () => {
               const { note } = props;
               return (
                 <>
-                  <Breadcrumbs variant="object" elements={[
+                  <Breadcrumbs elements={[
                     { label: t_i18n('Analyses') },
                     { label: t_i18n('Notes'), link: '/dashboard/analyses/notes' },
                   ]}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/reports/Root.tsx b/opencti-platform/opencti-front/src/private/components/analyses/reports/Root.tsx
@@ -109,7 +109,7 @@ const RootReport = () => {
               const currentAccessRight = useGetCurrentUserAccessRight(report.currentUserAccessRight);
               return (
                 <div style={{ paddingRight }} data-testid="report-details-page">
-                  <Breadcrumbs variant="object" elements={[
+                  <Breadcrumbs elements={[
                     { label: t_i18n('Analyses') },
                     { label: t_i18n('Reports'), link: '/dashboard/analyses/reports' },
                     { label: report.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/Channels.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/Channels.tsx
@@ -153,7 +153,7 @@ const Channels = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Channels'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Channels'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/Malwares.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/Malwares.tsx
@@ -187,7 +187,7 @@ const Malwares = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Malwares'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Malwares'), current: true }]} />
       {viewStorage.view !== 'lines' ? renderCards() : renderList()}
       {!isFABReplaced && (
         <Security needs={[KNOWLEDGE_KNUPDATE]}>

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/Tools.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/Tools.tsx
@@ -144,7 +144,7 @@ const Tools = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Tools'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Tools'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/Vulnerabilities.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/Vulnerabilities.tsx
@@ -157,7 +157,7 @@ const Vulnerabilities = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Vulnerabilities'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Vulnerabilities'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/channels/Root.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/channels/Root.tsx
@@ -130,7 +130,7 @@ const RootChannel = ({ queryRef, channelId }: RootChannelProps) => {
             />
           </Routes>
           <div style={{ paddingRight }}>
-            <Breadcrumbs variant="object" elements={[
+            <Breadcrumbs elements={[
               { label: t_i18n('Arsenal') },
               { label: t_i18n('Channels'), link: '/dashboard/arsenal/channels' },
               { label: channel.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/malwares/Root.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/malwares/Root.tsx
@@ -137,7 +137,7 @@ const RootMalware = ({ queryRef, malwareId }: RootMalwareProps) => {
             />
           </Routes>
           <div style={{ paddingRight }}>
-            <Breadcrumbs variant="object" elements={[
+            <Breadcrumbs elements={[
               { label: t_i18n('Arsenal') },
               { label: t_i18n('Malwares'), link: '/dashboard/arsenal/malwares' },
               { label: malware.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/tools/Root.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/tools/Root.tsx
@@ -131,7 +131,7 @@ const RootTool = ({ queryRef, toolId }: RootToolProps) => {
             />
           </Routes>
           <div style={{ paddingRight }}>
-            <Breadcrumbs variant="object" elements={[
+            <Breadcrumbs elements={[
               { label: t_i18n('Arsenal') },
               { label: t_i18n('Tools'), link: '/dashboard/arsenal/tools' },
               { label: tool.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/Root.tsx b/opencti-platform/opencti-front/src/private/components/arsenal/vulnerabilities/Root.tsx
@@ -130,7 +130,7 @@ const RootVulnerability = ({ queryRef, vulnerabilityId }: RootVulnerabilityProps
             />
           </Routes>
           <div style={{ paddingRight }}>
-            <Breadcrumbs variant="object" elements={[
+            <Breadcrumbs elements={[
               { label: t_i18n('Arsenal') },
               { label: t_i18n('Vulnerabilities'), link: '/dashboard/arsenal/vulnerabilities' },
               { label: vulnerability.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/cases/CaseIncidents.tsx b/opencti-platform/opencti-front/src/private/components/cases/CaseIncidents.tsx
@@ -190,7 +190,7 @@ const CaseIncidents: FunctionComponent<CaseIncidentsProps> = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Incident responses'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Incident responses'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/cases/CaseRfis.tsx b/opencti-platform/opencti-front/src/private/components/cases/CaseRfis.tsx
@@ -186,7 +186,7 @@ const CaseRfis: FunctionComponent<CaseRfisProps> = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for information'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for information'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/cases/CaseRfts.tsx b/opencti-platform/opencti-front/src/private/components/cases/CaseRfts.tsx
@@ -193,7 +193,7 @@ const CaseRfts: FunctionComponent<CaseRftsProps> = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for takedown'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for takedown'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/cases/Feedbacks.tsx b/opencti-platform/opencti-front/src/private/components/cases/Feedbacks.tsx
@@ -178,7 +178,7 @@ const Feedbacks: FunctionComponent<FeedbacksProps> = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Feedbacks'), current: true }]}/>
+      <Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Feedbacks'), current: true }]}/>
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/cases/Tasks.tsx b/opencti-platform/opencti-front/src/private/components/cases/Tasks.tsx
@@ -125,7 +125,7 @@ const Tasks = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Tasks'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Tasks'), current: true }]} />
       {queryRef && (
         <DataTable
           dataColumns={dataColumns}

diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_incidents/Root.tsx b/opencti-platform/opencti-front/src/private/components/cases/case_incidents/Root.tsx
@@ -110,7 +110,7 @@ const RootCaseIncidentComponent = ({ queryRef, caseId }) => {
   const currentAccessRight = useGetCurrentUserAccessRight(caseData.currentUserAccessRight);
   return (
     <div style={{ paddingRight }} data-testid="incident-details-page">
-      <Breadcrumbs variant="object" elements={[
+      <Breadcrumbs elements={[
         { label: t_i18n('Cases') },
         { label: t_i18n('Incident responses'), link: '/dashboard/cases/incidents' },
         { label: caseData.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_rfis/Root.tsx b/opencti-platform/opencti-front/src/private/components/cases/case_rfis/Root.tsx
@@ -105,7 +105,7 @@ const RootCaseRfiComponent = ({ queryRef, caseId }) => {
   const currentAccessRight = useGetCurrentUserAccessRight(caseData.currentUserAccessRight);
   return (
     <div style={{ paddingRight }}>
-      <Breadcrumbs variant="object" elements={[
+      <Breadcrumbs elements={[
         { label: t_i18n('Cases') },
         { label: t_i18n('Requests for information'), link: '/dashboard/cases/rfis' },
         { label: caseData.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_rfts/Root.tsx b/opencti-platform/opencti-front/src/private/components/cases/case_rfts/Root.tsx
@@ -104,7 +104,7 @@ const RootCaseRftComponent = ({ queryRef, caseId }) => {
   const currentAccessRight = useGetCurrentUserAccessRight(caseData.currentUserAccessRight);
   return (
     <div style={{ paddingRight }}>
-      <Breadcrumbs variant="object" elements={[
+      <Breadcrumbs elements={[
         { label: t_i18n('Cases') },
         { label: t_i18n('Requests for takedown'), link: '/dashboard/cases/rfts' },
         { label: caseData.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/cases/feedbacks/Root.tsx b/opencti-platform/opencti-front/src/private/components/cases/feedbacks/Root.tsx
@@ -110,7 +110,7 @@ const RootFeedbackComponent = ({ queryRef, caseId }) => {
   const { canEdit } = useGetCurrentUserAccessRight(feedbackData.currentUserAccessRight);
   return (
     <div style={{ paddingRight }}>
-      <Breadcrumbs variant="object" elements={[
+      <Breadcrumbs elements={[
         { label: t_i18n('Cases') },
         { label: t_i18n('Feedbacks'), link: '/dashboard/cases/feedbacks' },
         { label: feedbackData.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/Root.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/Root.tsx
@@ -91,7 +91,7 @@ const RootTaskComponent = ({ queryRef, taskId }) => {
     <>
       {data ? (
         <div style={{ paddingRight }}>
-          <Breadcrumbs variant="object" elements={[
+          <Breadcrumbs elements={[
             { label: t_i18n('Cases') },
             { label: t_i18n('Tasks'), link: '/dashboard/cases/tasks' },
             { label: data.name, current: true },

diff --git a/opencti-platform/opencti-front/src/private/components/data/Connectors.jsx b/opencti-platform/opencti-front/src/private/components/data/Connectors.jsx
@@ -21,7 +21,7 @@ class Connectors extends Component {
     const { t, classes } = this.props;
     return (
       <div className={classes.container}>
-        <Breadcrumbs variant="list" elements={[{ label: t('Data') }, { label: t('Ingestion') }, { label: t('Connectors'), current: true }]} />
+        <Breadcrumbs elements={[{ label: t('Data') }, { label: t('Ingestion') }, { label: t('Connectors'), current: true }]} />
         <IngestionMenu/>
         <QueryRenderer
           query={workersStatusQuery}

diff --git a/opencti-platform/opencti-front/src/private/components/data/CsvMappers.tsx b/opencti-platform/opencti-front/src/private/components/data/CsvMappers.tsx
@@ -75,7 +75,7 @@ const CsvMappers = () => {
           schemaAttributesQueryRef={queryRefSchemaAttributes}
         >
           <div className={classes.container}>
-            <Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Processing') }, { label: t_i18n('CSV mappers'), current: true }]} />
+            <Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Processing') }, { label: t_i18n('CSV mappers'), current: true }]} />
             <ProcessingMenu />
             <ListLines
               helpers={helpers}

diff --git a/opencti-platform/opencti-front/src/private/components/data/Entities.tsx b/opencti-platform/opencti-front/src/private/components/data/Entities.tsx
@@ -71,7 +71,7 @@ const Entities = () => {
 
   return (
     <div data-testid='data-entities-page'>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Entities'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Entities'), current: true }]} />
       {queryRef && (
         <DataTable
           storageKey={LOCAL_STORAGE_KEY}

diff --git a/opencti-platform/opencti-front/src/private/components/data/Feed.tsx b/opencti-platform/opencti-front/src/private/components/data/Feed.tsx
@@ -117,7 +117,7 @@ const Feed = () => {
       padding: '0 200px 50px 0',
     }}
     >
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Data sharing') }, { label: t_i18n('CSV feeds'), current: true }]} />
+      <Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Data sharing') }, { label: t_i18n('CSV feeds'), current: true }]} />
       <SharingMenu/>
       {feedState.view === 'lines' ? renderLines(paginationOptions) : ''}
       <Security needs={[TAXIIAPI_SETCOLLECTIONS]}>