18381629627

Committed 05 Aug 2025 11:51AM UTC coverage: 52.681%. First build

Build # 18381629627

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #427 from DLR-SC/fix/filter-name

Fix filter action display on long filter names

Run Details

473 of 607 branches covered (77.92%)

Branch coverage included in aggregate %.

0 of 18 new or added lines in 2 files covered. (0.0%)

4557 of 8941 relevant lines covered (50.97%)

10.59 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/ScenarioComponents/FilterComponents/GroupFilterCard.tsx

// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
// SPDX-License-Identifier: Apache-2.0

import Visibility from '@mui/icons-material/Visibility';
import VisibilityOffOutlined from '@mui/icons-material/VisibilityOffOutlined';
import DeleteForever from '@mui/icons-material/DeleteForever';
import {
  Card,
  CardActionArea,
  CardContent,
  Typography,
  Divider,
  CardActions,
  Checkbox,
  IconButton,
  useTheme,
} from '@mui/material';
import React, {Dispatch, useState} from 'react';
import ConfirmDialog from '../../shared/ConfirmDialog';
import {useTranslation} from 'react-i18next';
import {GroupFilter} from 'types/group';
import {Localization} from 'types/localization';

interface GroupFilterCardProps {
  /** The GroupFilter item to be displayed. */
  item: GroupFilter;

  /** A function that allows setting the groupFilter state so that if the user adds a filter, the new filter will be visible */
  toggleGroupFilter: Dispatch<GroupFilter>;

  /**
   * Dispatch function to handle deletion of a group filter.
   */
  deleteGroupFilter: Dispatch<string>;

  /** Whether the filter is selected or not. If it is selected, the detail view is displaying this filter's config. */
  selected: boolean;

  /**
   * Callback function that is called when the filter is selected or unselected.
   * @param groupFilter - Either this filter, if it was selected or null, if it was unselected.
   */
  selectFilterCallback: (groupFilter: GroupFilter | null) => void;

  /** An object containing localization information (translation & number formattation).*/
  localization?: Localization;
}

/**
 * GroupFilterCard component displays a card that represents a single filter for the group filter list. The card shows
 * the filter name, a toggle switch to turn on or off the filter, and a delete button to remove the filter.
 */
export default function GroupFilterCard({
  item,
  toggleGroupFilter,
  deleteGroupFilter,
  selected,
  selectFilterCallback,
  localization = {
    formatNumber: (value: number) => value.toString(),
    customLang: 'global',
    overrides: {},
  },
}: GroupFilterCardProps) {
  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
  const {t: defaultT} = useTranslation();
  const {t: customT} = useTranslation(localization.customLang);
  const theme = useTheme();

  return (
    <Card
      variant='outlined'
      sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
      }}
    >
      <CardActionArea
        onClick={() => {
          selectFilterCallback(selected ? null : item);
        }}
        sx={{
          flex: 1,
          minWidth: 0,
        }}
      >
        <CardContent
          sx={{
            backgroundColor: selected ? theme.palette.info.main : theme.palette.background.paper,
          }}
        >
          <Typography
            variant='body1'
            sx={{
              color: selected ? theme.palette.primary.contrastText : theme.palette.text.primary,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              maxWidth: '100%',
            }}
            title={item.name} // Show full name on hover
          >
            {item.name}
          </Typography>
        </CardContent>
      </CardActionArea>
      <Divider orientation='vertical' variant='middle' flexItem />
      <CardActions sx={{flexShrink: 0}}>
        <Checkbox
          checkedIcon={<Visibility />}
          icon={<VisibilityOffOutlined color='disabled' />}
          checked={item.isVisible}
          onClick={() => {
            toggleGroupFilter({...item, isVisible: !item.isVisible});
          }}
        />
        <ConfirmDialog
          open={confirmDialogOpen}
          title={
            localization.overrides && localization.overrides['group-filters.confirm-deletion-title']
              ? customT(localization.overrides['group-filters.confirm-deletion-title'])
              : defaultT('group-filters.confirm-deletion-title')
          }
          text={
            localization.overrides && localization.overrides['group-filters.confirm-deletion-text']
              ? customT(localization.overrides['group-filters.confirm-deletion-text'], {
                  groupName: item.name,
                })
              : defaultT('group-filters.confirm-deletion-text', {groupName: item.name})
          }
          abortButtonText={
            localization.overrides && localization.overrides['group-filters.close']
              ? customT(localization.overrides['group-filters.close'])
              : defaultT('group-filters.close')
          }
          confirmButtonText={
            localization.overrides && localization.overrides['group-filters.discard']
              ? customT(localization.overrides['group-filters.discard'])
              : defaultT('group-filters.discard')
          }
          onAnswer={(answer) => {
            if (answer) {
              deleteGroupFilter(item.id);
            }
            setConfirmDialogOpen(false);
          }}
        />
        <IconButton onClick={() => setConfirmDialogOpen(true)}>
          <DeleteForever />
        </IconButton>
      </CardActions>
    </Card>
  );
}

