Merge remote-tracking branch 'upstream/develop' into develop

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -3,6 +3,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
 import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
+import type { PushoverSound } from '@server/api/pushover';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -19,6 +20,8 @@ const messages = defineMessages({
   userToken: 'User or Group Key',
   userTokenTip:
     'Your 30-character <UsersGroupsLink>user or group identifier</UsersGroupsLink>',
+  sound: 'Notification Sound',
+  deviceDefault: 'Device Default',
   validationAccessTokenRequired: 'You must provide a valid application token',
   validationUserTokenRequired: 'You must provide a valid user or group key',
   pushoversettingssaved: 'Pushover notification settings saved successfully!',
@@ -38,6 +41,11 @@ const NotificationsPushover = () => {
     error,
     mutate: revalidate,
   } = useSWR('/api/v1/settings/notifications/pushover');
+  const { data: soundsData } = useSWR<PushoverSound[]>(
+    data?.options.accessToken
+      ? `/api/v1/settings/notifications/pushover/sounds?token=${data.options.accessToken}`
+      : null
+  );
 
   const NotificationsPushoverSchema = Yup.object().shape({
     accessToken: Yup.string()
@@ -77,6 +85,7 @@ const NotificationsPushover = () => {
         types: data?.types,
         accessToken: data?.options.accessToken,
         userToken: data?.options.userToken,
+        sound: data?.options.sound,
       }}
       validationSchema={NotificationsPushoverSchema}
       onSubmit={async (values) => {
@@ -132,6 +141,7 @@ const NotificationsPushover = () => {
               options: {
                 accessToken: values.accessToken,
                 userToken: values.userToken,
+                sound: values.sound,
               },
             });
 
@@ -226,6 +236,30 @@ const NotificationsPushover = () => {
                   )}
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="sound" className="text-label">
+                {intl.formatMessage(messages.sound)}
+              </label>
+              <div className="form-input-area">
+                <div className="form-input-field">
+                  <Field
+                    as="select"
+                    id="sound"
+                    name="sound"
+                    disabled={!soundsData?.length}
+                  >
+                    <option value="">
+                      {intl.formatMessage(messages.deviceDefault)}
+                    </option>
+                    {soundsData?.map((sound, index) => (
+                      <option key={`sound-${index}`} value={sound.name}>
+                        {sound.description}
+                      </option>
+                    ))}
+                  </Field>
+                </div>
+              </div>
+            </div>
             <NotificationTypeSelector
               currentTypes={values.enabled ? values.types : 0}
               onUpdate={(newTypes) => {