Skip to content

Commit

Permalink
[frontend] Alignment fixes (#8443) (#8435)
Browse files Browse the repository at this point in the history
  • Loading branch information
Kedae authored Sep 23, 2024
1 parent e76980a commit 91f5e94
Show file tree
Hide file tree
Showing 135 changed files with 141 additions and 162 deletions.
30 changes: 4 additions & 26 deletions opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
import MUIBreadcrumbs from '@mui/material/Breadcrumbs';
import { Link } from 'react-router-dom';
import Typography from '@mui/material/Typography';
import makeStyles from '@mui/styles/makeStyles';
import { useTheme } from '@mui/styles';
import { truncate } from '../utils/String';
import type { Theme } from './Theme';

Expand All @@ -13,35 +13,13 @@ interface element {
}

interface BreadcrumbsProps {
variant: 'standard' | 'list' | 'object',
elements: element[],
}

// Deprecated - https://mui.com/system/styles/basics/
// Do not use it for new code.
const useStyles = makeStyles<Theme>((theme) => ({
breadcrumbsList: {
marginBottom: theme.spacing(2),
},
breadcrumbsObject: {
marginTop: -5,
marginBottom: 15,
},
breadcrumbsStandard: {
marginTop: -5,
},
}));

const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, variant }) => {
const classes = useStyles();
let className = classes.breadcrumbsStandard;
if (variant === 'list') {
className = classes.breadcrumbsList;
} else if (variant === 'object') {
className = classes.breadcrumbsObject;
}
const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements }) => {
const theme = useTheme<Theme>();
return (
<MUIBreadcrumbs classes={{ root: className }}>
<MUIBreadcrumbs style={{ marginBottom: theme.spacing(2) }}>
{elements.map((element) => {
if (element.current) {
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ const styles = (theme) => ({
display: 'flex',
alignItems: 'center',
gap: 10,
marginTop: -10,
paddingBottom: 10,
flexWrap: 'wrap',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const ExternalReferences: FunctionComponent<ExternalReferencesProps> = () => {
} as UsePreloadedPaginationFragment<ExternalReferencesLinesPaginationQuery>;
return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('External references'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('External references'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ const Groupings: FunctionComponent<GroupingsProps> = () => {

return (
<span data-testid="groupings-page">
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Groupings'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Groupings'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const MalwareAnalyses: FunctionComponent = () => {

return (
<ExportContextProvider>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Malware analyses'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Malware analyses'), current: true }]} />
{queryRef && (
<div data-testid='malware-analyses-page'>
<DataTable
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ const Notes: FunctionComponent = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Notes'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Notes'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ const Reports: FunctionComponent = () => {
};
return (
<span data-testid="report-page">
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Reports'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Analyses') }, { label: t_i18n('Reports'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const RootExternalReference = () => {
if (props.externalReference && props.connectorsForImport) {
return (
<>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Analyses') },
{ label: t_i18n('External references'), link: '/dashboard/analyses/external_references' },
]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const RootGrouping = () => {
const currentAccessRight = useGetCurrentUserAccessRight(grouping.currentUserAccessRight);
return (
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Analyses') },
{ label: t_i18n('Groupings'), link: '/dashboard/analyses/groupings' },
{ label: grouping.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const RootMalwareAnalysis = () => {
const paddingRight = getPaddingRight(location.pathname, malwareAnalysis.id, '/dashboard/analyses/malware_analyses', false);
return (
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Analyses') },
{ label: t_i18n('Malware analyses'), link: '/dashboard/analyses/malware_analyses' },
{ label: getMainRepresentative(malwareAnalysis), current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const RootNote = () => {
const { note } = props;
return (
<>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Analyses') },
{ label: t_i18n('Notes'), link: '/dashboard/analyses/notes' },
]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const RootReport = () => {
const currentAccessRight = useGetCurrentUserAccessRight(report.currentUserAccessRight);
return (
<div style={{ paddingRight }} data-testid="report-details-page">
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Analyses') },
{ label: t_i18n('Reports'), link: '/dashboard/analyses/reports' },
{ label: report.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const Channels = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Channels'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Channels'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ const Malwares = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Malwares'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Malwares'), current: true }]} />
{viewStorage.view !== 'lines' ? renderCards() : renderList()}
{!isFABReplaced && (
<Security needs={[KNOWLEDGE_KNUPDATE]}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const Tools = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Tools'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Tools'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const Vulnerabilities = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Vulnerabilities'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Arsenal') }, { label: t_i18n('Vulnerabilities'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const RootChannel = ({ queryRef, channelId }: RootChannelProps) => {
/>
</Routes>
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Arsenal') },
{ label: t_i18n('Channels'), link: '/dashboard/arsenal/channels' },
{ label: channel.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ const RootMalware = ({ queryRef, malwareId }: RootMalwareProps) => {
/>
</Routes>
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Arsenal') },
{ label: t_i18n('Malwares'), link: '/dashboard/arsenal/malwares' },
{ label: malware.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const RootTool = ({ queryRef, toolId }: RootToolProps) => {
/>
</Routes>
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Arsenal') },
{ label: t_i18n('Tools'), link: '/dashboard/arsenal/tools' },
{ label: tool.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const RootVulnerability = ({ queryRef, vulnerabilityId }: RootVulnerabilityProps
/>
</Routes>
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Arsenal') },
{ label: t_i18n('Vulnerabilities'), link: '/dashboard/arsenal/vulnerabilities' },
{ label: vulnerability.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const CaseIncidents: FunctionComponent<CaseIncidentsProps> = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Incident responses'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Incident responses'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ const CaseRfis: FunctionComponent<CaseRfisProps> = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for information'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for information'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ const CaseRfts: FunctionComponent<CaseRftsProps> = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for takedown'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Requests for takedown'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ const Feedbacks: FunctionComponent<FeedbacksProps> = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Feedbacks'), current: true }]}/>
<Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Feedbacks'), current: true }]}/>
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const Tasks = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Tasks'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Cases') }, { label: t_i18n('Tasks'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const RootCaseIncidentComponent = ({ queryRef, caseId }) => {
const currentAccessRight = useGetCurrentUserAccessRight(caseData.currentUserAccessRight);
return (
<div style={{ paddingRight }} data-testid="incident-details-page">
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Cases') },
{ label: t_i18n('Incident responses'), link: '/dashboard/cases/incidents' },
{ label: caseData.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const RootCaseRfiComponent = ({ queryRef, caseId }) => {
const currentAccessRight = useGetCurrentUserAccessRight(caseData.currentUserAccessRight);
return (
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Cases') },
{ label: t_i18n('Requests for information'), link: '/dashboard/cases/rfis' },
{ label: caseData.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const RootCaseRftComponent = ({ queryRef, caseId }) => {
const currentAccessRight = useGetCurrentUserAccessRight(caseData.currentUserAccessRight);
return (
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Cases') },
{ label: t_i18n('Requests for takedown'), link: '/dashboard/cases/rfts' },
{ label: caseData.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const RootFeedbackComponent = ({ queryRef, caseId }) => {
const { canEdit } = useGetCurrentUserAccessRight(feedbackData.currentUserAccessRight);
return (
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Cases') },
{ label: t_i18n('Feedbacks'), link: '/dashboard/cases/feedbacks' },
{ label: feedbackData.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const RootTaskComponent = ({ queryRef, taskId }) => {
<>
{data ? (
<div style={{ paddingRight }}>
<Breadcrumbs variant="object" elements={[
<Breadcrumbs elements={[
{ label: t_i18n('Cases') },
{ label: t_i18n('Tasks'), link: '/dashboard/cases/tasks' },
{ label: data.name, current: true },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class Connectors extends Component {
const { t, classes } = this.props;
return (
<div className={classes.container}>
<Breadcrumbs variant="list" elements={[{ label: t('Data') }, { label: t('Ingestion') }, { label: t('Connectors'), current: true }]} />
<Breadcrumbs elements={[{ label: t('Data') }, { label: t('Ingestion') }, { label: t('Connectors'), current: true }]} />
<IngestionMenu/>
<QueryRenderer
query={workersStatusQuery}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const CsvMappers = () => {
schemaAttributesQueryRef={queryRefSchemaAttributes}
>
<div className={classes.container}>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Processing') }, { label: t_i18n('CSV mappers'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Processing') }, { label: t_i18n('CSV mappers'), current: true }]} />
<ProcessingMenu />
<ListLines
helpers={helpers}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const Entities = () => {

return (
<div data-testid='data-entities-page'>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Entities'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Entities'), current: true }]} />
{queryRef && (
<DataTable
storageKey={LOCAL_STORAGE_KEY}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const Feed = () => {
padding: '0 200px 50px 0',
}}
>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Data sharing') }, { label: t_i18n('CSV feeds'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Data sharing') }, { label: t_i18n('CSV feeds'), current: true }]} />
<SharingMenu/>
{feedState.view === 'lines' ? renderLines(paginationOptions) : ''}
<Security needs={[TAXIIAPI_SETCOLLECTIONS]}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const IngestionCsv = () => {

return (
<div className={classes.container}>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Ingestion') }, { label: t_i18n('CSV feeds'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Ingestion') }, { label: t_i18n('CSV feeds'), current: true }]} />
<IngestionMenu/>
{renderLines()}
<Security needs={[INGESTION_SETINGESTIONS]}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const IngestionRss = () => {
}
return (
<div className={classes.container}>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Ingestion') }, { label: t_i18n('RSS feeds'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Ingestion') }, { label: t_i18n('RSS feeds'), current: true }]} />
<IngestionMenu/>
<ListLines
helpers={storageHelpers}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const IngestionTaxii = () => {
}
return (
<div className={classes.container}>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Ingestion') }, { label: t_i18n('TAXII feeds'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Ingestion') }, { label: t_i18n('TAXII feeds'), current: true }]} />
<IngestionMenu/>
<ListLines
helpers={storageHelpers}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const Playbooks: FunctionComponent = () => {
};
return (
<div className={classes.container}>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Processing') }, { label: t_i18n('Automation'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Processing') }, { label: t_i18n('Automation'), current: true }]} />
<ProcessingMenu />
{isEnterpriseEdition ? (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ const Relationships = () => {

return (
<>
<Breadcrumbs variant="list" elements={[{ label: t_i18n('Data') }, { label: t_i18n('Relationships'), current: true }]} />
<Breadcrumbs elements={[{ label: t_i18n('Data') }, { label: t_i18n('Relationships'), current: true }]} />
{queryRef && (
<DataTable
dataColumns={dataColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ class Stream extends Component {
};
return (
<div className={classes.container}>
<Breadcrumbs variant="list" elements={[{ label: t('Data') }, { label: t('Data sharing') }, { label: t('Live streams'), current: true }]} />
<Breadcrumbs elements={[{ label: t('Data') }, { label: t('Data sharing') }, { label: t('Live streams'), current: true }]} />
<SharingMenu/>
{view === 'lines' ? this.renderLines(paginationOptions) : ''}
<Security needs={[TAXIIAPI_SETCOLLECTIONS]}>
Expand Down
Loading

0 comments on commit 91f5e94

Please sign in to comment.