Skip to content

Commit

Permalink
[frontend] make TAI personas always visible to be able to add some
Browse files Browse the repository at this point in the history
  • Loading branch information
labo-flg committed Sep 13, 2024
1 parent 324ba62 commit 5588903
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 121 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface FieldOrEmptyProps<T> {
children: React.ReactNode;
}

const FieldOrEmpty = <T = never>({ source, children }: FieldOrEmptyProps<T>) => {
const FieldOrEmpty = <T = unknown>({ source, children }: FieldOrEmptyProps<T>) => {
return <>{isNotEmptyField(source) ? children : '-'}</>; // render the children if source is defined
};
export default FieldOrEmpty;
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ const StixCyberObservableCreation = ({
inputValue,
paginationKey,
paginationOptions,
controlledDialStyles = {},
defaultCreatedBy = null,
defaultMarkingDefinitions = null,
isFromBulkRelation,
Expand Down Expand Up @@ -901,6 +902,7 @@ const StixCyberObservableCreation = ({
entityType={type ?? 'Observable'}
onOpen={handleOpen}
onClose={() => {}}
style={controlledDialStyles}
/>
: <Fab
onClick={handleOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Security from '../../../../utils/Security';
import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
import AddLocationsThreatActorGroup from './AddLocationsThreatActorGroup';
import { addLocationsThreatActorGroupMutationRelationDelete } from './AddLocationsThreatActorGroupLines';
import FieldOrEmpty from '../../../../components/FieldOrEmpty';

class ThreatActorGroupLocationsComponent extends Component {
removeLocation(locationEdge) {
Expand Down Expand Up @@ -60,62 +61,59 @@ class ThreatActorGroupLocationsComponent extends Component {
/>
</Security>
<div className="clearfix" />
<List style={{ marginTop: -10 }}>
{threatActorGroup.locations.edges.length === 0 && (
<ListItem dense={true} divider={true} button={false}>
<ListItemText primary="-" />
</ListItem>
)}
{threatActorGroup.locations.edges.map((locationEdge) => {
const { types } = locationEdge;
const location = locationEdge.node;
const link = resolveLink(location.entity_type);
const flag = location.entity_type === 'Country'
<FieldOrEmpty source={threatActorGroup.locations.edges}>
<List style={{ marginTop: -10 }}>
{threatActorGroup.locations.edges.map((locationEdge) => {
const { types } = locationEdge;
const location = locationEdge.node;
const link = resolveLink(location.entity_type);
const flag = location.entity_type === 'Country'
&& R.head(
(location.x_opencti_aliases ?? []).filter(
(n) => n?.length === 2,
),
);
return (
<ListItem
key={location.id}
dense={true}
divider={true}
button={true}
component={Link}
to={`${link}/${location.id}`}
>
<ListItemIcon>
return (
<ListItem
key={location.id}
dense={true}
divider={true}
button={true}
component={Link}
to={`${link}/${location.id}`}
>
<ListItemIcon>
{flag ? (
<img
style={{ width: 20 }}
src={`${APP_BASE_PATH}/static/flags/4x3/${flag.toLowerCase()}.svg`}
alt={location.name}
/>
) : (
<ItemIcon type={location.entity_type} />
)}
<ListItemIcon>
{flag ? (
<img
style={{ width: 20 }}
src={`${APP_BASE_PATH}/static/flags/4x3/${flag.toLowerCase()}.svg`}
alt={location.name}
/>
) : (
<ItemIcon type={location.entity_type} />
)}
</ListItemIcon>
</ListItemIcon>
</ListItemIcon>
<ListItemText primary={location.name} />
{types.includes('manual') ? (
<ListItemSecondaryAction>
<Security needs={[KNOWLEDGE_KNUPDATE]}>
<IconButton
aria-label="Remove"
onClick={() => this.removeLocation(locationEdge)}
size="large"
>
<LinkOff />
</IconButton>
</Security>
</ListItemSecondaryAction>
) : <AutoFix fontSize="small" style={{ marginRight: 13 }}/>}
</ListItem>
);
})}
</List>
<ListItemText primary={location.name} />
{types.includes('manual') ? (
<ListItemSecondaryAction>
<Security needs={[KNOWLEDGE_KNUPDATE]}>
<IconButton
aria-label="Remove"
onClick={() => this.removeLocation(locationEdge)}
size="large"
>
<LinkOff />
</IconButton>
</Security>
</ListItemSecondaryAction>
) : <AutoFix fontSize="small" style={{ marginRight: 13 }}/>}
</ListItem>
);
})}
</List>
</FieldOrEmpty>
</>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,15 @@ AddIndividualsThreatActorIndividualProps
count: 50,
},
);
const getRelationships = () => {
const relations = [];
for (const { node } of threatActorIndividual.stixCoreRelationships?.edges ?? []) {
const { relationship_type } = node ?? {};
if (relationship_type === 'impersonates') relations.push(node);
}
return relations;
};

return (<div>
{(getRelationships().length > 0) && (
<IconButton
color='primary'
style={{ marginTop: '-11px' }}
onClick={handleOpen}
>
<Add fontSize="small" />
</IconButton>
)}
<IconButton
color='primary'
style={{ marginTop: '-11px' }}
onClick={handleOpen}
>
<Add fontSize="small" />
</IconButton>
<Drawer
open={open}
onClose={handleClose}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,14 @@ AddPersonaThreatActorIndividualProps
},
);

const getRelationships = () => {
const relations = [];
for (const { node } of threatActorIndividual.stixCoreRelationships?.edges ?? []) {
const { relationship_type } = node ?? {};
if (relationship_type === 'known-as') relations.push(node);
}
return relations;
};

return (<div>
{(getRelationships().length > 0) && (
<IconButton
color='primary'
style={{ marginTop: '-11px' }}
onClick={handleOpen}
>
<Add fontSize="small" />
</IconButton>
)}
<IconButton
color='primary'
style={{ marginTop: '-11px' }}
onClick={handleOpen}
>
<Add fontSize="small" />
</IconButton>
<Drawer
open={open}
onClose={handleClose}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { KNOWLEDGE_KNUPDATE } from 'src/utils/hooks/useGranted';
import { ThreatActorIndividualDetails_ThreatActorIndividual$data } from './__generated__/ThreatActorIndividualDetails_ThreatActorIndividual.graphql';
import AddPersonaThreatActorIndividual from './AddPersonasThreatActorIndividual';
import AddIndividualsThreatActorIndividual from './AddIndividualsThreatActorIndividual';
import FieldOrEmpty from '../../../../components/FieldOrEmpty';

type SupportedTypes = 'known-as' | 'impersonates';
type SupportedFields = 'persona_name' | 'name';
Expand Down Expand Up @@ -59,43 +60,45 @@ ThreatActorIndividualDetailsChipsProps
setNodes(getRelationshipsOfType(relType));
}, [data]);

// Hide if there are no valid relations

return (<div style={nodes.length > 0 ? { marginBottom: '20px' } : {}}>
<div style={{
display: 'flex',
flexDirection: 'row',
}}
>
{(nodes.length > 0) && (
<Typography
variant="h3"
gutterBottom={true}
>
{title}
</Typography>)}
<Security
needs={[KNOWLEDGE_KNUPDATE]}
placeholder={<div style={{ height: 29 }} />}
return (
<div style={{ marginBottom: '20px' }}>
<div style={{
display: 'flex',
flexDirection: 'row',
}}
>
<AddComponent threatActorIndividual={data} />
</Security>
</div>
<div className='clearfix' />
{(nodes.length > 0) && (
nodes.map(({ id, to }) => (
<Button
key={id}
variant='outlined'
size='small'
href={`${path}/${to?.id}`}
style={{ margin: '0 5px 5px 0' }}

<Typography
variant="h3"
gutterBottom={true}
>
{title}
</Typography>
<Security
needs={[KNOWLEDGE_KNUPDATE]}
placeholder={<div style={{ height: 29 }} />}
>
{to?.[field]}
</Button>
))
)}
</div>);
<AddComponent threatActorIndividual={data} />
</Security>
</div>
<div className='clearfix' />
<FieldOrEmpty source={nodes}>
{
nodes.map(({ id, to }) => (
<Button
key={id}
variant='outlined'
size='small'
href={`${path}/${to?.id}`}
style={{ margin: '0 5px 5px 0' }}
>
{to?.[field]}
</Button>
))
}
</FieldOrEmpty>
</div>
);
};

export default ThreatActorIndividualDetailsChips;
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ class ThreatActorIndividualLocationsComponent extends Component {
/>
</Security>
<div className="clearfix" />
<FieldOrEmpty source={threatActorIndividual.locations}>
<FieldOrEmpty source={threatActorIndividual.locations.edges}>
<List style={{ marginTop: -10 }}>
{threatActorIndividual.locations.edges.map((locationEdge) => {
const { types } = locationEdge;
Expand Down

0 comments on commit 5588903

Please sign in to comment.