[frontend] Fix public feeds display (#6244)

OpenCTI-Platform · Mar 3, 2024 · 591d3b5 · 591d3b5
1 parent 76b6c1f
commit 591d3b5
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 98 deletions.
diff --git a/opencti-platform/opencti-front/package.json b/opencti-platform/opencti-front/package.json
@@ -10,6 +10,8 @@
     "@date-io/date-fns": "3.0.0",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
+    "@fontsource/geologica": "5.0.3",
+    "@fontsource/ibm-plex-sans": "5.0.18",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",
@@ -81,8 +83,6 @@
     "rxjs": "7.8.1",
     "subscriptions-transport-ws": "0.11.0",
     "three-spritetext": "1.8.2",
-    "typeface-ibm-plex-sans": "1.1.13",
-    "typeface-roboto": "1.1.13",
     "unified": "11.0.4",
     "use-analytics": "1.1.0",
     "uuid": "9.0.1",

diff --git a/opencti-platform/opencti-front/src/components/ThemeDark.ts b/opencti-platform/opencti-front/src/components/ThemeDark.ts
@@ -67,20 +67,23 @@ const ThemeDark = (
       padding: 0,
       fontWeight: 400,
       fontSize: 22,
+      fontFamily: '"Geoligica", sans-serif',
     },
     h2: {
       margin: '0 0 10px 0',
       padding: 0,
       fontWeight: 500,
       fontSize: 16,
       textTransform: 'uppercase',
+      fontFamily: '"Geoligica", sans-serif',
     },
     h3: {
       margin: '0 0 10px 0',
       padding: 0,
       color: '#bebebe',
       fontWeight: 400,
       fontSize: 13,
+      fontFamily: '"Geoligica", sans-serif',
     },
     h4: {
       margin: '0 0 10px 0',
@@ -100,6 +103,7 @@ const ThemeDark = (
       fontWeight: 400,
       fontSize: 18,
       color: primary || THEME_DARK_DEFAULT_PRIMARY,
+      fontFamily: '"Geoligica", sans-serif',
     },
     subtitle2: {
       fontWeight: 400,

diff --git a/opencti-platform/opencti-front/src/components/ThemeLight.ts b/opencti-platform/opencti-front/src/components/ThemeLight.ts
@@ -67,20 +67,23 @@ const ThemeLight = (
       padding: 0,
       fontWeight: 400,
       fontSize: 22,
+      fontFamily: '"Geoligica", sans-serif',
     },
     h2: {
       margin: '0 0 10px 0',
       padding: 0,
       fontWeight: 500,
       fontSize: 16,
       textTransform: 'uppercase',
+      fontFamily: '"Geoligica", sans-serif',
     },
     h3: {
       margin: '0 0 10px 0',
       padding: 0,
       color: '#757575',
       fontWeight: 400,
       fontSize: 13,
+      fontFamily: '"Geoligica", sans-serif',
     },
     h4: {
       margin: '0 0 10px 0',
@@ -100,6 +103,7 @@ const ThemeLight = (
       fontWeight: 400,
       fontSize: 18,
       color: primary || THEME_LIGHT_DEFAULT_PRIMARY,
+      fontFamily: '"Geoligica", sans-serif',
     },
     subtitle2: {
       fontWeight: 400,

diff --git a/opencti-platform/opencti-front/src/front.tsx b/opencti-platform/opencti-front/src/front.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
-import 'typeface-ibm-plex-sans';
-import 'typeface-roboto';
+import '@fontsource/ibm-plex-sans';
+import '@fontsource/geologica';
 import { createRoot } from 'react-dom/client';
 import makeStyles from '@mui/styles/makeStyles';
 import { RelayEnvironmentProvider } from 'react-relay/hooks';

diff --git a/opencti-platform/opencti-front/src/private/components/data/feeds/PublicFeedLines.tsx b/opencti-platform/opencti-front/src/private/components/data/feeds/PublicFeedLines.tsx
@@ -6,7 +6,7 @@ import Chip from '@mui/material/Chip';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItem from '@mui/material/ListItem';
 import { IconButton, ListItemSecondaryAction, Tooltip } from '@mui/material';
-import { ContentCopy, FileDelimitedOutline, OpenInNew } from 'mdi-material-ui';
+import { ContentCopy, OpenInNew } from 'mdi-material-ui';
 import Typography from '@mui/material/Typography';
 import { FeedLineDummy } from './FeedLine';
 import { PublicFeedLinesQuery } from './__generated__/PublicFeedLinesQuery.graphql';
@@ -17,9 +17,8 @@ import ListLinesContent from '../../../../components/list_lines/ListLinesContent
 import { DataColumns } from '../../../../components/list_lines';
 import { useFormatter } from '../../../../components/i18n';
 import type { Theme } from '../../../../components/Theme';
-import FilterIconButton from '../../../../components/FilterIconButton';
 import { copyToClipboard } from '../../../../utils/utils';
-import { deserializeFilterGroupForFrontend } from '../../../../utils/filters/filtersUtils';
+import ItemIcon from '../../../../components/ItemIcon';
 
 const useStyles = makeStyles<Theme>(() => ({
   bodyItem: {
@@ -79,13 +78,13 @@ const queryRef = loadQuery<PublicFeedLinesQuery>(
 const dataColumns: DataColumns = {
   name: {
     label: 'Name',
-    width: '15%',
+    width: '25%',
     isSortable: false,
     render: (node) => node.name,
   },
   description: {
     label: 'Description',
-    width: '25%',
+    width: '35%',
     isSortable: false,
     render: (node) => node.description,
   },
@@ -102,25 +101,6 @@ const dataColumns: DataColumns = {
       />
     ),
   },
-  filters: {
-    label: 'Filters',
-    width: '40%',
-    isSortable: false,
-    render: (node) => {
-      const nodeFilters = deserializeFilterGroupForFrontend(node.filters);
-      return (
-        <>
-          {nodeFilters && (
-            <FilterIconButton
-              filters={nodeFilters}
-              dataColumns={this}
-              styleNumber={3}
-            />
-          )}
-        </>
-      );
-    },
-  },
 };
 
 const PublicFeedLine = ({ node }: { node: PublicFeedLines_node$key }) => {
@@ -136,7 +116,7 @@ const PublicFeedLine = ({ node }: { node: PublicFeedLines_node$key }) => {
   return (
     <ListItem classes={{ root: classes.item }} color="primary" divider={true}>
       <ListItemIcon classes={{ root: classes.itemIcon }}>
-        <FileDelimitedOutline />
+        <ItemIcon type="feed" />
       </ListItemIcon>
       <ListItemText
         primary={

diff --git a/opencti-platform/opencti-front/src/private/components/data/stream/PublicStreamLines.tsx b/opencti-platform/opencti-front/src/private/components/data/stream/PublicStreamLines.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import Chip from '@mui/material/Chip';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { Stream } from '@mui/icons-material';
 import ListItem from '@mui/material/ListItem';
 import { IconButton, ListItemSecondaryAction, Tooltip } from '@mui/material';
 import { ContentCopy, OpenInNew } from 'mdi-material-ui';
@@ -17,9 +16,8 @@ import { StreamLineDummy } from './StreamLine';
 import { DataColumns } from '../../../../components/list_lines';
 import { useFormatter } from '../../../../components/i18n';
 import { PublicStreamLines_node$key } from './__generated__/PublicStreamLines_node.graphql';
-import FilterIconButton from '../../../../components/FilterIconButton';
 import { copyToClipboard } from '../../../../utils/utils';
-import { deserializeFilterGroupForFrontend } from '../../../../utils/filters/filtersUtils';
+import ItemIcon from '../../../../components/ItemIcon';
 
 const useStyles = makeStyles({
   bodyItem: {
@@ -80,13 +78,13 @@ const queryRef = loadQuery<PublicStreamLinesQuery>(
 const dataColumns: DataColumns = {
   name: {
     label: 'Name',
-    width: '15%',
+    width: '25%',
     isSortable: false,
     render: (node) => node.name,
   },
   description: {
     label: 'Description',
-    width: '25%',
+    width: '35%',
     isSortable: false,
     render: (node) => node.description,
   },
@@ -103,25 +101,6 @@ const dataColumns: DataColumns = {
       />
     ),
   },
-  filters: {
-    label: 'Filters',
-    width: '40%',
-    isSortable: false,
-    render: (node) => {
-      const nodeFilters = deserializeFilterGroupForFrontend(node.filters);
-      return (
-        <>
-          {nodeFilters && (
-            <FilterIconButton
-              filters={nodeFilters}
-              dataColumns={this}
-              styleNumber={3}
-            />
-          )}
-        </>
-      );
-    },
-  },
 };
 
 const PublicStreamLine = ({ node }: { node: PublicStreamLines_node$key }) => {
@@ -137,7 +116,7 @@ const PublicStreamLine = ({ node }: { node: PublicStreamLines_node$key }) => {
   return (
     <ListItem classes={{ root: classes.item }} color="primary" divider={true}>
       <ListItemIcon>
-        <Stream />
+        <ItemIcon type="streamcollection" />
       </ListItemIcon>
       <ListItemText
         primary={

diff --git a/opencti-platform/opencti-front/src/private/components/data/taxii/PublicTaxiiLines.tsx b/opencti-platform/opencti-front/src/private/components/data/taxii/PublicTaxiiLines.tsx
@@ -6,7 +6,7 @@ import Chip from '@mui/material/Chip';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItem from '@mui/material/ListItem';
 import { IconButton, ListItemSecondaryAction, Tooltip } from '@mui/material';
-import { OpenInNew, ContentCopy, DatabaseExportOutline } from 'mdi-material-ui';
+import { OpenInNew, ContentCopy } from 'mdi-material-ui';
 import Typography from '@mui/material/Typography';
 import { TaxiiLineDummy } from './TaxiiLine';
 import { PublicTaxiiLinesQuery } from './__generated__/PublicTaxiiLinesQuery.graphql';
@@ -17,9 +17,8 @@ import ListLinesContent from '../../../../components/list_lines/ListLinesContent
 import { DataColumns } from '../../../../components/list_lines';
 import { useFormatter } from '../../../../components/i18n';
 import type { Theme } from '../../../../components/Theme';
-import FilterIconButton from '../../../../components/FilterIconButton';
 import { copyToClipboard } from '../../../../utils/utils';
-import { deserializeFilterGroupForFrontend } from '../../../../utils/filters/filtersUtils';
+import ItemIcon from '../../../../components/ItemIcon';
 
 const useStyles = makeStyles<Theme>(() => ({
   bodyItem: {
@@ -79,13 +78,13 @@ const queryRef = loadQuery<PublicTaxiiLinesQuery>(
 const dataColumns: DataColumns = {
   name: {
     label: 'Name',
-    width: '15%',
+    width: '25%',
     isSortable: false,
     render: (node) => node.name,
   },
   description: {
     label: 'Description',
-    width: '25%',
+    width: '35%',
     isSortable: false,
     render: (node) => node.description,
   },
@@ -102,25 +101,6 @@ const dataColumns: DataColumns = {
       />
     ),
   },
-  filters: {
-    label: 'Filters',
-    width: '40%',
-    isSortable: false,
-    render: (node) => {
-      const nodeFilters = deserializeFilterGroupForFrontend(node.filters);
-      return (
-        <>
-          {nodeFilters && (
-            <FilterIconButton
-              filters={nodeFilters}
-              dataColumns={this}
-              styleNumber={3}
-            />
-          )}
-        </>
-      );
-    },
-  },
 };
 
 const PublicTaxiiLine = ({ node }: { node: PublicTaxiiLines_node$key }) => {
@@ -139,7 +119,7 @@ const PublicTaxiiLine = ({ node }: { node: PublicTaxiiLines_node$key }) => {
   return (
     <ListItem classes={{ root: classes.item }} color="primary" divider={true}>
       <ListItemIcon classes={{ root: classes.itemIcon }}>
-        <DatabaseExportOutline />
+        <ItemIcon type="taxiicollection" />
       </ListItemIcon>
       <ListItemText
         primary={

diff --git a/opencti-platform/opencti-front/yarn.lock b/opencti-platform/opencti-front/yarn.lock
@@ -3017,6 +3017,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/geologica@npm:5.0.3":
+  version: 5.0.3
+  resolution: "@fontsource/geologica@npm:5.0.3"
+  checksum: 10/27e155cd26655a54ee18c37c0484016c4512e25fe4355fd8fca1cc64cb797ab5be1117ba8c4444f7ef6443a507112049667b9dce182c172a9550cded7705c54f
+  languageName: node
+  linkType: hard
+
+"@fontsource/ibm-plex-sans@npm:5.0.18":
+  version: 5.0.18
+  resolution: "@fontsource/ibm-plex-sans@npm:5.0.18"
+  checksum: 10/e0af360e9a4e1511f831d42320caf49ec78f0825645a851642acb971c573fbb1874cadb0c949c8f6d0973b0d1a78dbd478a4d78302ddc485cb807b516d4c6a75
+  languageName: node
+  linkType: hard
+
 "@formatjs/ecma402-abstract@npm:1.18.2":
   version: 1.18.2
   resolution: "@formatjs/ecma402-abstract@npm:1.18.2"
@@ -15457,6 +15471,8 @@ __metadata:
     "@date-io/date-fns": "npm:3.0.0"
     "@emotion/react": "npm:11.11.3"
     "@emotion/styled": "npm:11.11.0"
+    "@fontsource/geologica": "npm:5.0.3"
+    "@fontsource/ibm-plex-sans": "npm:5.0.18"
     "@mui/icons-material": "npm:5.15.11"
     "@mui/lab": "npm:5.0.0-alpha.166"
     "@mui/material": "npm:5.15.11"
@@ -15571,8 +15587,6 @@ __metadata:
     subscriptions-transport-ws: "npm:0.11.0"
     tap: "npm:18.7.0"
     three-spritetext: "npm:1.8.2"
-    typeface-ibm-plex-sans: "npm:1.1.13"
-    typeface-roboto: "npm:1.1.13"
     typescript: "npm:5.3.3"
     unified: "npm:11.0.4"
     use-analytics: "npm:1.1.0"
@@ -20126,20 +20140,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typeface-ibm-plex-sans@npm:1.1.13":
-  version: 1.1.13
-  resolution: "typeface-ibm-plex-sans@npm:1.1.13"
-  checksum: 10/a429b3f4805c5856b83750b44fa1d05dae87795f591339cd67b1de73235b18c7be2fa831272cb6e7203e29f8b837a23065888a91115cf4972fbb8d3b8858d220
-  languageName: node
-  linkType: hard
-
-"typeface-roboto@npm:1.1.13":
-  version: 1.1.13
-  resolution: "typeface-roboto@npm:1.1.13"
-  checksum: 10/04371862bb979c51e4ef9ebf407491068f9c8a862e77a4ba3826a11f06d462f647560d10e5e8bcca1267e866153c9e3b8d8102d23f07192fb758f7ea1f7f4be5
-  languageName: node
-  linkType: hard
-
 "types-ramda@npm:^0.29.7":
   version: 0.29.9
   resolution: "types-ramda@npm:0.29.9"

diff --git a/opencti-platform/opencti-graphql/config/schema/opencti.graphql b/opencti-platform/opencti-graphql/config/schema/opencti.graphql
@@ -11644,9 +11644,9 @@ type Query {
     dynamicFrom: FilterGroup
     dynamicTo: FilterGroup
   ): Number @auth(for: [KNOWLEDGE, EXPLORE])
-  schemaRelationsTypesMapping: [StixRelationshipSchema!]! @auth
-  schemaRelationsRefTypesMapping: [StixRelationshipSchema!]! @auth
-  filterKeysSchema: [FilterKeysSchema!]! @auth
+  schemaRelationsTypesMapping: [StixRelationshipSchema!]!
+  schemaRelationsRefTypesMapping: [StixRelationshipSchema!]!
+  filterKeysSchema: [FilterKeysSchema!]!
 
   ######## STIX CORE RELATIONSHIPS