1	// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
2	// SPDX-License-Identifier: Apache-2.0
3
4	import Visibility from '@mui/icons-material/Visibility';	×
5	import VisibilityOffOutlined from '@mui/icons-material/VisibilityOffOutlined';	×
6	import DeleteForever from '@mui/icons-material/DeleteForever';	×
7	import {	×
8	Card,
9	CardActionArea,
10	CardContent,
11	Typography,
12	Divider,
13	CardActions,
14	Checkbox,
15	IconButton,
16	useTheme,
17	} from '@mui/material';
18	import React, {Dispatch, useState} from 'react';	×
19	import ConfirmDialog from '../../shared/ConfirmDialog';	×
20	import {useTranslation} from 'react-i18next';	×
21	import {GroupFilter} from 'types/group';
22	import {Localization} from 'types/localization';
23
24	interface GroupFilterCardProps {
25	/** The GroupFilter item to be displayed. */
26	item: GroupFilter;
27
28	/** A function that allows setting the groupFilter state so that if the user adds a filter, the new filter will be visible */
29	toggleGroupFilter: Dispatch<GroupFilter>;
30
31	/**
32	* Dispatch function to handle deletion of a group filter.
33	*/
34	deleteGroupFilter: Dispatch<string>;
35
36	/** Whether the filter is selected or not. If it is selected, the detail view is displaying this filter's config. */
37	selected: boolean;
38
39	/**
40	* Callback function that is called when the filter is selected or unselected.
41	* @param groupFilter - Either this filter, if it was selected or null, if it was unselected.
42	*/
43	selectFilterCallback: (groupFilter: GroupFilter \| null) => void;
44
45	/** An object containing localization information (translation & number formattation).*/
46	localization?: Localization;
47	}
48
49	/**
50	* GroupFilterCard component displays a card that represents a single filter for the group filter list. The card shows
51	* the filter name, a toggle switch to turn on or off the filter, and a delete button to remove the filter.
52	*/
53	export default function GroupFilterCard({	×
54	item,	×
55	toggleGroupFilter,	×
56	deleteGroupFilter,	×
57	selected,	×
58	selectFilterCallback,	×
59	localization = {	×
60	formatNumber: (value: number) => value.toString(),	×
61	customLang: 'global',	×
62	overrides: {},	×
63	},	×
64	}: GroupFilterCardProps) {	×
65	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);	×
66	const {t: defaultT} = useTranslation();	×
67	const {t: customT} = useTranslation(localization.customLang);	×
68	const theme = useTheme();	×
69
70	return (	×
71	<Card	×
72	variant='outlined'	×
73	sx={{	×
74	display: 'flex',	×
75	flexDirection: 'row',	×
76	alignItems: 'center',	×
77	}}	×
78	>
79	<CardActionArea	×
80	onClick={() => {	×
81	selectFilterCallback(selected ? null : item);	×
82	}}	×
NEW 83	sx={{	×
NEW 84	flex: 1,	×
NEW 85	minWidth: 0,	×
NEW 86	}}	×
87	>
NEW 88	<CardContent	×
NEW 89	sx={{	×
NEW 90	backgroundColor: selected ? theme.palette.info.main : theme.palette.background.paper,	×
NEW 91	}}	×
92	>
93	<Typography	×
94	variant='body1'	×
NEW 95	sx={{	×
NEW 96	color: selected ? theme.palette.primary.contrastText : theme.palette.text.primary,	×
NEW 97	overflow: 'hidden',	×
NEW 98	textOverflow: 'ellipsis',	×
NEW 99	whiteSpace: 'nowrap',	×
NEW 100	maxWidth: '100%',	×
NEW 101	}}	×
NEW 102	title={item.name} // Show full name on hover	×
103	>
104	{item.name}	×
105	</Typography>	×
106	</CardContent>	×
107	</CardActionArea>	×
108	<Divider orientation='vertical' variant='middle' flexItem />	×
NEW 109	<CardActions sx={{flexShrink: 0}}>	×
110	<Checkbox	×
111	checkedIcon={<Visibility />}	×
112	icon={<VisibilityOffOutlined color='disabled' />}	×
113	checked={item.isVisible}	×
114	onClick={() => {	×
115	toggleGroupFilter({...item, isVisible: !item.isVisible});	×
116	}}	×
117	/>	×
118	<ConfirmDialog	×
119	open={confirmDialogOpen}	×
120	title={	×
121	localization.overrides && localization.overrides['group-filters.confirm-deletion-title']	×
122	? customT(localization.overrides['group-filters.confirm-deletion-title'])	×
123	: defaultT('group-filters.confirm-deletion-title')	×
124	}
125	text={	×
126	localization.overrides && localization.overrides['group-filters.confirm-deletion-text']	×
127	? customT(localization.overrides['group-filters.confirm-deletion-text'], {	×
128	groupName: item.name,	×
129	})	×
130	: defaultT('group-filters.confirm-deletion-text', {groupName: item.name})	×
131	}
132	abortButtonText={	×
133	localization.overrides && localization.overrides['group-filters.close']	×
134	? customT(localization.overrides['group-filters.close'])	×
135	: defaultT('group-filters.close')	×
136	}
137	confirmButtonText={	×
138	localization.overrides && localization.overrides['group-filters.discard']	×
139	? customT(localization.overrides['group-filters.discard'])	×
140	: defaultT('group-filters.discard')	×
141	}
142	onAnswer={(answer) => {	×
143	if (answer) {	×
144	deleteGroupFilter(item.id);	×
145	}	×
146	setConfirmDialogOpen(false);	×
147	}}	×
148	/>	×
149	<IconButton onClick={() => setConfirmDialogOpen(true)}>	×
150	<DeleteForever />	×
151	</IconButton>	×
152	</CardActions>	×
153	</Card>	×
154	);
155	}	×

DLR-SC / ESID / 18381629627

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous