[frontend] Improvment on frontend code (#5548-support-logs)

opencti-platform/opencti-front/src/private/components/Error.jsx

@@ -17,19 +17,19 @@ export const SimpleError = ({ errorData }) => {
     copyToClipboard(t_i18n, errorDetails);
   };
   return (
-    <>
+    <div style={{ paddingTop: 28 }}>
       <Alert severity="error">
         <AlertTitle style={{ marginBottom: 0 }}>{t_i18n('Error')}</AlertTitle>
         <span style={{ marginRight: 10 }}>
           {t_i18n('An unknown error occurred. Please contact your administrator or the OpenCTI maintainers.')}
         </span>
         <Tooltip title={t_i18n('Copy stack trace errors')}>
           <IconButton onClick={copyClick} size="small" color="error">
-            <ContentCopyOutlined />
+            <ContentCopyOutlined/>
           </IconButton>
         </Tooltip>
       </Alert>
-    </>
+    </div>
   );
 };
 

opencti-platform/opencti-front/src/private/components/data/playbooks/Playbook.jsx

@@ -18,7 +18,7 @@ import { graphql, createFragmentContainer } from 'react-relay';
 import makeStyles from '@mui/styles/makeStyles';
 import 'reactflow/dist/style.css';
 import ReactFlow, { ReactFlowProvider } from 'reactflow';
-import { ErrorBoundary, SimpleError } from '../../Error';
+import { ErrorBoundary } from '../../Error';
 import PlaybookHeader from './PlaybookHeader';
 import useLayout from './hooks/useLayout';
 import nodeTypes from './types/nodes';
@@ -104,12 +104,7 @@ const PlaybookComponent = ({ playbook, playbookComponents }) => {
         ]}
       />
       <PlaybookHeader playbook={playbook} />
-      <ErrorBoundary
-        display={(errorData) => <div style={{ paddingTop: 28 }}>
-          <SimpleError errorData={errorData}/>
-        </div>
-        }
-      >
+      <ErrorBoundary>
         <div className={classes.container} style={{ width, height }}>
           <ReactFlowProvider>
             <Flow />

opencti-platform/opencti-front/src/private/components/settings/support/SupportPackageLine.tsx

@@ -1,8 +1,7 @@
 import React, { FunctionComponent, useState } from 'react';
-import { graphql, useFragment, useMutation } from 'react-relay';
+import { graphql, useFragment } from 'react-relay';
 import { SupportPackageLine_node$key } from '@components/settings/support/__generated__/SupportPackageLine_node.graphql';
 import ListItemText from '@mui/material/ListItemText';
-import makeStyles from '@mui/styles/makeStyles';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { FileOutline } from 'mdi-material-ui';
@@ -18,18 +17,20 @@ import Dialog from '@mui/material/Dialog';
 import { RecordSourceSelectorProxy } from 'relay-runtime';
 import CircularProgress from '@mui/material/CircularProgress';
 import Chip from '@mui/material/Chip';
+import { SupportPackageLineForceZipMutation$data } from '@components/settings/support/__generated__/SupportPackageLineForceZipMutation.graphql';
 import { APP_BASE_PATH, handleError, MESSAGING$ } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
 import Transition from '../../../../components/Transition';
 import { deleteNode } from '../../../../utils/store';
 import { hexToRGB } from '../../../../utils/Colors';
 import { DataColumns } from '../../../../components/list_lines';
+import useApiMutation from '../../../../utils/hooks/useApiMutation';
 
