paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 38 Packages Projects Releases Wiki Activity

wip; DRAFT for visibility into changes

Browse Source 
Signed-off-by: Billy Stalnaker <bstalnaker@roadie.com>
This commit is contained in:
Billy Stalnaker
2025-03-19 09:28:14 -04:00
parent ad41ba7dc6
commit 5676296812
14 changed files with 304 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx
+118 -41
View File
@@ -19,6 +19,7 @@ import {
isNotificationsEnabledFor,
NotificationSettings,
} from '@backstage/plugin-notifications-common';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Table from '@material-ui/core/Table';
import MuiTableCell from '@material-ui/core/TableCell';
import { withStyles } from '@material-ui/core/styles';
@@ -36,23 +37,29 @@ const TableCell = withStyles({
},
})(MuiTableCell);
const CenterContentsTableCell = withStyles({
root: {
display: 'flex',
alignItems: 'center',
},
})(MuiTableCell);
const TopicTableRow = withStyles({
root: {
paddingLeft: '4px',
},
})(TableRow);
export const UserNotificationSettingsPanel = (props: {
settings: NotificationSettings;
onChange: (settings: NotificationSettings) => void;
originNames?: Record<string, string>;
}) => {
const { settings, onChange } = props;
const allOrigins = [
...new Set(
settings.channels.flatMap(channel =>
channel.origins.map(origin => origin.id),
),
),
];
const handleChange = (
channelId: string,
originId: string,
topicId: string | null,
enabled: boolean,
) => {
const updatedSettings = {
@@ -66,9 +73,30 @@ export const UserNotificationSettingsPanel = (props: {
if (origin.id !== originId) {
return origin;
}
if (topicId === null) {
return {
...origin,
enabled,
topics:
origin.topics?.map(topic => {
return { ...topic, enabled };
}) ?? [],
};
}
return {
...origin,
enabled,
topics:
origin.topics?.map(topic => {
if (topic.id === topicId) {
return {
...topic,
enabled: origin.enabled ? enabled : origin.enabled,
};
}
return topic;
}) ?? [],
};
}),
};
@@ -84,7 +112,7 @@ export const UserNotificationSettingsPanel = (props: {
return capitalize(originId.replaceAll(/[_:]/g, ' '));
};
if (settings.channels.length === 0 || allOrigins.length === 0) {
if (settings.channels.length === 0) {
return (
<Typography variant="body1">
No notification settings available, check back later
@@ -96,44 +124,93 @@ export const UserNotificationSettingsPanel = (props: {
<Table>
<TableHead>
<TableRow>
<TableCell>
<Typography variant="subtitle1">Origin</Typography>
</TableCell>
<CenterContentsTableCell>
<Typography variant="subtitle1">Origin</Typography> <ChevronRight />{' '}
<Typography variant="subtitle1">Topic</Typography>
</CenterContentsTableCell>
{settings.channels.map(channel => (
<TableCell>
<Typography variant="subtitle1">{channel.id}</Typography>
<Typography variant="subtitle1" align="center">
{channel.id}
</Typography>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{allOrigins.map(origin => (
<TableRow>
<TableCell>{formatOriginName(origin)}</TableCell>
{settings.channels.map(channel => (
<TableCell>
<Tooltip
title={`Enable or disable ${channel.id.toLocaleLowerCase(
'en-US',
)} notifications from ${formatOriginName(
origin,
).toLocaleLowerCase('en-US')}`}
>
<Switch
checked={isNotificationsEnabledFor(
settings,
channel.id,
origin,
)}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
handleChange(channel.id, origin, event.target.checked);
}}
/>
</Tooltip>
</TableCell>
))}
</TableRow>
))}
{settings.channels.map(channel =>
channel.origins.flatMap(origin => [
<TableRow key={`${channel.id}-${origin.id}`}>
<TableCell>{formatOriginName(origin.id)}</TableCell>
{settings.channels.map(ch => (
<TableCell key={ch.id} align="center">
<Tooltip
title={`Enable or disable ${channel.id.toLocaleLowerCase(
'en-US',
)} notifications from ${formatOriginName(origin.id)}`}
>
<Switch
checked={isNotificationsEnabledFor(
settings,
ch.id,
origin.id,
null,
)}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => {
handleChange(
ch.id,
origin.id,
null,
event.target.checked,
);
}}
/>
</Tooltip>
</TableCell>
))}
</TableRow>,
...(origin.topics?.map(topic => (
<TopicTableRow key={`${origin.id}-${topic.id}`}>
<CenterContentsTableCell>
<ChevronRight />
{topic.id}
</CenterContentsTableCell>
{settings.channels.map(ch => (
<TableCell key={`${ch.id}-${topic.id}`} align="center">
<Tooltip
title={`Enable or disable ${channel.id.toLocaleLowerCase(
'en-US',
)} notifications for the ${
topic.id
} topic from ${formatOriginName(origin.id)}`}
>
<Switch
checked={isNotificationsEnabledFor(
settings,
ch.id,
origin.id,
topic.id,
)}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => {
handleChange(
ch.id,
origin.id,
topic.id,
event.target.checked,
);
}}
/>
</Tooltip>
</TableCell>
))}
</TopicTableRow>
)) || []),
]),
)}
</TableBody>
</Table>
);