mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-01 04:08:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): improved alerts for services settings & removed alert titles (#1280)

Browse Source 
* refactor(ui): improved alerts for services settings & removed alert titles

* fix(ui): set styling of alert links to be consistent w/ others

* fix(ui): clarify appropriate 4K setting when user has not configured a default non-4K server

* fix: remove unused var/eslint-disable & correct string
This commit is contained in:
TheCatLady
2021-04-13 22:20:25 -04:00
committed by GitHub
parent ad67381397
commit 2cd952d1ca
18 changed files with 174 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/Settings/Notifications/NotificationsEmail.tsx
View File

@@ -30,7 +30,6 @@ const messages = defineMessages({
'SSL should be disabled on standard TLS connections (port 587)',
senderName: 'Sender Name',
validationEmail: 'You must provide a valid email address',
emailNotificationTypesAlert: 'Email Notification Recipients',
emailNotificationTypesAlertDescription:
'<strong>Media Requested</strong>, <strong>Media Automatically Approved</strong>, and <strong>Media Failed</strong> email notifications are sent to all users with the <strong>Manage Requests</strong> permission.',
emailNotificationTypesAlertDescriptionPt2:
@@ -198,38 +197,40 @@ const NotificationsEmail: React.FC = () => {
return (
<>
<Alert
title={intl.formatMessage(messages.emailNotificationTypesAlert)}
title={
<>
<p className="mb-2">
{intl.formatMessage(
messages.emailNotificationTypesAlertDescription,
{
strong: function strong(msg) {
return (
<strong className="font-semibold text-indigo-100">
{msg}
</strong>
);
},
}
)}
</p>
<p>
{intl.formatMessage(
messages.emailNotificationTypesAlertDescriptionPt2,
{
strong: function strong(msg) {
return (
<strong className="font-semibold text-indigo-100">
{msg}
</strong>
);
},
}
)}
</p>
</>
}
type="info"
>
<p className="mb-2">
{intl.formatMessage(
messages.emailNotificationTypesAlertDescription,
{
strong: function strong(msg) {
return (
<strong className="font-normal text-indigo-100">
{msg}
</strong>
);
},
}
)}
</p>
<p>
{intl.formatMessage(
messages.emailNotificationTypesAlertDescriptionPt2,
{
strong: function strong(msg) {
return (
<strong className="font-normal text-indigo-100">
{msg}
</strong>
);
},
}
)}
</p>
</Alert>
/>
<Form className="section">
<div className="form-row">
<label htmlFor="enabled" className="checkbox-label">

36
src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
View File

@@ -19,7 +19,6 @@ const messages = defineMessages({
'Pushbullet notification settings saved successfully!',
pushbulletSettingsFailed: 'Pushbullet notification settings failed to save.',
testSent: 'Pushbullet test notification sent!',
settingUpPushbullet: 'Setting Up Pushbullet Notifications',
settingUpPushbulletDescription:
'To configure Pushbullet notifications, you will need to <CreateAccessTokenLink>create an access token</CreateAccessTokenLink>.',
});
@@ -95,24 +94,25 @@ const NotificationsPushbullet: React.FC = () => {
return (
<>
<Alert
title={intl.formatMessage(messages.settingUpPushbullet)}
title={intl.formatMessage(
messages.settingUpPushbulletDescription,
{
CreateAccessTokenLink: function CreateAccessTokenLink(msg) {
return (
<a
href="https://www.pushbullet.com/#settings"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
}
)}
type="info"
>
{intl.formatMessage(messages.settingUpPushbulletDescription, {
CreateAccessTokenLink: function CreateAccessTokenLink(msg) {
return (
<a
href="https://www.pushbullet.com/#settings"
className="text-indigo-100 hover:text-white hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
})}
</Alert>
/>
<Form className="section">
<div className="form-row">
<label htmlFor="enabled" className="checkbox-label">

13
src/components/Settings/Notifications/NotificationsPushover/index.tsx
View File

@@ -20,7 +20,6 @@ const messages = defineMessages({
pushoversettingssaved: 'Pushover notification settings saved successfully!',
pushoversettingsfailed: 'Pushover notification settings failed to save.',
testsent: 'Pushover test notification sent!',
settinguppushover: 'Setting Up Pushover Notifications',
settinguppushoverDescription:
'To configure Pushover notifications, you will need to <RegisterApplicationLink>register an application</RegisterApplicationLink> and enter the API token below. (You can use one of the <IconLink>official Overseerr icons on GitHub</IconLink>.)',
});
@@ -116,15 +115,12 @@ const NotificationsPushover: React.FC = () => {
return (
<>
<Alert
title={intl.formatMessage(messages.settinguppushover)}
type="info"
>
{intl.formatMessage(messages.settinguppushoverDescription, {
title={intl.formatMessage(messages.settinguppushoverDescription, {
RegisterApplicationLink: function RegisterApplicationLink(msg) {
return (
<a
href="https://pushover.net/apps/build"
className="text-indigo-100 hover:text-white hover:underline"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
@@ -136,7 +132,7 @@ const NotificationsPushover: React.FC = () => {
return (
<a
href="https://github.com/sct/overseerr/tree/develop/public"
className="text-indigo-100 hover:text-white hover:underline"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
@@ -145,7 +141,8 @@ const NotificationsPushover: React.FC = () => {
);
},
})}
</Alert>
type="info"
/>
<Form className="section">
<div className="form-row">
<label htmlFor="enabled" className="checkbox-label">

10
src/components/Settings/Notifications/NotificationsSlack/index.tsx
View File

@@ -17,7 +17,6 @@ const messages = defineMessages({
slacksettingssaved: 'Slack notification settings saved successfully!',
slacksettingsfailed: 'Slack notification settings failed to save.',
testsent: 'Slack test notification sent!',
settingupslack: 'Setting Up Slack Notifications',
settingupslackDescription:
'To configure Slack notifications, you will need to create an <WebhookLink>Incoming Webhook</WebhookLink> integration and enter the webhook URL below.',
validationWebhookUrl: 'You must provide a valid URL',
@@ -48,13 +47,13 @@ const NotificationsSlack: React.FC = () => {
return (
<>
<Alert title={intl.formatMessage(messages.settingupslack)} type="info">
{intl.formatMessage(messages.settingupslackDescription, {
<Alert
title={intl.formatMessage(messages.settingupslackDescription, {
WebhookLink: function WebhookLink(msg) {
return (
<a
href="https://my.slack.com/services/new/incoming-webhook/"
className="text-indigo-100 hover:text-white hover:underline"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
@@ -63,7 +62,8 @@ const NotificationsSlack: React.FC = () => {
);
},
})}
</Alert>
type="info"
/>
<Formik
initialValues={{
enabled: data.enabled,

13
src/components/Settings/Notifications/NotificationsTelegram.tsx
View File

@@ -23,7 +23,6 @@ const messages = defineMessages({
telegramsettingssaved: 'Telegram notification settings saved successfully!',
telegramsettingsfailed: 'Telegram notification settings failed to save.',
testsent: 'Telegram test notification sent!',
settinguptelegram: 'Setting Up Telegram Notifications',
settinguptelegramDescription:
'To configure Telegram notifications, you will need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key. Additionally, you will need the chat ID for the chat to which you would like to send notifications. You can find this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat and issuing the <code>/my_id</code> command.',
sendSilently: 'Send Silently',
@@ -123,15 +122,12 @@ const NotificationsTelegram: React.FC = () => {
return (
<>
<Alert
title={intl.formatMessage(messages.settinguptelegram)}
type="info"
>
{intl.formatMessage(messages.settinguptelegramDescription, {
title={intl.formatMessage(messages.settinguptelegramDescription, {
CreateBotLink: function CreateBotLink(msg) {
return (
<a
href="https://core.telegram.org/bots#6-botfather"
className="text-indigo-100 hover:text-white hover:underline"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
@@ -143,7 +139,7 @@ const NotificationsTelegram: React.FC = () => {
return (
<a
href="https://telegram.me/get_id_bot"
className="text-indigo-100 hover:text-white hover:underline"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
@@ -155,7 +151,8 @@ const NotificationsTelegram: React.FC = () => {
return <code className="bg-opacity-50">{msg}</code>;
},
})}
</Alert>
type="info"
/>
<Form className="section">
<div className="form-row">
<label htmlFor="enabled" className="checkbox-label">

2
src/components/Settings/Notifications/NotificationsWebhook/index.tsx
View File

@@ -70,7 +70,7 @@ const NotificationsWebhook: React.FC = () => {
otherwise: Yup.string().nullable(),
})
.matches(
// eslint-disable-next-line
// eslint-disable-next-line no-useless-escape
/^(https?:)?\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i,
intl.formatMessage(messages.validationWebhookUrl)
),