[frontend] review

OpenCTI-Platform · Jan 29, 2025 · 1a7f4b8 · 1a7f4b8
1 parent bffcf3f
commit 1a7f4b8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 61 deletions.
diff --git a/.../components/threats/threat_actors_individual/AddIndividualsThreatActorIndividualLines.tsx b/.../components/threats/threat_actors_individual/AddIndividualsThreatActorIndividualLines.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import { graphql, useRefetchableFragment } from 'react-relay';
+import React, { useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
 import Loader from 'src/components/Loader';
 import { List, ListItemButton, ListItemIcon, ListItemText, useTheme } from '@mui/material';
 import { CheckCircle } from '@mui/icons-material';
 import ItemIcon from 'src/components/ItemIcon';
-import { RecordSourceSelectorProxy } from 'relay-runtime';
 import useApiMutation from 'src/utils/hooks/useApiMutation';
 import { defaultCommitMutation } from 'src/relay/environment';
 import { ThreatActorIndividualDetails_ThreatActorIndividual$data } from './__generated__/ThreatActorIndividualDetails_ThreatActorIndividual.graphql';
 import { AddIndividualsThreatActorIndividualLines_data$key } from './__generated__/AddIndividualsThreatActorIndividualLines_data.graphql';
+import { updateDelete } from '../../../../utils/store';
 
 export const scoRelationshipAdd = graphql`
   mutation AddIndividualsThreatActorIndividualLinesRelationAddMutation(
@@ -125,15 +125,12 @@ const AddIndividualsThreatActorIndividualLines = ({
   threatActorIndividual: ThreatActorIndividualDetails_ThreatActorIndividual$data,
   fragmentKey: AddIndividualsThreatActorIndividualLines_data$key,
 }) => {
-  const [data, refetch] = useRefetchableFragment(
+  const data = useFragment(
     AddIndividualsThreatActorIndividualLinesFragment,
     fragmentKey,
   );
   const [commitRelationAdd] = useApiMutation(scoRelationshipAdd);
   const [commitRelationDelete] = useApiMutation(scoRelationshipDelete);
-  useEffect(() => {
-    refetch({});
-  }, [data]);
 
   const initialTargets = (threatActorIndividual
     .stixCoreRelationships?.edges
@@ -142,15 +139,6 @@ const AddIndividualsThreatActorIndividualLines = ({
 
   const [currentTargets, setCurrentTargets] = useState<string[]>(initialTargets);
 
-  const updateDelete = (store: RecordSourceSelectorProxy, path: string, rootId: string, deleteId: string) => {
-    const node = store.get(rootId);
-    const records = node?.getLinkedRecord(path);
-    const edges = records?.getLinkedRecords('edges');
-    if (!records || !edges) { return; }
-    const newEdges = edges.filter((n) => n.getLinkedRecord('node')?.getValue('toId') !== deleteId);
-    records.setLinkedRecords(newEdges, 'edges');
-  };
-
   const handleToggle = (toId: string) => {
     const isSelected = currentTargets.includes(toId);
     const input = {

diff --git a/...ate/components/threats/threat_actors_individual/AddPersonasThreatActorIndividualLines.tsx b/...ate/components/threats/threat_actors_individual/AddPersonasThreatActorIndividualLines.tsx
@@ -1,15 +1,15 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
-import { graphql, useRefetchableFragment } from 'react-relay';
+import React, { FunctionComponent, useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
 import Loader from 'src/components/Loader';
 import { List, ListItemButton, ListItemIcon, ListItemText, useTheme } from '@mui/material';
 import ItemIcon from 'src/components/ItemIcon';
 import { CheckCircle } from '@mui/icons-material';
 import useApiMutation from 'src/utils/hooks/useApiMutation';
 import { defaultCommitMutation } from 'src/relay/environment';
-import { RecordSourceSelectorProxy } from 'relay-runtime';
 import { scoRelationshipAdd, scoRelationshipDelete } from '@components/threats/threat_actors_individual/AddIndividualsThreatActorIndividualLines';
 import { ThreatActorIndividualDetails_ThreatActorIndividual$data } from './__generated__/ThreatActorIndividualDetails_ThreatActorIndividual.graphql';
 import { AddPersonasThreatActorIndividualLines_data$key } from './__generated__/AddPersonasThreatActorIndividualLines_data.graphql';
+import { updateDelete } from '../../../../utils/store';
 
 export const addPersonasThreatActorIndividualLinesQuery = graphql`
   query AddPersonasThreatActorIndividualLinesQuery(
@@ -94,15 +94,11 @@ AddPersonasThreatActorIndividualLinesProps
   threatActorIndividual,
   fragmentKey,
 }) => {
-  const [data, refetch] = useRefetchableFragment(
+  const data = useFragment(
     AddPersonasThreatActorIndividualLinesFragment,
     fragmentKey,
   );
 
-  useEffect(() => {
-    refetch({});
-  }, [data]);
-
   const [commitRelationAdd] = useApiMutation(scoRelationshipAdd);
   const [commitRelationDelete] = useApiMutation(scoRelationshipDelete);
 
@@ -113,15 +109,6 @@ AddPersonasThreatActorIndividualLinesProps
 
   const [currentTargets, setCurrentTargets] = useState<string[]>(initialTargets);
 
-  const updateDelete = (store: RecordSourceSelectorProxy, path: string, rootId: string, deleteId: string) => {
-    const node = store.get(rootId);
-    const records = node?.getLinkedRecord(path);
-    const edges = records?.getLinkedRecords('edges');
-    if (!records || !edges) { return; }
-    const newEdges = edges.filter((n) => n.getLinkedRecord('node')?.getValue('toId') !== deleteId);
-    records.setLinkedRecords(newEdges, 'edges');
-  };
-
   const handleToggle = (toId: string) => {
     const isSelected = currentTargets.includes(toId);
     const input = {

diff --git a/...ivate/components/threats/threat_actors_individual/AddThreatActorIndividualDemographic.tsx b/...ivate/components/threats/threat_actors_individual/AddThreatActorIndividualDemographic.tsx
@@ -4,42 +4,42 @@ import IconButton from '@mui/material/IconButton';
 import { Add } from '@mui/icons-material';
 import Drawer from '@components/common/drawer/Drawer';
 import CountryCreation from '@components/locations/countries/CountryCreation';
-import { useLazyLoadQuery } from 'react-relay';
 import AddThreatActorIndividualDemographicLines, {
   addIndividualsThreatActorIndividualLinesQuery,
 } from '@components/threats/threat_actors_individual/AddThreatActorIndividualDemographicLines';
 import { AddThreatActorIndividualDemographicLinesQuery } from '@components/threats/threat_actors_individual/__generated__/AddThreatActorIndividualDemographicLinesQuery.graphql';
+import { PreloadedQuery, usePreloadedQuery } from 'react-relay';
 import { useFormatter } from '../../../../components/i18n';
 import SearchInput from '../../../../components/SearchInput';
+import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
+import Loader, { LoaderVariant } from '../../../../components/Loader';
 
 interface AddThreatActorIndividualDemographicProps {
   threatActorIndividual: ThreatActorIndividual_ThreatActorIndividual$data,
   relType: string,
   title:string,
+  queryRef: PreloadedQuery<AddThreatActorIndividualDemographicLinesQuery>;
 }
 
-const AddThreatActorIndividualDemographic: FunctionComponent<
+const AddThreatActorIndividualDemographicComponent: FunctionComponent<
 AddThreatActorIndividualDemographicProps
 > = ({
   threatActorIndividual,
   relType,
   title,
+  queryRef,
 }) => {
   const { t_i18n } = useFormatter();
   const [open, setOpen] = useState<boolean>(false);
   const [search, setSearch] = useState<string>('');
-  const paginationOptions = { search };
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const handleSearch = (term: string) => setSearch(term);
 
-  const data = useLazyLoadQuery<AddThreatActorIndividualDemographicLinesQuery>(
+  const data = usePreloadedQuery<AddThreatActorIndividualDemographicLinesQuery>(
     addIndividualsThreatActorIndividualLinesQuery,
-    {
-      ...paginationOptions,
-      count: 50,
-    },
+    queryRef,
   );
 
   return (<div>
@@ -69,7 +69,6 @@ AddThreatActorIndividualDemographicProps
             variant='inDrawer'
             onSubmit={handleSearch}
           />
-          <div style={{ height: 5 }} />
           <CountryCreation
             paginationOptions={{
               search,
@@ -88,4 +87,19 @@ AddThreatActorIndividualDemographicProps
   </div>);
 };
 
+const AddThreatActorIndividualDemographic: FunctionComponent<
+Omit<AddThreatActorIndividualDemographicProps, 'queryRef'>
+> = (props) => {
+  const queryRef = useQueryLoading<AddThreatActorIndividualDemographicLinesQuery>(addIndividualsThreatActorIndividualLinesQuery, {
+    count: 50,
+  });
+  return queryRef ? (
+    <React.Suspense fallback={<Loader variant={LoaderVariant.inElement} />}>
+      <AddThreatActorIndividualDemographicComponent {...props} queryRef={queryRef} />
+    </React.Suspense>
+  ) : (
+    <Loader variant={LoaderVariant.inElement} />
+  );
+};
+
 export default AddThreatActorIndividualDemographic;
diff --git a/.../components/threats/threat_actors_individual/AddThreatActorIndividualDemographicLines.tsx b/.../components/threats/threat_actors_individual/AddThreatActorIndividualDemographicLines.tsx
@@ -1,16 +1,15 @@
-import React, { useEffect, useState } from 'react';
-import { graphql, useRefetchableFragment } from 'react-relay';
+import React, { useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
 import Loader from 'src/components/Loader';
 import { List, ListItemButton, ListItemIcon, ListItemText, useTheme } from '@mui/material';
 import { CheckCircle } from '@mui/icons-material';
 import ItemIcon from 'src/components/ItemIcon';
-import { RecordSourceSelectorProxy } from 'relay-runtime';
 import useApiMutation from 'src/utils/hooks/useApiMutation';
-import { defaultCommitMutation } from 'src/relay/environment';
 import {
   AddThreatActorIndividualDemographicLines_data$key,
 } from '@components/threats/threat_actors_individual/__generated__/AddThreatActorIndividualDemographicLines_data.graphql';
 import { ThreatActorIndividual_ThreatActorIndividual$data } from '@components/threats/threat_actors_individual/__generated__/ThreatActorIndividual_ThreatActorIndividual.graphql';
+import { updateDelete } from '../../../../utils/store';
 
 export const scoRelationshipAdd = graphql`
   mutation AddThreatActorIndividualDemographicLinesRelationAddMutation(
@@ -129,15 +128,12 @@ const AddThreatActorIndividualDemographicLines = ({
   fragmentKey: AddThreatActorIndividualDemographicLines_data$key,
   relType: string,
 }) => {
-  const [data, refetch] = useRefetchableFragment(
+  const data = useFragment(
     AddThreatActorIndividualDemographicLinesFragment,
     fragmentKey,
   );
   const [commitRelationAdd] = useApiMutation(scoRelationshipAdd);
   const [commitRelationDelete] = useApiMutation(scoRelationshipDelete);
-  useEffect(() => {
-    refetch({});
-  }, [data]);
 
   const initialTargets = (threatActorIndividual
     .stixCoreRelationships?.edges
@@ -146,15 +142,6 @@ const AddThreatActorIndividualDemographicLines = ({
 
   const [currentTargets, setCurrentTargets] = useState<string[]>(initialTargets);
 
-  const updateDelete = (store: RecordSourceSelectorProxy, path: string, rootId: string, deleteId: string) => {
-    const node = store.get(rootId);
-    const records = node?.getLinkedRecord(path);
-    const edges = records?.getLinkedRecords('edges');
-    if (!records || !edges) { return; }
-    const newEdges = edges.filter((n) => n.getLinkedRecord('node')?.getValue('toId') !== deleteId);
-    records.setLinkedRecords(newEdges, 'edges');
-  };
-
   const handleToggle = (toId: string) => {
     const isSelected = currentTargets.includes(toId);
     const input = {
@@ -164,7 +151,6 @@ const AddThreatActorIndividualDemographicLines = ({
     };
     if (isSelected) {
       commitRelationDelete({
-        ...defaultCommitMutation,
         variables: { ...input },
         updater: (store) => updateDelete(
           store,
@@ -178,7 +164,6 @@ const AddThreatActorIndividualDemographicLines = ({
       });
     } else {
       commitRelationAdd({
-        ...defaultCommitMutation,
         variables: { input },
         onCompleted: () => {
           setCurrentTargets([...currentTargets, toId]);

diff --git a/opencti-platform/opencti-front/src/utils/store.js b/opencti-platform/opencti-front/src/utils/store.js
@@ -88,3 +88,12 @@ export const deleteNodeFromEdge = (store, path, rootId, deleteId, params) => {
   );
   records.setLinkedRecords(newEdges, 'edges');
 };
+
+export const updateDelete = (store, path, rootId, deleteId) => {
+  const node = store.get(rootId);
+  const records = node?.getLinkedRecord(path);
+  const edges = records?.getLinkedRecords('edges');
+  if (!records || !edges) { return; }
+  const newEdges = edges.filter((n) => n.getLinkedRecord('node')?.getValue('toId') !== deleteId);
+  records.setLinkedRecords(newEdges, 'edges');
+};