fix(ui): Notification-related string/UI edits and field validation (#985)

This commit is contained in:
TheCatLady
2021-02-22 05:09:12 -05:00
committed by GitHub
parent 8589eabfff
commit c88fcb2e2d
11 changed files with 370 additions and 352 deletions

View File

@@ -25,10 +25,12 @@ const messages = defineMessages({
notificationAgentsSettings: 'Notification Agents',
notificationAgentSettingsDescription:
'Choose the types of notifications to send, and which notification agents to use.',
notificationsettingssaved: 'Notification settings saved!',
notificationsettingssaved: 'Notification settings saved successfully!',
notificationsettingsfailed: 'Notification settings failed to save.',
enablenotifications: 'Enable Notifications',
autoapprovedrequests: 'Enable Notifications for Automatic Approvals',
email: 'Email',
webhook: 'Webhook',
});
interface SettingsRoute {
@@ -38,107 +40,106 @@ interface SettingsRoute {
regex: RegExp;
}
const settingsRoutes: SettingsRoute[] = [
{
text: 'Email',
content: (
<span className="flex items-center">
<svg
className="h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
/>
</svg>
Email
</span>
),
route: '/settings/notifications/email',
regex: /^\/settings\/notifications\/email/,
},
{
text: 'Discord',
content: (
<span className="flex items-center">
<DiscordLogo className="h-4 mr-2" />
Discord
</span>
),
route: '/settings/notifications/discord',
regex: /^\/settings\/notifications\/discord/,
},
{
text: 'Slack',
content: (
<span className="flex items-center">
<SlackLogo className="h-4 mr-2" />
Slack
</span>
),
route: '/settings/notifications/slack',
regex: /^\/settings\/notifications\/slack/,
},
{
text: 'Telegram',
content: (
<span className="flex items-center">
<TelegramLogo className="h-4 mr-2" />
Telegram
</span>
),
route: '/settings/notifications/telegram',
regex: /^\/settings\/notifications\/telegram/,
},
{
text: 'Pushbullet',
content: (
<span className="flex items-center">
<PushbulletLogo className="h-4 mr-2" />
Pushbullet
</span>
),
route: '/settings/notifications/pushbullet',
regex: /^\/settings\/notifications\/pushbullet/,
},
{
text: 'Pushover',
content: (
<span className="flex items-center">
<PushoverLogo className="h-4 mr-2" />
Pushover
</span>
),
route: '/settings/notifications/pushover',
regex: /^\/settings\/notifications\/pushover/,
},
{
text: 'Webhook',
content: (
<span className="flex items-center">
<Bolt className="h-4 mr-2" />
Webhook
</span>
),
route: '/settings/notifications/webhook',
regex: /^\/settings\/notifications\/webhook/,
},
];
const SettingsNotifications: React.FC = ({ children }) => {
const router = useRouter();
const intl = useIntl();
const { addToast } = useToasts();
const { data, error, revalidate } = useSWR('/api/v1/settings/notifications');
const activeLinkColor = 'bg-indigo-700';
const settingsRoutes: SettingsRoute[] = [
{
text: intl.formatMessage(messages.email),
content: (
<span className="flex items-center">
<svg
className="h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
/>
</svg>
{intl.formatMessage(messages.email)}
</span>
),
route: '/settings/notifications/email',
regex: /^\/settings\/notifications\/email/,
},
{
text: 'Discord',
content: (
<span className="flex items-center">
<DiscordLogo className="h-4 mr-2" />
Discord
</span>
),
route: '/settings/notifications/discord',
regex: /^\/settings\/notifications\/discord/,
},
{
text: 'Pushbullet',
content: (
<span className="flex items-center">
<PushbulletLogo className="h-4 mr-2" />
Pushbullet
</span>
),
route: '/settings/notifications/pushbullet',
regex: /^\/settings\/notifications\/pushbullet/,
},
{
text: 'Pushover',
content: (
<span className="flex items-center">
<PushoverLogo className="h-4 mr-2" />
Pushover
</span>
),
route: '/settings/notifications/pushover',
regex: /^\/settings\/notifications\/pushover/,
},
{
text: 'Slack',
content: (
<span className="flex items-center">
<SlackLogo className="h-4 mr-2" />
Slack
</span>
),
route: '/settings/notifications/slack',
regex: /^\/settings\/notifications\/slack/,
},
{
text: 'Telegram',
content: (
<span className="flex items-center">
<TelegramLogo className="h-4 mr-2" />
Telegram
</span>
),
route: '/settings/notifications/telegram',
regex: /^\/settings\/notifications\/telegram/,
},
{
text: intl.formatMessage(messages.webhook),
content: (
<span className="flex items-center">
<Bolt className="h-4 mr-2" />
{intl.formatMessage(messages.webhook)}
</span>
),
route: '/settings/notifications/webhook',
regex: /^\/settings\/notifications\/webhook/,
},
];
const activeLinkColor = 'bg-indigo-700';
const inactiveLinkColor = 'bg-gray-800';
const SettingsLink: React.FC<{