Skip to content

Commit

Permalink
Merge branch 'master' into issue/4911
Browse files Browse the repository at this point in the history
  • Loading branch information
@Goumies
Goumies committed Nov 27, 2023
2 parents fd00dfd + 7459c72 commit 5179eed
Show file tree
Hide file tree
Showing 802 changed files with 18,520 additions and 27,720 deletions.
218 changes: 56 additions & 162 deletions opencti-platform/opencti-front/src/components/FilterIconButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { last, toPairs } from 'ramda';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
import React, { FunctionComponent } from 'react';
import makeStyles from '@mui/styles/makeStyles';
import { truncate } from '../utils/String';
import { DataColumns, Filters } from './list_lines';
import { useFormatter } from './i18n';
import { Theme } from './Theme';
import FilterIconButtonContentWithRedirectionContainer from './FilterIconButtonContentWithRedirectionContainer';
import { entityFilters } from '../utils/filters/filtersUtils';
import { TriggerLine_node$data } from '../private/components/profile/triggers/__generated__/TriggerLine_node.graphql';
import { ChipOwnProps } from '@mui/material/Chip/Chip';
import { DataColumns } from './list_lines';
import {
Filter,
FilterGroup,
GqlFilterGroup,
initialFilterGroup,
} from '../utils/filters/filtersUtils';
import { filterIconButtonContentQuery } from './FilterIconButtonContent';
import useQueryLoading from '../utils/hooks/useQueryLoading';
import { FilterIconButtonContentQuery } from './__generated__/FilterIconButtonContentQuery.graphql';
import FilterIconButtonContainer from './FilterIconButtonContainer';