-const useStyles = makeStyles(() => ({
+const styles = {
   bodyItem: {
     height: 20,
     fontSize: 13,
-    float: 'left',
+    float: 'left' as 'left' | 'right' | 'none' | undefined,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -43,7 +44,7 @@ const useStyles = makeStyles(() => ({
   chipInList: {
     fontSize: 12,
     height: 20,
-    float: 'left',
+    float: 'left' as 'left' | 'right' | 'none' | undefined,
     borderRadius: 4,
     width: 120,
   },
@@ -52,7 +53,7 @@ const useStyles = makeStyles(() => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
-}));
+};
 
 type PackageStatus = 'IN_PROGRESS' | 'READY' | 'IN_ERROR' | '%future added value';
 
@@ -62,6 +63,7 @@ const SupportPackageLineForceZipMutation = graphql`
   ) {
       supportPackageForceZip(input: $input) {
         id
+        package_url
       }
   }
 `;
@@ -105,13 +107,12 @@ const SupportPackageLine: FunctionComponent<SupportPackageLineProps> = ({
   paginationOptions,
   dataColumns,
 }) => {
-  const classes = useStyles();
   const { t_i18n, fd } = useFormatter();
   const data = useFragment(supportPackageLineFragment, node);
   const [displayDelete, setDisplayDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
-  const [commitDelete] = useMutation(SupportPackageLineDeleteMutation);
-  const [commitForceZip] = useMutation(SupportPackageLineForceZipMutation);
+  const [commitDelete] = useApiMutation(SupportPackageLineDeleteMutation);
+  const [commitForceZip] = useApiMutation(SupportPackageLineForceZipMutation);
   const isProgress = data.package_status === 'IN_PROGRESS';
 
   const handleOpenDelete = () => {
@@ -152,11 +153,12 @@ const SupportPackageLine: FunctionComponent<SupportPackageLineProps> = ({
           id: data.id,
         },
       },
-      onCompleted: () => {
+      onCompleted: (response) => {
+        const res = response as SupportPackageLineForceZipMutation$data;
         // Check if there is a valid URL and initiate download
-        if (data.package_url) {
+        if (res.supportPackageForceZip?.package_url) {
           MESSAGING$.notifySuccess('Force zip launched. Your download will start shortly.');
-          window.location.href = `${APP_BASE_PATH}/storage/get/${encodeURIComponent(data.package_url)}`;
+          window.location.href = `${APP_BASE_PATH}/storage/get/${encodeURIComponent(res.supportPackageForceZip.package_url)}`;
         } else {
           MESSAGING$.notifyError('No download URL available.');
         }
@@ -166,7 +168,7 @@ const SupportPackageLine: FunctionComponent<SupportPackageLineProps> = ({
 
   return (
     <>
-      <ListItem classes={{ root: classes.item }} divider={true}>
+      <ListItem divider={true} style={{ ...styles.item }}>
         <ListItemIcon>
           {isProgress && (
             <CircularProgress
@@ -185,29 +187,27 @@ const SupportPackageLine: FunctionComponent<SupportPackageLineProps> = ({
             <>
               <Tooltip title={data.name}>
                 <div
-                  className={classes.bodyItem}
-                  style={{ width: dataColumns.name.width }}
+                  style={{ width: dataColumns.name.width, ...styles.bodyItem }}
                 >
                   {data.name}
                 </div>
               </Tooltip>
               <div
-                className={classes.bodyItem}
-                style={{ width: dataColumns.package_status.width }}
+                style={{ width: dataColumns.package_status.width, ...styles.bodyItem }}
               >
                 <Chip
-                  classes={{ root: classes.chipInList, label: classes.label }}
                   style={{
                     color: packageStatusColors[data.package_status],
                     borderColor: packageStatusColors[data.package_status],
                     backgroundColor: hexToRGB(packageStatusColors[data.package_status]),
+                    ...styles.chipInList,
+                    ...styles.label,
                   }}
                   label={data.package_status}
                 />
               </div>
               <div
-                className={classes.bodyItem}
-                style={{ width: dataColumns.created.width }}
+                style={{ width: dataColumns.created.width, ...styles.bodyItem }}
               >
                 {fd(data.created_at)}
               </div>

opencti-platform/opencti-front/src/private/components/settings/support/SupportPackages.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import Button from '@mui/material/Button';
-import { graphql, useMutation } from 'react-relay';
+import { graphql } from 'react-relay';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
@@ -13,32 +12,14 @@ import SupportPackageLines, { supportPackageLinesQuery } from '@components/setti
 import { RecordSourceSelectorProxy } from 'relay-runtime';
 import { useFormatter } from '../../../../components/i18n';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
-import type { Theme } from '../../../../components/Theme';
 import { handleError, MESSAGING$ } from '../../../../relay/environment';
 import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
 import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
 import ListLines from '../../../../components/list_lines/ListLines';
 import { insertNode } from '../../../../utils/store';
 import { SETTINGS } from '../../../../utils/hooks/useGranted';
 import Security from '../../../../utils/Security';
-
-const useStyles = makeStyles<Theme>(() => ({
-  paper: {
-    height: '100%',
-    minHeight: '100%',
-    padding: '10px 15px 10px 15px',
-    marginTop: -2,
-    borderRadius: 4,
-  },
-  gridContainer: {
-    marginBottom: 20,
-    marginTop: 20,
-    minHeight: '250px',
-  },
-  createButton: {
-    float: 'right',
-  },
-}));
+import useApiMutation from '../../../../utils/hooks/useApiMutation';
 
 const LOCAL_STORAGE_KEY = 'support-packages';
 
@@ -57,8 +38,7 @@ export const supportPackageAddMutation = graphql`
 
 const SupportPackages = () => {
   const { t_i18n, nsdt } = useFormatter();
-  const classes = useStyles();
-  const [commitSupportPackageAdd] = useMutation(supportPackageAddMutation);
+  const [commitSupportPackageAdd] = useApiMutation(supportPackageAddMutation);
   const { viewStorage, helpers, paginationOptions } = usePaginationLocalStorage<SupportPackageLinesPaginationQuery$variables>(
     LOCAL_STORAGE_KEY,
     {
@@ -104,17 +84,17 @@ const SupportPackages = () => {
     const dataColumns = {
       name: {
         label: 'Name',
-        width: '39%',
+        width: '45%',
         isSortable: true,
       },
       package_status: {
         label: 'Status',
-        width: '19%',
+        width: '20%',
         isSortable: true,
       },
       created: {
         label: 'Date',
-        width: '20%',
+        width: '15%',
         isSortable: true,
       },
     };
@@ -143,30 +123,33 @@ const SupportPackages = () => {
 
   return (
     <Security needs={[SETTINGS]} placeholder={<>{t_i18n('You do not have any access to the knowledge of this OpenCTI instance.')}</>}>
-      <div className={classes.container}>
+      <div>
         <Breadcrumbs variant="list"
           elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Support packages'), current: true }]}
         />
-
-        <Grid container={true} spacing={4}
-          classes={{ container: classes.gridContainer }}
-        >
-          <Grid item={true} xs={8} style={{ paddingTop: 10 }}>
+        <Grid container={true} spacing={4}>
+          <Grid item={true} xs={8} style={{ paddingTop: '24px' }}>
             <div style={{ height: '100%' }}>
+              <Typography variant="h4" gutterBottom={true} style={{ marginBottom: '10px' }}>
+                {t_i18n('Generated Support Package')}
+              </Typography>
+              <Button
+                style={{ float: 'right', marginTop: '-40px' }}
+                onClick={generateSupportPackage}
+                size="small"
+                variant="outlined"
+                color="primary"
+              >
+                {t_i18n('Generate Support Package')}
+              </Button>
               <div className="clearfix"/>
-              <Paper classes={{ root: classes.paper }} variant="outlined">
-                <Typography variant="h4" gutterBottom={true} style={{ float: 'left', marginTop: '8px', fontSize: '13px', marginBottom: '40px' }}>
-                  {t_i18n('Generated Support Package')}
-                </Typography>
-                <Button
-                  classes={{ root: classes.createButton }}
-                  onClick={generateSupportPackage}
-                  size="small"
-                  variant="outlined"
-                  color="primary"
-                >
-                  {t_i18n('Generate Support Package')}
-                </Button>
+              <Paper variant="outlined" style={{
+                height: '100%',
+                minHeight: '100%',
+                padding: '10px 15px 10px 15px',
+                borderRadius: 4,
+              }}
+              >
                 {renderLines()}
               </Paper>
             </div>

opencti-platform/opencti-front/src/private/components/workspaces/dashboards/Dashboard.jsx

@@ -56,7 +56,7 @@ import AuditsRadar from '../../common/audits/AuditsRadar';
 import AuditsMultiHeatMap from '../../common/audits/AuditsMultiHeatMap';
 import AuditsTreeMap from '../../common/audits/AuditsTreeMap';
 import AuditsDistributionList from '../../common/audits/AuditsDistributionList';
-import { ErrorBoundary, SimpleError } from '../../Error';
+import { ErrorBoundary } from '../../Error';
 import {
   deserializeDashboardManifestForFrontend,
   useRemoveIdAndIncorrectKeysFromFilterGroupObject,
@@ -807,12 +807,7 @@ const DashboardComponent = ({ workspace, noToolbar }) => {
                 onDelete={() => handleDeleteWidget(widget.id)}
               />
               )}
-              <ErrorBoundary
-                display={(errorData) => <div style={{ paddingTop: 28 }}>
-                  <SimpleError errorData={errorData}/>
-                </div>
-                  }
-              >
+              <ErrorBoundary>
                 {widget.perspective === 'entities'
                     && renderEntitiesVisualization(removeIdFilterWidget, manifest.config)}
                 {widget.perspective === 'relationships'
@@ -857,13 +852,7 @@ const DashboardComponent = ({ workspace, noToolbar }) => {
               classes={{ root: classes.paper }}
               variant="outlined"
                    >
-              <ErrorBoundary
-                display={
-                  <div style={{ paddingTop: 28 }}>
-                    <SimpleError />
-                  </div>
-                }
-              >
+              <ErrorBoundary>
                 {widget.perspective === 'entities'
                   && renderEntitiesVisualization(removeIdFilterWidget, manifest.config)}
                 {widget.perspective === 'relationships'

opencti-platform/opencti-front/src/public/components/PublicDashboard.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import { graphql, PreloadedQuery, usePreloadedQuery } from 'react-relay';
 import { useParams, useNavigate } from 'react-router-dom';
 import RGL, { WidthProvider } from 'react-grid-layout';
-import { ErrorBoundary, SimpleError } from '@components/Error';
+import { ErrorBoundary } from '@components/Error';
 import Paper from '@mui/material/Paper';
 import Loader, { LoaderVariant } from '../../components/Loader';
 import { PublicDashboardQuery } from './__generated__/PublicDashboardQuery.graphql';
@@ -98,12 +98,7 @@ const PublicDashboardComponent = ({
               overflow: 'hidden',
             }}
           >
-            <ErrorBoundary
-              display={(errorData: unknown) => <div style={{ paddingTop: 28 }}>
-                <SimpleError errorData={errorData}/>
-              </div>
-              }
-            >
+            <ErrorBoundary>
               {widget.perspective === 'entities' && entityWidget(widget)}
               {widget.perspective === 'relationships' && relationshipWidget(widget)}
               {widget.perspective === 'audits' && auditWidget(widget)}