[frontend] - Fixes and standardization of some front parts (#8941)

OpenCTI-Platform · Jan 27, 2025 · 7fa79c9 · 7fa79c9
1 parent 38f9093
commit 7fa79c9
Show file tree

Hide file tree

Showing 18 changed files with 459 additions and 454 deletions.
diff --git a/opencti-platform/opencti-front/src/components/AlertInfo.tsx b/opencti-platform/opencti-front/src/components/AlertInfo.tsx
@@ -1,24 +1,25 @@
 import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { useTheme } from '@mui/styles';
-import { Theme } from 'src/components/Theme';
+import type { Theme } from './Theme';
 
 type AlertInfoProps = {
-  content: string | ReactNode;
+  content: string | ReactNode
+  style?: CSSProperties
 };
 
-const AlertInfo = ({ content }: AlertInfoProps) => {
+const AlertInfo = ({ content, style }: AlertInfoProps) => {
   const theme = useTheme<Theme>();
 
   return (
-    <div style={{ width: '100%', margin: `${theme.spacing(2)} 0` }}>
+    <div style={style}>
       <Alert
         severity="info"
         variant="outlined"
-        style={{ padding: '0px 10px' }}
+        style={{ padding: `0 ${theme.spacing(1)}` }}
       >
-        <Typography>
+        <Typography variant={'body2'}>
           {content}
         </Typography>
       </Alert>

diff --git a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
@@ -14,10 +14,11 @@ interface element {
 
 interface BreadcrumbsProps {
   elements: element[]
+  noMargin?: boolean
   isSensitive?: boolean
 }
 
-const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, isSensitive = false }) => {
+const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, noMargin = false, isSensitive = false }) => {
   const theme = useTheme<Theme>();
 
   const SplitDiv = ({ show = true }) => (
@@ -28,7 +29,7 @@ const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, isSensitiv
     <div
       id="page-breadcrumb"
       data-testid="navigation"
-      style={{ marginBottom: theme.spacing(2), display: 'flex' }}
+      style={{ marginBottom: noMargin ? undefined : theme.spacing(2), display: 'flex' }}
     >
       {elements.map((element, index) => {
         if (element.current) {

diff --git a/opencti-platform/opencti-front/src/components/PageContainer.tsx b/opencti-platform/opencti-front/src/components/PageContainer.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import { useTheme } from '@mui/styles';
+import type { Theme } from './Theme';
+
+const PageContainer: FunctionComponent<{ children: React.ReactNode, withRightMenu: boolean }> = ({ children, withRightMenu = false }) => {
+  const theme = useTheme<Theme>();
+  return (
+    <div
+      style={{
+        margin: 0,
+        padding: 0,
+        paddingRight: withRightMenu ? '200px' : undefined,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(2),
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default PageContainer;
diff --git a/opencti-platform/opencti-front/src/components/ThemeDark.ts b/opencti-platform/opencti-front/src/components/ThemeDark.ts
@@ -69,6 +69,7 @@ const ThemeDark = (
     fontFamily: '"IBM Plex Sans", sans-serif',
     body2: {
       fontSize: '0.8rem',
+      lineHeight: '1.2rem',
     },
     body1: {
       fontSize: '0.9rem',

diff --git a/opencti-platform/opencti-front/src/components/ThemeLight.ts b/opencti-platform/opencti-front/src/components/ThemeLight.ts
@@ -70,6 +70,7 @@ const ThemeLight = (
     fontFamily: '"IBM Plex Sans", sans-serif',
     body2: {
       fontSize: '0.8rem',
+      lineHeight: '1.2rem',
     },
     body1: {
       fontSize: '0.9rem',

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx
@@ -228,7 +228,6 @@ const DataTable = (props: OCTIDataTableProps) => {
 
   return (
     <>
-
       <DataTableComponent
         {...props}
         availableFilterKeys={availableFilterKeys}

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx
@@ -39,7 +39,6 @@ export const DataTableDisplayFilters = ({
   availableEntityTypes,
   entityTypes,
 }: DataTableDisplayFiltersProps) => {
-  const theme = useTheme<Theme>();
   const {
     useDataTablePaginationLocalStorage: {
       helpers,
@@ -52,7 +51,7 @@ export const DataTableDisplayFilters = ({
   }
 
   return (
-    <div id="filter-container" style={{ minHeight: 10, marginBottom: theme.spacing(2) }}>
+    <div id="filter-container" style={{ minHeight: 10 }}>
       <FilterIconButton
         helpers={helpers}
         availableFilterKeys={availableFilterKeys}

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableContext.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableContext.tsx
@@ -11,7 +11,9 @@ interface DataTableProviderProps {
 export const DataTableProvider = ({ children, initialValue }: DataTableProviderProps) => {
   return (
     <DataTableContext.Provider value={initialValue}>
-      {children}
+      <div> {/* TODO: This is only temporary because of the components that defines their own margins in Filters */}
+        {children}
+      </div>
     </DataTableContext.Provider>
   );
 };

diff --git a/opencti-platform/opencti-front/src/private/components/common/danger_zone/DangerZoneBlock.tsx b/opencti-platform/opencti-front/src/private/components/common/danger_zone/DangerZoneBlock.tsx
@@ -28,7 +28,7 @@ const DangerZoneBlock: FunctionComponent<DangerZoneBlockProps> = ({ title, compo
   if (isSensitive) {
     currentTitle = (
       <>
-        {title}<DangerZoneChip />
+        {title}<DangerZoneChip style={{ marginTop: 0, marginLeft: 8 }} />
       </>
     );
   }
@@ -40,7 +40,7 @@ const DangerZoneBlock: FunctionComponent<DangerZoneBlockProps> = ({ title, compo
           <Typography
             variant="h4"
             gutterBottom
-            style={sx?.title}
+            style={{ ...sx?.title, height: '18px' }}
           >
             {currentTitle}
           </Typography>
@@ -58,7 +58,7 @@ const DangerZoneBlock: FunctionComponent<DangerZoneBlockProps> = ({ title, compo
         <Typography
           variant="h4"
           gutterBottom
-          style={sx?.title}
+          style={{ ...sx?.title, height: '16px' }}
         >
           {currentTitle}
         </Typography>

diff --git a/opencti-platform/opencti-front/src/private/components/data/Management.tsx b/opencti-platform/opencti-front/src/private/components/data/Management.tsx
@@ -19,6 +19,7 @@ import useAuth from '../../../utils/hooks/useAuth';
 import { addFilter, emptyFilterGroup, useBuildEntityTypeBasedFilterContext, useGetDefaultFilterObject } from '../../../utils/filters/filtersUtils';
 import useConnectedDocumentModifier from '../../../utils/hooks/useConnectedDocumentModifier';
 import useEnterpriseEdition from '../../../utils/hooks/useEnterpriseEdition';
+import PageContainer from '../../../components/PageContainer';
 
 const LOCAL_STORAGE_KEY = 'restrictedEntities';
 
@@ -30,17 +31,17 @@ export const managementDefinitionsLinesPaginationQuery = graphql`
     $orderBy: StixCoreObjectsOrdering
     $orderMode: OrderingMode
     $filters: FilterGroup
-    ) {
-      ...ManagementDefinitionsLines_data
-      @arguments(
-        search: $search
-        count: $count
-        cursor: $cursor
-        orderBy: $orderBy
-        orderMode: $orderMode
-        filters: $filters
-      )
-    }
+  ) {
+    ...ManagementDefinitionsLines_data
+    @arguments(
+      search: $search
+      count: $count
+      cursor: $cursor
+      orderBy: $orderBy
+      orderMode: $orderMode
+      filters: $filters
+    )
+  }
 `;
 
 const managementDefinitionLineFragment = graphql`
@@ -57,7 +58,7 @@ const managementDefinitionLineFragment = graphql`
     }
     createdBy {
       ... on Identity {
-          name
+        name
       }
     }
     ... on Container {
@@ -107,7 +108,7 @@ const managementDefinitionsLinesFragment = graphql`
       orderBy: $orderBy
       orderMode: $orderMode
       filters: $filters
-    ) 
+    )
     @connection(key: "Pagination_stixCoreObjectsRestricted") {
       edges {
         node {
@@ -214,17 +215,19 @@ const Management = () => {
   } as UsePreloadedPaginationFragment<ManagementDefinitionsLinesPaginationQuery>;
 
   return isEnterpriseEdition ? (
-    <div data-testid='data-management-page'>
-      <div style={{ paddingRight: isRightMenuManagementEnable ? '200px' : 0 }}>
-        <Breadcrumbs elements={[
-          { label: t_i18n('Data') },
-          { label: t_i18n('Restriction') },
-          { label: t_i18n('Restricted entities'), current: true },
-        ]}
+    <div data-testid="data-management-page">
+      {isRightMenuManagementEnable && (
+        <ManagementMenu />
+      )}
+      <PageContainer withRightMenu={isRightMenuManagementEnable}>
+        <Breadcrumbs
+          elements={[
+            { label: t_i18n('Data') },
+            { label: t_i18n('Restriction') },
+            { label: t_i18n('Restricted entities'), current: true },
+          ]}
+          noMargin
         />
-        {isRightMenuManagementEnable && (
-          <ManagementMenu/>
-        )}
         <AlertInfo
           content={t_i18n('This list displays all the entities that have some access restriction enabled, meaning that they are only accessible to some specific users. You can remove this access restriction on this screen.')}
         />
@@ -242,10 +245,10 @@ const Management = () => {
             removeAuthMembersEnabled={true}
           />
         )}
-      </div>
+      </PageContainer>
     </div>
   ) : (
-    <EnterpriseEdition feature={t_i18n('Authorized_members')}/>
+    <EnterpriseEdition feature={t_i18n('Authorized_members')} />
   );
 };
 

diff --git a/opencti-platform/opencti-front/src/private/components/data/Playbooks.tsx b/opencti-platform/opencti-front/src/private/components/data/Playbooks.tsx
@@ -181,16 +181,17 @@ const Playbooks: FunctionComponent = () => {
     },
   };
   return (
-    <div style={{ paddingRight: '200px' }}>
-      <Breadcrumbs elements={[
-        { label: t_i18n('Data') },
-        { label: t_i18n('Processing') },
-        {
-          label: t_i18n('Automation'),
-          current: true,
-        }]}
+    <div style={{ paddingRight: '200px', height: '100%' }}>
+      <Breadcrumbs
+        elements={[
+          { label: t_i18n('Data') },
+          { label: t_i18n('Processing') },
+          {
+            label: t_i18n('Automation'),
+            current: true,
+          }]}
       />
-      <ProcessingMenu/>
+      <ProcessingMenu />
       {isEnterpriseEdition ? (
         <>
           {queryRef && (
@@ -204,7 +205,7 @@ const Playbooks: FunctionComponent = () => {
               lineFragment={playbookFragment}
               entityTypes={['Playbook']}
               searchContextFinal={{ entityTypes: ['Playbook'] }}
-              taskScope='PLAYBOOK'
+              taskScope="PLAYBOOK"
               actions={(row) => (
                 <PlaybookPopover
                   paginationOptions={queryPaginationOptions}
@@ -214,14 +215,14 @@ const Playbooks: FunctionComponent = () => {
               )}
               createButton={
                 <Security needs={[KNOWLEDGE_KNUPDATE]}>
-                  <PlaybookCreation paginationOptions={queryPaginationOptions}/>
+                  <PlaybookCreation paginationOptions={queryPaginationOptions} />
                 </Security>
               }
             />
           )}
         </>
       ) : (
-        <EnterpriseEdition feature={t_i18n('Playbook')}/>
+        <EnterpriseEdition feature={t_i18n('Playbook')} />
       )}
     </div>
   );