const useStyles = makeStyles<Theme>((theme) => ({
const useStyles = makeStyles(() => ({
filters1: {
float: 'left',
margin: '5px 0 0 10px',
Expand Down Expand Up @@ -39,83 +41,43 @@ const useStyles = makeStyles<Theme>((theme) => ({
float: 'left',
margin: '2px 0 0 15px',
},
filter1: {
marginRight: 10,
lineHeight: 32,
marginBottom: 10,
filters7: {
marginTop: 10,
},
filter2: {
margin: '0 10px 10px 0',
lineHeight: 32,
},
filter3: {
fontSize: 12,
height: 20,
marginRight: 7,
borderRadius: 10,
lineHeight: 32,
},
operator1: {
fontFamily: 'Consolas, monaco, monospace',
backgroundColor: theme.palette.background.accent,
marginRight: 10,
marginBottom: 10,
},
operator2: {
fontFamily: 'Consolas, monaco, monospace',
backgroundColor: theme.palette.background.accent,
margin: '0 10px 10px 0',
},
operator3: {
fontFamily: 'Consolas, monaco, monospace',
backgroundColor: theme.palette.background.accent,
height: 20,
marginRight: 10,
},
inlineOperator: {
display: 'inline-block',
height: '100%',
borderRadius: 0,
margin: '0 5px 0 5px',
padding: '0 5px 0 5px',
backgroundColor: 'rgba(255, 255, 255, .1)',
fontFamily: 'Consolas, monaco, monospace',
},
chipLabel: {
lineHeight: '32px',
maxWidth: 400,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
filters8: {
float: 'left',
margin: '3px 0 0 5px',
},
}));

interface FilterIconButtonProps {
availableFilterKeys?: string[];
filters: Filters<{ id: string; value: string }[]>;
handleRemoveFilter?: (key: string) => void;
filters?: FilterGroup;
handleRemoveFilter?: (key: string, op?: string) => void;
handleSwitchGlobalMode?: () => void;
handleSwitchLocalMode?: (filter: Filter) => void;
classNameNumber?: number;
styleNumber?: number;
chipColor?: ChipOwnProps['color'];
dataColumns?: DataColumns;
disabledPossible?: boolean;
redirection?: boolean;
resolvedInstanceFilters?: TriggerLine_node$data['resolved_instance_filters'];
}

const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
availableFilterKeys,
filters,
filters = initialFilterGroup,
handleRemoveFilter,
handleSwitchGlobalMode,
handleSwitchLocalMode,
classNameNumber,
styleNumber,
dataColumns,
disabledPossible,
redirection,
resolvedInstanceFilters,
chipColor,
}) => {
const { t } = useFormatter();
const classes = useStyles();

let finalClassName = classes.filters1;
if (classNameNumber === 2) {
finalClassName = classes.filters2;
Expand All @@ -127,110 +89,42 @@ const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
finalClassName = classes.filters5;
} else if (classNameNumber === 6) {
finalClassName = classes.filters6;
} else if (classNameNumber === 7) {
finalClassName = classes.filters7;
} else if (classNameNumber === 8) {
finalClassName = classes.filters8;
}

let classFilter = classes.filter1;
let classOperator = classes.operator1;
if (styleNumber === 2) {
classFilter = classes.filter2;
classOperator = classes.operator2;
} else if (styleNumber === 3) {
classFilter = classes.filter3;
classOperator = classes.operator3;
}

const filterPairs = toPairs(filters).filter(
(currentFilter) => !availableFilterKeys
|| availableFilterKeys?.some((k) => currentFilter[0].startsWith(k)),
const displayedFilters = {
...filters,
filters:
filters.filters.filter(
(f) => !availableFilterKeys || availableFilterKeys?.some((k) => f.key === k),
) || [],
};
const filtersRepresentativesQueryRef = useQueryLoading<FilterIconButtonContentQuery>(
filterIconButtonContentQuery,
{ filters: displayedFilters as unknown as GqlFilterGroup },
);
const lastKey = last(filterPairs)?.[0];

return (
<div
className={finalClassName}
style={{ width: dataColumns?.filters.width }}
>
{filterPairs.map((currentFilter) => {
const filterKey = currentFilter[0];
const filterContent = currentFilter[1];
const label = `${truncate(t(`filter_${filterKey}`), 20)}`;
const negative = filterKey.endsWith('not_eq');
const localFilterMode = negative ? t('AND') : t('OR');
const valuesToolip = (
<>
{filterContent.map((n) => (
<span key={n.value}>
<span>
{n.value && n.value.length > 0 ? n.value : t('No label')}{' '}
</span>
{last(filterContent)?.value !== n.value && (
<div className={classes.inlineOperator}>
{localFilterMode}
</div>
)}{' '}
</span>
))}
</>
);
const values = (
<>
{filterContent.map((n) => (
<span key={n.value}>
{redirection && entityFilters.includes(filterKey) ? (
<FilterIconButtonContentWithRedirectionContainer
filter={n}
resolvedInstanceFilters={resolvedInstanceFilters}
/>
) : (
<span>
{n.value && n.value.length > 0
? truncate(n.value, 15)
: t('No label')}{' '}
</span>
)}
{last(filterContent)?.value !== n.value && (
<div className={classes.inlineOperator}>
{localFilterMode}
</div>
)}{' '}
</span>
))}
</>
);
return (
<span key={filterKey}>
<Tooltip
title={
<>
<strong>{label}</strong>: {valuesToolip}
</>
}
>
<Chip
classes={{ root: classFilter, label: classes.chipLabel }}
label={
<>
<strong>{label}</strong>: {values}
</>
}
disabled={
disabledPossible
? Object.keys(filters).length === 1
: undefined
}
onDelete={
handleRemoveFilter
? () => handleRemoveFilter(filterKey)
: undefined
}
/>
</Tooltip>
{lastKey !== filterKey && (
<Chip classes={{ root: classOperator }} label={t('AND')} />
)}
</span>
);
})}
{filtersRepresentativesQueryRef && (
<React.Suspense fallback={<div />}>
<FilterIconButtonContainer
handleRemoveFilter={handleRemoveFilter}
handleSwitchGlobalMode={handleSwitchGlobalMode}
handleSwitchLocalMode={handleSwitchLocalMode}
styleNumber={styleNumber}
chipColor={chipColor}
disabledPossible={disabledPossible}
redirection={redirection}
filters={displayedFilters}
filtersRepresentativesQueryRef={filtersRepresentativesQueryRef}
/>
</React.Suspense>
)}
</div>
);
};
Expand Down

0 comments on commit 5179eed

Please sign in to comment.